unmount timing leads to "test was not wrapped in act"

[artola]

• @testing-library/react version: 12.1.2 (but even found in v11)
• Testing Framework and version: jest 27 (but even found in v26)
• DOM Environment: 16.7.0

Relevant code or config:

import React, {useEffect, useRef, useState} from 'react';

import {render} from '@testing-library/react';

const MyComponent = () => {
  const [, setValue] = useState(0);
  const mountedRef = useRef(true);

  useEffect(() => {
    Promise.resolve().then(() => {
      if (mountedRef.current) {
        setValue(1);
      }
    });

    return () => {
      mountedRef.current = false;
    };
  }, []);

  return null;
};

describe('bug', () => {
  it('should not update state after unmounted', () => {
    render(<MyComponent />);
  });
});

What you did:

Run the test and see the console warning.

What happened:

console.error
    Warning: An update to MyComponent inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act

Problem description:

The test run, but a warning is printed in the console. If we use the unmount inside the it, then there is no such warning.
Running the unmount inside the test should not be needed as it runs in the afterEach => cleanup => unmount (see api doc).

See the cleanup is added to afterEach on jest and triggered, but seems "later" that if call it inside the same test.

react-testing-library/src/index.js

Line 13 in 8f17a2b

cleanup()

no warning:

  it('should not update state after unmounted', () => {
    render(<MyComponent />);

    cleanup();
  });

[artola]

@kentcdodds What do you think about this problem, is it a Jest/Mocha (both fail) problem?

[kentcdodds]

In this case, you should run the cleanup manually (or call unmount) not just to avoid this warning, but to assert that it functions properly on unmount because you have logic for unmount.

[artola]

In this case, you should run the cleanup manually (or call unmount) not just to avoid this warning, but to assert that it functions properly on unmount because you have logic for unmount.

Right, if we run unmount or cleanup inside the test case we can not see the warning. But the example above is just a simplified version, usually we will use a hook useIsMounted that is already tested, therefore we can trust in such implementation an do not retest on every single use.

Reading the code of this library I do not find anything that is not synchronous in the teardown. Is it right? or do you think that might be something in the implementation of Jest and Mocha?

[kentcdodds]

If you don't want to have to worry about a dependency in your test then you should mock the dependency. But I don't recommend that personally. You need to acknowledge the behavior of your component regardless of how well tested its dependencies are. But either way those are your choices. Either mock useIsMounted or call unmount if you're using it.

[artola]

@kentcdodds I found why there is a difference between running the unmount inside the test or relying in that one triggered in the cleanup. It is because the render is wrapped with act, otherwise the code above works as expected.

If we remove the act wrapping the render, then the component properly sets mountedRef.current = false before than evaluating it in if (mountedRef.current) {.

react-testing-library/src/pure.js

Line 59 in 8f17a2b

act(() => {

There is nothing wrong with the act, because there is no possibility to know what the component will do, might be it is just an unfortunate coincidence.

[kentcdodds]

Hmmm... I'm not sure what to do with that. Sorry :-/

[artola]

Hmmm... I'm not sure what to do with that. Sorry :-/

I am of the same opinion. It is not exactly clear what produces this problem, as the code here in RTL it seems OK.
In Formik we have a similar issue and we need to report it to React team.

I guess that we have some race condition with the scheduler.

[eps1lon]

Formik schedules updates from some microtask (e.g. Promise.resolve().then(() => setState(value))). Those updates are hard to wrap in act.

If I remember correctly, then you should wrap flusing of the microtask queue in act like so act(() => Promise.resolve().then(() => {}).then(() => {})).

If somebody as a cloneable, minimal repository I can check out specifically how to do it. But there's nothing at the API level we can do.