При написании тестов для компонентов 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