Тестирование приложений React.js: подробное руководство

Тестирование является важной частью процесса разработки программного обеспечения. Хорошо написанные тесты обеспечивают уверенность в том, что ваше приложение работает так, как задумано. В этом руководстве мы обсудим стратегии тестирования приложений React.js.

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

Приложения React.js часто тестируются с использованием комбинации тестовых библиотек. Jest — популярная среда тестирования, а Enzyme или React Testing Library обычно используются для предоставления дополнительных утилит тестирования.

Установите Jest с помощью npm:

npm install --save-dev jest

Вы также можете установить Enzyme или React Testing Library:

npm install --save-dev enzyme enzyme-adapter-react-16
npm install --save-dev @testing-library/react

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

Вот пример простого теста Jest для компонента React:

import React from 'react';
import { shallow } from 'enzyme';
import App from './App';

test('renders learn react link', () => {
  const wrapper = shallow(<App />);
  expect(wrapper.find('.App-link').text()).toBe('Learn React');
});

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

Вы можете имитировать взаимодействие пользователя с вашими компонентами. Вот пример теста на нажатие кнопки:

import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

test('button click changes state', () => {
  const wrapper = shallow(<Button />);
  wrapper.find('button').simulate('click');
  expect(wrapper.state('wasClicked')).toBe(true);
});

Тестирование моментальных снимков

Моментальные тесты позволяют убедиться, что ваш пользовательский интерфейс не изменится неожиданно. Тест моментального снимка фиксирует визуализированный вывод компонента и сохраняет его в файл. Затем этот файл используется в качестве эталона для будущих тестов.

import React from 'react';
import renderer from 'react-test-renderer';
import Link from '../Link.react';

test('Link changes the class when hovered', () => {
  const component = renderer.create(
    <Link page="http://www.facebook.com">Facebook</Link>,
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

Заключение

Тестирование — обширная область, и это руководство охватывает только основы. Вы можете написать множество других типов тестов, таких как интеграционные тесты, сквозные тесты и тесты производительности. Но даже базовый набор модульных тестов может помочь предотвратить ошибки в вашем приложении.

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