Блог

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

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