При написании тестов для компонентов React с помощью Vitest и Testing Library, следует тестировать следующие аспекты:

1. Рендеринг:

   Убедитесь, что компонент рендерится без ошибок и отображает необходимые элементы. Для этого можно использовать методы React testing library.

   test("renders MyComponent without errors", () => {
     render(<MyComponent />);
    
     expect(screen.getByTestId("my-component")).toBeInTheDocument();
   });

2. Состояние:

   Проверьте, что состояние компонента изменяется правильно в результате пользовательских действий, таких как нажатие на кнопки или ввод текста.

   test("updates state correctly on button click", () => {
     render(<MyComponent />);
     const button = screen.getByRole("button");
     fireEvent.click(button);
    
     expect(screen.getByTestId("counter-value")).toHaveTextContent("1");
   });

3. Свойства:

   Убедитесь, что компонент правильно реагирует на свойства, переданные ему из родительского компонента или из внешнего источника данных.

   test("renders component with correct prop values", () => {
     const propValue = "Test";
     render(<MyComponent prop={propValue} />);
    
     expect(screen.getByTestId("my-component")).toHaveAttribute(
       "prop",
       propValue,
     );
   });

4. Взаимодействие:

   Проверьте, что компонент правильно взаимодействует с другими компонентами или сервисами, с которыми он взаимодействует, например, отправляет правильные запросы на сервер. Для этого можно использовать mock-функции для имитации взаимодействия с другими компонентами или сервисами.

   test("calls the correct function on button click", () => {
     render(<MyComponent onClick={mockFunction} />);
     const button = screen.getByRole("button");
     fireEvent.click(button);
    
     expect(mockFunction).toHaveBeenCalled();
   });

   Для тестирования запросов к API можно использовать библиотеку axios-mock-adapter.

   Пример использования

5. Обработка ошибок:

   Убедитесь, что компонент обрабатывает ошибки правильно и выводит соответствующие сообщения об ошибке.

   test("displays error message correctly", () => {
     const errorMessage = "Error occurred";
     render(<MyComponent />);
     setErrorCondition(true);
    
     expect(screen.getByTestId("error-message")).toHaveTextContent(
       errorMessage,
     );
   });

Покрытие кода тестами (Code coverage) §

Code coverage - это одна из метрик оценки качества тестирования, представляющая из себя плотность покрытия тестами требований либо исполняемого кода.

Для проверки Code Coverage нужно запустить команду:

yarn coverage