React-testing-library: Test was not wrapped in act(...)

[jerguslejko]

• react-testing-library version: 9.3.0
• react version: 16.11.0
• node version: 12.12.0
• yarn version: 1.19.1

Relevant code or config:

// utils.ts

const Wrapper = ({ children }: { children: ReactNode }): ReactNode => {
    return <HashRouter>{children}</HashRouter>;
};

const customRender = (ui: ReactElement, options: Record<string, any> = {}) =>
    render(ui, { wrapper: Wrapper as any, ...options })

// component.tsx

const [state, setState] = useState([]);

const fetch = () => {
    axios.get('/api/endpoint').then(response => {
        setState(response);
    });
};

useEffect(() => {
    fetch();
}, []);

// component.test.tsx

import { render } from './utils';

render(<MyComponent />);

What you did:

Trying to write a simple test

What happened:

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 */

Problem description:

When using the render function provided by react-testing-library, the error provided above is thrown when I run tests.

Suggested solution:

If I wrap the render function provided by react-testing-library in act(), everything works as expected. Apart from the fact that now I can't do const { getByLabelText } = act(() => { render(...) })

[lourenci]

Do you have a repo with your test code? I think you should waitForElement to be rendered before your expectation. Probably, your testing is ending without the state be flushed.

[shihKaiHung]

I got the same problem.

[kentcdodds]

Checkout the appendix on this post: https://kentcdodds.com/blog/write-fewer-longer-tests

That's definitely the issue for @jerguslejko and most likely the problem for @shihKaiHung. If you have further questions, please create a reproduction of your issue on CodeSandbox and open a chat on https://spectrum.chat/testing-library/help-react

[jaxxreal]

I ran into the same issue but found a solution here https://github.com/facebook/react/issues/15379#issuecomment-482101020

[kentcdodds]

I've written about this in greater detail (with videos) here: https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning

[vertic4l]

@kentcdodds do you have any advice when using yup as validator? as soon as the value of the input / textarea gets changed the warning appears, see: https://github.com/react-hook-form/react-hook-form/discussions/3641