Тестирование приложений React.js с помощью Jest и библиотеки тестирования React: подробное руководство

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

Настройка среды тестирования

Приложение Create React поставляется с предварительно настроенным Jest. Если вы не используете приложение Create React, вы можете установить Jest вручную.

npm install --save-dev jest

Вам также необходимо установить библиотеку тестирования React.

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

Написание вашего первого теста

Давайте напишем тест для простого компонента приветствия.

import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

Мы будем использовать функцию render библиотеки тестирования React для рендеринга компонента и screen для запроса визуализированного вывода.

import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

test('renders a greeting', () => {
  render(<Greeting name="John" />);
  const greetingElement = screen.getByText(/hello, john/i);
  expect(greetingElement).toBeInTheDocument();
});

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

Вы можете запустить свои тесты с помощью команды jest.

npx jest

Тестирование взаимодействия с пользователем

Библиотека тестирования React предоставляет несколько функций для имитации взаимодействия с пользователем. Давайте напишем тест для кнопки, которая увеличивает счетчик.

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments counter', () => {
  render(<Counter />);
  const button = screen.getByText('Increment');
  fireEvent.click(button);
  const counter = screen.getByText('Count: 1');
  expect(counter).toBeInTheDocument();
});

Заключение

Тестирование — важнейший аспект разработки программного обеспечения, обеспечивающий правильность вашего кода. С библиотекой тестирования Jest и React тестирование приложений React.js становится проще и приятнее.

В следующем посте мы рассмотрим, как интегрировать сторонние библиотеки в ваше приложение React.js. А пока удачного кодирования!