我想测试我的组件是否在从查询接收数据后呈现。
获取函数:
const fetchWeather = async (lat: number, lon: number) => {
const response = await fetch(`${OW_API_URL}forecast?lat=${lat}&lon=${lon}&${OWApiKey}`);
const weather= await response.json();
return weather;
};
组成部分:
const { data } = useQuery(
['weather'],
() => fetchWeather(latitude, longitude),
);
return (
<div>
{data ? (<p>Data recieved</p>) : (<p>Data's empty</p>)}
</div>
);
测试项目:
const queryClient = new QueryClient();
const componentProps = {
latitude: 50,
longitude: 50,
};
const wrapper = () => (
<QueryClientProvider client={queryClient}>
<Weather latitude={componentProps.latitude} longitude={componentProps.latitude} />
</QueryClientProvider>
);
const { result } = renderHook(() => fetchNextWeather(componentProps.latitude, componentProps.longitude), { wrapper });
await waitFor(() => result.current);
expect(result).toBe(true);
错误为:
- true"
+ "Object {
+ "current": null,
+ }"
为什么结果为空?可能的原因是什么?
我使用了一个测试钩子,错误也是这样,所以可能是关于如何调用数据的一些错误。
第一个
1条答案
按热度按时间6ie5vjzr1#
这里有两件事:
waitFor
只会等到函数不抛出。但是你的函数从来不会抛出,它只是在没有当前结果的情况下返回null
。你并没有在等待任何东西。您可以通过以下方式实现这一目标:
第一个
这永远不会通过,因为result将始终为
{ current: something }
,您可能希望Assert为