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

[IanVS]

• @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 https://github.com/testing-library/react-testing-library/pull/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]

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]

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]

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]

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]

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.

[eps1lon]

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

[IanVS]

If process isn't defined, the auto-cleanup functions are added: https://github.com/testing-library/react-testing-library/blob/c80809a956b0b9f3289c4a6fa8b5e8cc72d6ef6d/src/index.js#L9

[eps1lon]

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.