Question

我正在尝试将一个小示例从使用shouldComponentUpdate过渡到使用React钩子。我还想在Jest中编写一些单元测试，这就是我在努力的地方。

注意：我已经看到了一些现有的问题/答案，并且不不想使用setTimeout进行测试。

我目前拥有的代码如下所示，首先是组件：

export default function HelloStarWars(props) {
    const data = useFetch(`https://swapi.co/api/people/${props.id}`);
    const { name } = data;

    return (
        <h1>Hello {name || "..."}!</h1>
    );
}

其中useFetch的定义如下：

import { useState, useEffect } from "react";

export default function useFetch(url) {
    const [data, setData] = useState({});

    async function getData() {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
    }

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

    return data;
}

现在我正在苦苦挣扎的实际位置是，我无法确定如何转换这些代码。从本质上讲，我不再具有componentDidMount()的{{1}}函数-那么我要等什么以确保已检索到数据？

await

我知道的一个选择是，我可以监视describe("ComponentDidMount", () => { beforeEach(() => { fetch.resetMocks(); }); it("Obtains result and sets data correctly", async () => { const wrapper = await mount(<HelloStarWars id="1" />); const instance = wrapper.instance(); fetch.mockResponseOnce(JSON.stringify({ name: 'Jedi Master' })); await instance.componentDidMount(); wrapper.update(); expect(wrapper).toMatchSnapshot(); }); });并模拟返回结果。如果需要，我会这样做，但是目前，我喜欢我正在使用的useFetch库及其提供的功能。

我该如何在Jest中等待React Hook？

0 个答案: