如何使用react-query、msw和react-testing-library测试组件？

Question

我有一个页面，其中加载了一个下拉组件。该组件调用一个自定义钩子，使用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之前，一切都运行得很顺利，所以我想我可能忽略了某些东西。

谢谢！

- Michael

---

你的模拟数据返回一个带有超时的 Promise？你尝试使用 react-testing-library 中的 findByText（将等待 DOM 元素）吗？像这样：expect(await screen.findByText('select-data')).toBeInTheDocument(); - AdriSolid

谢谢，这真的解决了！我还以为是一些愚蠢的错误！！ - Michael

很好！刚刚发布了答案！ - AdriSolid

Answer 1

尝试使用 findByText（会等待DOM元素，返回一个Promise）

expect(await screen.findByText('select-data')).toBeInTheDocument();

- AdriSolid