Separate the app DOM from the tests DOM

[kentcdodds]

🌈 Feature

Right now the tests run in the same JavaScript/DOM environment as the app. This can lead to unexpected and pretty confusing results which I (and other maintainers/contributors) have to explain over and over again to people reporting issues to react-testing-library.

Here's a simple example: https://codesandbox.io/s/n3j6r28z10

We have to tell people that they need to NOT render anything in their index.js file to avoid the issues which is annoying, inconvenient, and confusing.

I think it would make a lot of sense to run the tests in an iframe. And maybe provide a codesandbox option to run the tests with jsdom rather than the browser DOM (this would simulate local reality better for create-react-app based codesandboxes).

[kentcdodds]

Note, as a long-time patron and lover of codesandbox, this is by far my biggest issue and has been for over a year. I will be very happy when this is fixed :)

[kentcdodds]

Awesome!!! Thank you @CompuIves! When can we expect this to be released?

[kentcdodds]

Unfortunately the linked codesandbox is still not working properly. When you get those tests passing is when it's working. Also, I noticed, that I can't click and drag the browser/tests tabs to re-organize them.

I do really appreciate the fix of the test output though! That looks awesome!

[kentcdodds]

Whoops! That test was messed up 😅

[kentcdodds]

Ok, fixed, but now I can't get the tests running. It just sits there like this:

[kentcdodds]

Ok, I forked and the fork runs the tests: https://codesandbox.io/s/vq1y839xv0

But... It's got some issues... The first time it runs, it passes, the second time it does not:

Also happens when you do this:

[CompuIves]

It seems like the second time fails because we cache the compilation result of the dependency files and I think a side effect or something happens therre. I can throw those away, the disadvantage is that tests will run slower a second time and onwards.

[CompuIves]

f76d6fb and 6d41acb fix the issues you mentioned!

Should be live this evening.

[CompuIves]

Fix is live!

[kentcdodds]

Awesome!

Ok, last things (I think).

https://codesandbox.io/s/383xorr2j5

First, I'm getting this in the console every time I run the tests:

Download the React DevTools for a better development experience: https://fb.me/react-devtools

Second, if I have the same test twice it fails. This is because the first test messes up the DOM. This is a known issue in react-testing-library and the solution is to use cleanup. This is so common that react-testing-library exposes a module called cleanup-after-each.js The typical usage scenario is to add that module to your setupFilesAfterEnv jest config or import it in the src/setupTests.js file in create-react-app or codesandbox.

I'm not sure why it's not working to use the module, but if I call cleanup manually that fixes things. So we've just gotta figure out why the module import isn't working. Thanks for working on this!