相关疑难解决方法(0)

我已经建立了一个github项目，以了解如何更好地测试react（v 16.8.0）useEffect挂钩。我进行了一个api调用以在useEffect中获取数据，并将接收到的数据设置为状态组件元素。我的组件将查询作为道具接收，如果查询道具字符串不为空，则进行api调用。我想测试使用无空查询prop进行api调用，并且组件将其状态设置为正确。

我知道测试useEffect面临的问题是，与useEffect相关的效果不会阻止浏览器更新屏幕，因此在useEffect发挥作用之前，测试将结束。我从React文档中了解到，有来自react-test-utils的名为act的API，该API 被认为可以包装渲染组件的代码并对其执行更新。即使我尝试使用它，我的代码仍然会遇到相同的问题。

这是我要测试的组件：

const DisplayData = ({ query, onQueryChange }) => {
    const [data, setData] = useState({ hits: [] });

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios.get(
                `http://hn.algolia.com/api/v1/search?query=${query}`,
            );
            setData(result.data);
        };
        if (!!query) fetchData();
    }, [query]);

    return (
        <ul>
            {data.hits.map(item => (
                <li key={item.objectID}>
                    <a href={item.url}>{item.title}</a>
                </li>
            ))}
        </ul>
    );
};

这是我为此编写的测试：

it("should show new entries …