Codesandbox-client: Cleanup function from testing framework doesn't work in codesandbox.

[dhuber666]

🐛 bug report

Description of the problem

If you have tests in your project and you want to cleanup after each test it won't cleanup.
I think that's because the tests run in the browser and not in jsdom. In my example the cleanup function from react-testing-library

How has this issue affected you? What are you trying to accomplish?

The problem is the tests getting useless for me because it won't clean up and therefore it has several "input" or other tags and I can't relyable find the correct element. Because the same element exists several times when you have more tests. Look at the codesandbox where you can see the problem.
This same test will work on local machine and won't fail.
Corresponding files: TodoHeader.js and TodoHeader.test.js

Link to sandbox: https://codesandbox.io/s/ypok50n709 (optional)

Your Environment

| Software | Name/Version|
| ---------------- | ---------- |
| Сodesandbox |
| Chrome | 72|
| Windows |10|

[ardeaf]

The real problem is the Sandbox's entrypoint renders one DOM and react-testing-library doesn't get rendered in it's own DOM, I think.

the cleanup function works. Try removing it from your sandbox, and when your tests run you'll see your tests continue to render new elements in the DOM without cleaning up the old ones.

The reason your test is failing is because index.js is still rendered when Jest runs tests. The new render function from react-testing-library in your test just adds to the existing DOM. So, when you try to change the value of the input, you are finding the wrong input, and you're not even doing anything to the new inputs rendered by react-testing-library. If you notice, your tests change the original input rendered by index.js.

Also, the mock function isn't getting run because it's part of the new TodoHeader form rendered by react-testing-library. So, const form = getByTestId("form") ends up finding the original form rendered by index.js. Then you submit that form which doesn't have the mock on it.

In any case, to get your test to pass with react-testing-library I had to just comment out ReactDOM.render(...) from index.js

[lbogdan]

Hey @dhuber666 ,

Did @ardeaf 's comment solve the issue for you? If so, can you please close this? Thanks!

And thanks @ardeaf for your comprehensive comment! 🙂

[robertcoopercode]

I run into the same issue as @dhuber666, but I'm able to get the cleanup to work as expected when I comment out the render(...) of my React app in the entry point of my app (as suggested by @ardeaf). Here's a sandbox that demonstrates the issue: https://codesandbox.io/s/l242wzo837

Ideally, we don't have to comment out the render method each time we want the cleanup to work as expected.

Thanks @ardeaf for insights into this 👍

[CompuIves]

Hmm yes this definitely is an issue in CodeSandbox. I've been meaning to fix this for a while by running the tests on something like jsdom instead, I'll see what I can do!

[berlirumapea]

I run the same issue with cleanup, tried the suggestion by @ardeaf and it works. But my fireEvent doesn't work. Link to the code: https://codesandbox.io/s/mqm2w49y1x

[github-actions[bot]]

This issue is stale because it has been open many days with no activity. It will be closed soon unless the stale label is removed or a comment is made.

[github-actions[bot]]

This issue has been automatically closed because there wasn't any activity after the previous notice or the stale label wasn't removed.