如何解决如何使用带有 msw 和 react-testing-library 的 react-query 测试组件?
我有一个页面,其中加载了一个下拉组件。该组件调用一个自定义钩子,该钩子使用反应查询来获取要显示在下拉列表中的数据。 在初始加载时,此组件处于 加载 状态并呈现加载图标。 当 react-query 成功完成调用时,组件会将数据列表呈现到下拉列表中。
const SelectItem = ({ handleSelectChange,selectedItem }) => {
const { data,status } = useGetData(url,'myQueryKey');
if (status === 'loading') {
return <RenderSkeleton />;
}
if (status === 'error') {
return 'An Error has occured';
}
return (
<>
<Autocomplete
options={data}
getoptionLabel={(option) => `${option.name}`}
value={selectedItem}
onChange={(event,newValue) => {
handleSelectChange(newValue);
}}
data-testid="select-data"
renderInput={(params) => <TextField {...params}" />}
/>
</>
);
};
我如何正确测试? 即使在实现 msw 来模拟响应数据之后,我的测试也只呈现 Skeleton 组件。所以我假设它基本上只等待“isLoading”状态。
it('should load A SelectBox data',async () => {
render(
<QueryClientProvider client={queryClient}>
<SelectItem />
</QueryClientProvider>
);
expect(await screen.getByTestId('select-data')).toBeInTheDocument()
});
请注意,我还实现了 msw 模拟服务器和处理程序来模拟它应该返回的数据。 顺便说一句,在使用 react query 之前,它就像一个魅力,所以我想我正在监督一些事情。
谢谢!
解决方法
尝试使用 findByText
(将等待 DOM 元素,返回 Promise
)
expect(await screen.findByText('select-data')).toBeInTheDocument();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。