Bug: global.IS_REACT_ACT_ENVIRONMENT = false does not disable missing act warnings

[anilanar]

This issue was first created in facebook/react, see facebook/react#24854.

The rational behind why we want to disable act warnings: facebook/react#23197

---

Potentially related to using jest. Didn't confirm.

React version: 18.2.0

Steps To Reproduce

1. Clone https://github.com/anilanar/react-18-act-env ; which is a create-react-app with an adjustment to App component to trigger an async setState and an adjustment to the test to wait for that async state update.
2. npm install
3. npm test -- --watchAll

The current behavior

It logs Warning: An update to App inside a test was not wrapped in act(...).

The expected behavior

It does not log that warning.

[eps1lon]

We enable missing act warnings in the global setup that comes with @testing-library/react. To disable the global setup, import from @testing-library/react/pure instead. Alternatively, try setting global.IS_REACT_ACT_ENVIRONMENT = false; in a beforeAll instead which is where all side-effects inside tests should go anyway.

Hope this helps. If there's anything unclear, please let me know.

[nstepien]

@eps1lon any comment on the following? Why does it set IS_REACT_ACT_ENVIRONMENT to false in async wrappers?
#1051 (comment)

[eps1lon]

Why does it set IS_REACT_ACT_ENVIRONMENT to false in async wrappers?

Because we're not acting when we wait for something to flush. Anything wrapped in act will only flush updates when we exit its scope. For example, if we would wait asynchronously for 5s which is wrapped in act then no state update would be flushed during that period defeating the purpose of waitFor

More detailed explainer: #937 (comment)

[RobRukavina]

I am having this issue also.

We enable missing act warnings in the global setup that comes with @testing-library/react. To disable the global setup, import from @testing-library/react/pure instead. Alternatively, try setting global.IS_REACT_ACT_ENVIRONMENT = false; in a beforeAll instead which is where all side-effects inside tests should go anyway.

Hope this helps. If there's anything unclear, please let me know.

and neither of these solutions had any effect on the warning displaying. Any other ideas?

[anilanar]

@RobRukavina

An idea:

For global.IS_REACT_ACT_ENVIRONMENT = false;, it can be a beforeAll ordering issue. Testing library uses beforeAll too so you need to make sure your beforeAll runs after testing library's.

You can make sure your beforeAll runs later by importing testing library. e.g.

// make sure you import it here
import '@testing-library/react';

beforeAll(() => {
  global.IS_REACT_ACT_ENVIRONMENT = false;
});

[RobRukavina]

@RobRukavina

An idea:

For global.IS_REACT_ACT_ENVIRONMENT = false;, it can be a beforeAll ordering issue. Testing library uses beforeAll too so you need to make sure your beforeAll runs after testing library's.

You can make sure your beforeAll runs later by importing testing library. e.g.

// make sure you import it here
import '@testing-library/react';

beforeAll(() => {
  global.IS_REACT_ACT_ENVIRONMENT = false;
});

Thank you. I have changed the test so that I don't need to do this currently, but if I end up having to revert I will try this 😄

[RobRukavina]

@anilanar thank you, just tested this solution and it worked!
#1108 (comment)

[Lokua]

The idea above does not work for me. Also, setting global.IS_REACT_ACT_ENVIRONMENT = false results in Warning: The current testing environment is not configured to support act(...), however my tests are still passing.

[anilanar]

@Lokua Because you are not supposed to use act when IS_REACT_ACT_ENVIRONMENT is falsy. That warning is logged when you use act and react detects that IS_REACT_ACT_ENVIRONMENT is not true.