Тестирование компонентов с Jest и React Testing Library

Для начала тестирования компонентов с использованием Jest и React Testing Library необходимо настроить и установить Jest. Вот шаги для установки и конфигурации, а также написания базовых тестов для компонентов:

Установка зависимостей:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

Настройка Jest:

Добавьте или обновите ваш файл package.json, чтобы указать Jest как ваш тестовый фреймворк:

"scripts": {
  "test": "jest"
},
"jest": {
  "preset": "@testing-library/react"
}

Написание базовых тестов:

Допустим, у вас есть простой компонент Button, который отображает кнопку с заданным текстом. Вот пример компонента и его теста:

// Button.js
import React from 'react';

const Button = ({ onClick, text }) => {
  return <button onClick={onClick}>{text}</button>;
};

export default Button;

// Button.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders button with provided text', () => {
  const buttonText = 'Click me';
  const { getByText } = render(<Button onClick={() => {}} text={buttonText} />);
  expect(getByText(buttonText)).toBeInTheDocument();
});

test('calls onClick handler when button is clicked', () => {
  const onClickMock = jest.fn();
  const buttonText = 'Click me';
  const { getByText } = render(<Button onClick={onClickMock} text={buttonText} />);
  const button = getByText(buttonText);
  fireEvent.click(button);
  expect(onClickMock).toHaveBeenCalledTimes(1);
});

Запуск тестов:

Вы можете запустить тесты с помощью команды npm test. Jest автоматически найдет и выполнит все файлы с расширением .test.js или .spec.js.

Результаты тестов:

Jest и React Testing Library будут выполнять ваш код и проверять ожидаемые результаты. В случае успешного выполнения тестов вы увидите сообщение о пройденных тестах, а в противном случае - сообщения об ошибках и ожидаемых значениях.

Написание базовых тестов помогает обеспечить качество вашего кода и предотвратить возможные ошибки при разработке веб-приложений на React.