为什么react钩子在与fetch api一起使用时抛出动作错误？

Question

每当我提出API请求并更新状态时，我都会在我的测试套件中获取Warning: An update to App inside a test was not wrapped in act(...).。

我在利用反应测试库。我还尝试使用ReactDOM测试工具，得到了相同的结果。我尝试过的另一件事是用act包装容器，结果仍然一样。

请注意:我的应用程序工作，我的测试通过。我只需要知道我做错了什么，或者是否是react dom包中的错误导致了错误的出现。而嘲笑控制台错误并将其静音是不好的。

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);
});

下面是钩子实现：

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)]);

Answer 1

这是一个已知的问题，请查看Github https://github.com/kentcdodds/react-testing-library/issues/281中的这个问题

Answer 2

对于像我这样在一年多后偶然发现这个问题的人来说，乔治提到的问题已经解决了，wait已经被waitFor取代了，如下文所述：

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

既然如此，我相信现在解决警告的方法应该是这样的：

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);
    );
});

在我的例子中，我有一个App组件异步地在一个useEffect钩子中加载数据，所以我在每个测试中都得到了这个警告，使用beforeEach来呈现App。这是我的案子的具体解决方案：

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

Answer 3

要消除act()警告，您需要确保您的承诺同步解析。您可以阅读这里如何做到这一点。

摘要：

这方面的解决方案涉及到以下几个方面：

• 我们在全球范围内以一种能够“立即”解决承诺的实现来填充承诺，例如承诺
• 使用定制的babel设置(如此回购中的设置)传输您的javascript
• 使用jest.runAllTimers()；这现在也将刷新承诺任务队列