Why does react hook throw the act error when used with fetch api?

Question

I keep getting Warning: An update to App inside a test was not wrapped in act(...). in my test suite whenever I make an API request and update the state.

I'm making use of react-testing-library. I also tried using ReactDOM test utils, got the same result. One other thing I tried was wrapping the container in act, still got the same result.

Please note that: My App works and my test passes. I just need to know what I was doing wrong or if it's a bug in the react-dom package that's making that error show up. And it's bad to mock the console error and mute it.

global.fetch = require('jest-fetch-mock');

it('should clear select content item', async () => {
    fetch.mockResponseOnce(JSON.stringify({ results: data }));

    const { container } = render(<App />);

    const content = container.querySelector('.content');

    await wait();

    expect(content.querySelectorAll('.content--item').length).toBe(2);
});

Here's the hook implementation:

const [data, setData] = useState([]);
const [error, setError] = useState('');

const fetchInitData = async () => {
    try {
        const res = await fetch(API_URL);
        const data = await res.json();

        if (data.fault) {
            setError('Rate limit Exceeded');
        } else {
            setData(data.results);
        }
    } catch(e) {
        setError(e.message);
    }
};

useEffect(() => {
    fetchInitData();
}, [isEqual(data)]);

Yeah, it is. Lemme add that it's working and my test passes. It only issue is the annoying errors — Ademola Adegbuyi, Feb 18 '19 at 14:11

score 8 · Accepted Answer · answered Feb 18 '19 at 14:32

8

It's a known problem, check this issue in Github https://github.com/kentcdodds/react-testing-library/issues/281

answered Feb 18 '19 at 14:32

Gio Polvara

23,416
10
66
62

score 5 · Answer 2 · answered Nov 15 '20 at 18:11

For anyone who stumbles upon this more than a year later as I did, the issue Giorgio mentions has since been resolved, and wait has since been replaced with waitFor, as documented here:

https://testing-library.com/docs/dom-testing-library/api-async/

That being the case, I believe the solution to the warning now should be something like this:

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

it('should clear select content item', async () => {
    fetch.mockResponseOnce(JSON.stringify({ results: data }));

    const { container } = render(<App />);

    const content = container.querySelector('.content');

    await waitFor(() =>
        expect(content.querySelectorAll('.content--item').length).toBe(2);
    );
});

In my case, I had an App component loading data asynchronously in a useEffect hook, and so I was getting this warning on every single test, using beforeEach to render App. This was the specific solution for my case:

  beforeEach(async () => {
    await waitFor(() => render(<App />));
  });

score 2 · Answer 3 · answered Mar 04 '19 at 12:40

To get rid of the act() warning you need to make sure your promises resolve synchronously. You can read here how to do this.

Summary:

The solution for this is a bit involved:

we polyfill Promise globally with an implementation that can resolve promises 'immediately', such as promise

transpile your javascript with a custom babel setup like the one in this repo

use jest.runAllTimers(); this will also now flush the promise task queue

score 0 · Answer 4 · answered Sep 17 '19 at 07:31

I had this problem and gave up using wait and async instead used jest faketimers and so on, so your code should be something like this.

global.fetch = require('jest-fetch-mock');

it('should clear select content item', /*async */ () => {
    jest.useFakeTimers();
    fetch.mockResponseOnce(JSON.stringify({ results: data }));

    const { container } = render(<App />);

    const content = container.querySelector('.content');

    // await wait();
    act(() => {
      jest.runAllTimers();
    });

    expect(content.querySelectorAll('.content--item').length).toBe(2);
});

Why does react hook throw the act error when used with fetch api?

4 Answers4

Linked