Как настроить Jest & Enzyme в существующем приложении React за 5 минут

Предполагается, что вы используете Facebook Create React App Boilerplate.

Шутка

Jest - это средство запуска тестов на основе JavaScript, которое позволяет выполнять тесты быстро и параллельно. Jest также позволяет запускать тесты в режиме просмотра, поэтому при изменении файлов тесты будут запускаться немедленно по мере разработки. Он также генерирует отчеты о покрытии кода, которые помогают понять процент покрытия тестами.

Тестирование снимков - еще одно отличное дополнение к Jest. Моментальное тестирование, как следует из названия, - это функция, которая позволяет тестировать компоненты, делая снимок того, как компонент должен выглядеть внутренне после его рендеринга.

Фермент

Enzyme - это утилита для тестирования JavaScript для React, которая упрощает тестирование вывода ваших компонентов React. Вы также можете манипулировать, перемещаться и некоторым образом моделировать время выполнения с учетом выходных данных.

Настройка и установка

В терминале или командной строке установите следующие зависимости в существующий проект create-react-app.

npm install enzyme enzyme-adapter-react-16 enzyme-to-json --save-dev

или используя yarn

yarn add enzyme enzyme-adapter-react-16 react-test-renderer enzyme-to-json --dev

Примечание. нам не нужно устанавливать Jest, поскольку CRA входит в состав Jest "из коробки".

Конфигурация

Затем давайте настроим Jest & Enzyme для совместной работы с React.

В каталоге src/ создайте новый файл с именем setupTests.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

В файле package.json добавьте следующую конфигурацию Jest:

"jest": {
  "snapshotSerializers": ["enzyme-to-json/serializer"],
  "collectCoverageFrom": ["src/**/*.js", "!src/index.js"],
  "coverageReporters": ["text"]
}

enzyme-to-json помогает сделать тесты моментальных снимков более удобочитаемыми и, добавляя его в snapshotSerializers, он автоматически применяется к каждому тесту моментальных снимков с помощью указанной выше конфигурации.

collectCoverageFrom указывает, для какого набора файлов следует собирать информацию о покрытии. В нашем случае мы ограничили запуск Jest для всех файлов с расширением .js, кроме src/index.js, поскольку обычно это просто шаблонный код, который не нужно тестировать.

coverageReporters указывает jest на вывод отчета о покрытии через терминал вместо создания html-страницы для отображения этих результатов. Разработчику гораздо проще проверить терминал, чтобы понять, где вы находитесь с точки зрения покрытия тестами.

Наш первый тест

Допустим, у нас есть компонент под названием Title.js

import React from 'react';
const Title = ({ children }) => (
  <h1>{children}</h1>
);
export default Title;

Чтобы создать наш первый тест, мы создадим новый файл с именем Title.test.js, он будет размещен рядом с Title.js файлом компонента.

import React from 'react';
import { shallow } from 'enzyme';
import Title from './Title';
const title = 'Test Title';
let wrapped = shallow(<Title>{title}</Title>);
describe('Title', () => {
  it('should render the Title Component correctly', () => {   
    expect(wrapped).toMatchSnapshot();
  });
  it('renders the Titles children', () => { 
    expect(wrapped.find('h1').text()).toEqual(title);
  });
});

Первый блок it создаст новый снимок компонента Title.

Второй блок it выполнит утверждение, чтобы проверить, равно ли значение в h1 переменной с именем title, в которой хранится «Заголовок теста». Если это правда, тест пройдёт.