testing-library/testing-library-docs

Cannot use `dont-cleanup-after-each` in browser

IanVS opened this issue · 8 comments

IanVS commented
  • @testing-library/react version: 13.3.0
  • Testing Framework and version: Storybook 6.5.9
  • DOM Environment: Browser

Relevant code or config:

import '@testing-library/react/dont-cleanup-after-each';

What you did:

I'm trying to update to react 18, but am getting errors about act not being available in production builds of react. So, I tried setting globalThis.IS_REACT_ACT_ENVIRONMENT = false, but found that this library automatically sets it to true, so to disable it I tried to import dont-cleanup-after-each as instructed in https://testing-library.com/docs/react-testing-library/setup#skipping-auto-cleanup, since testing-library/react-testing-library#994 said to disable it the same way as cleanup.

What happened:

Uncaught ReferenceError: process is not defined
    at dont-cleanup-after-each.js:1:1

This is because process does not exist in browsers, which is where I'm running RTL.

Reproduction:

Problem description:

I can't disable the use of ACT, it seems, which causes my tests to fail.

Suggested solution:

If process is not defined, you could check for import.meta.env and use that instead.

eps1lon commented

We currently don't support testing production builds of React.

said to disable it the same way as cleanup.

You can also import from /pure instead which we currently don't document. But that won't help with your act-warning issues.

I'm leaving this open for suggestions but I don't see how we would support testing production builds since that's mostly a documentation effort. You're better off using an e2e testing framework in a real browser if you want to test production builds.

IanVS commented

Thanks, I am in fact testing in a real browser using storybook's testing tools. I tried importing from pure, with no luck, so I think this is not the issue I thought it was at first. In fact I found that if I use @storybook/testing-library, which wraps and instruments the testing-library methods, this issue is resolved. I don't understand why though, yet. Feel free to close this issue, since it sounds like you don't expect the library to be used in production builds. But I think that ideally testing-library should work in browsers, not just inside jest or when using webpack.

eps1lon commented

But I think that ideally testing-library should work in browsers, not just inside jest or when using webpack.

These are two different things. The library can absolutely be used in a browser. I've been doing that for years.

What is currently unsolved is testing with a React production build. That build can run in a browser, Node or any other JS runtime.

IanVS commented

I guess my point was that https://github.com/testing-library/react-testing-library/blob/main/dont-cleanup-after-each.js cannot run in a browser, and this check is also broken in the browser: https://github.com/testing-library/react-testing-library/blob/c80809a956b0b9f3289c4a6fa8b5e8cc72d6ef6d/src/index.js#L9 since process is a node.js global, and does not exist in browsers.

eps1lon commented

I guess my point was that https://github.com/testing-library/react-testing-library/blob/main/dont-cleanup-after-each.js cannot run in a browser, and this check is also broken in the browser:

You don't need it in a browser. /pure is sufficient for browser usage.

  • 👍1
eps1lon commented

Hm isn't this just a documentation issue? Auto-cleanup should be disabled in browsers anyway since process isn't defined there.

eps1lon commented

Yeah let's move this to documentation that you should use a bundler. That solves most use cases and once we think the ecosystem is ready for exports we can create different entrypoints that support both node and browsers.