Render in browser instead of JSDom

[tamlyn]

Describe the feature you'd like:

I'm not sure if this is even possible...

I love Testing Library. But I don't love not being able to see the rendered component I'm testing. What I would like is to write tests in Jest exactly as I do now, but have the code rendered in a real browser so that I can see it and inspect it if necessary.

Suggested implementation:

I've no idea. Maybe something like https://www.npmjs.com/package/jest-browser. Or Karma, just seen #161.

Describe alternatives you've considered:

• Cypress/TestCafe/Puppeteer Testing Library: these are all for loading external sites. But I want to render a component from the test code into the browser DOM.
• debug this is a great help but it's not as good as a screenshot
• Generating a screenshot from JSDom: oh, I just found https://www.npmjs.com/package/jsdom-screenshot

[kentcdodds]

Hi @tamlyn,

You'll be pleased to hear that Testing Library works wherever you can find a DOM. So if you want to use a real DOM then feel free to do so using whatever tool you wish (Karma, jest-browser, puppeteer, cypress) and import Testing Library and you're good to rock and roll :)

We even have implementations of testing library in some of those environments. Check our org page: https://github.com/testing-library

Good luck!

[tamlyn]

This might be another option to consider: https://github.com/facebook-atom/jest-electron-runner

It runs the jest tests inside Electron where you have access to a full DOM, whereas jest-puppeteer uses Jest to control Puppeteer but they run in separate processes.

[hoguan]

Cypress/TestCafe/Puppeteer Testing Library: these are all for loading external sites. But I want to render a component from the test code into the browser DOM.

Hey @tamlyn have you figured this out? I'm trying to prototype running react component tests with jest-puppeteer. But I'm under the impress that it's used for loading external sites with urls as you mentioned here, rather than rendering a component.

[tamlyn]

Have a look at https://github.com/nvh95/jest-preview

I haven't had a chance to try it yet but it looks promising.