Как тестировать компоненты с помощью response-query с msw и react-testing-library?

Question

У меня есть страница с загружаемым в нее раскрывающимся компонентом. Этот компонент вызывает customhook, который использует ответный запрос, чтобы получить данные для отображения в раскрывающемся списке. При начальной загрузке этот компонент находится в состоянии загрузки и отображает значок загрузки. Когда response-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 для имитации данных ответа. Поэтому я предполагаю, что в основном он ожидает только состояния isLoading.

      it('should load A Selectbox data', async () => {
  render(
    <QueryClientProvider client={queryClient}>
      <SelectItem />
    </QueryClientProvider>
  );
  expect(await screen.getByTestId('select-data')).toBeInTheDocument()
});

Обратите внимание, что я также реализовал макет сервера и обработчики msw, чтобы имитировать данные, которые он должен возвращать. Кстати, прежде чем использовать ответный запрос. Это сработало как шарм, поэтому я думаю, что я что-то наблюдаю.

Спасибо!

Answer 1

Попробуйте использовать findByText (будет ждать элемент DOM, возвращая Promise)

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