如何包装到 act(...) 秒/延迟/异步渲染答案

【问题标题】：How to wrap into act(...) second/deferred/async rendering如何包装到 act(...) 秒/延迟/异步渲染
【发布时间】：2020-10-04 15:49:23
【问题描述】：

我有以下组件：

function MyComp(props) {
    const [items, setItems] = useState([]);

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

    async function loadItems() {
        const result = await axios.get(`https://example.com/api`);
        setItems(result.data);
    }

    return (<div>{items.map(item => ...)}</div>);
}

这个测试会产生行为警告：

const items = { "data": [{"id": 1, "title": "Title1"}] };
axios.get.mockImplementationOnce(() => Promise.resolve(items)); 
const wrapper = mount(<MyComp />);

警告：测试中对 MyComp 的更新未包含在 act(...) 中。

据我了解，这是因为第二次更新获取的项目。如何解决这个问题？

编辑：这有帮助

let wrapper = null;
await act(async () => {
    wrapper = mount(<MyComp />);
});

【问题讨论】：

标签： reactjs jestjs enzyme

【解决方案1】：

你试过了吗？

    import { act } from 'react-dom/test-utils';

//...
    
        let wrapper = null;
        act(() => {
          wrapper = mount(<MyComp />);
        });

编辑：在这里你可以找到更多信息https://reactjs.org/docs/testing-recipes.html#act

【讨论】：

谢谢，就我而言，我还需要 async 和 await。

【解决方案2】：

在断言结果之前需要等待承诺。可以通过存储对Promise.resolve(items) 的引用或从间谍获取它来获得它：

...
const wrapper = mount(<MyComp />);
expect(axios.get).toBeCalledTimes(1);
await axios.get.mock.results[0];
// assert the result

【讨论】：

这是一个好点，但它并不能解决act(...) 警告的问题。这个警告可能来自设置状态被延迟的事实吗？