reactjs - 为什么 React hook 与 fetch api 一起使用时会抛出 act 错误？

Question

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

我正在使用react-testing-library。我也尝试使用 ReactDOM test utils，得到了相同的结果。我尝试的另一件事是将容器包装在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);
});

这是钩子(Hook)实现:

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