Codesandbox-client: 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]

https://github.com/codesandbox/codesandbox-client/commit/f76d6fb5d81d3698f506d148696972e65ad574db and https://github.com/codesandbox/codesandbox-client/commit/6d41acb39e70ab95f207e32a5e8d142d1069c06d 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!

[CompuIves]

Good point I fixed the tests setup (it was only executed once per suite) and added support for setupFilesAfterEnv in package.json (under jest).

[kentcdodds]

Awesome @CompuIves! Can't wait to use it once the build gets fixed 💯

This is seriously so huge for me and all react-testing-library users. THANK YOU!

[CompuIves]

Last fix is live!

[kentcdodds]

YES!!! It's working great!

We still have the React DevTools warning in the console when running the tests (every time you run the tests, you get another):

But it's totally functional now and I'm so thrilled! This is huge!!!

[CompuIves]

Ahh, that's probably because JSDom tells React that there are no devtools, haha. It would be cool to catch all the console messages and show them in the tests pane as well. Good for the next iterations!

[kentcdodds]

I'll open a new issue about it 👍

[kentcdodds]

Reported: https://github.com/codesandbox/codesandbox-client/issues/1855