В этой статье мы собираемся взглянуть на замечательный инструмент тестирования Jest и на возможность использования React и Enzyme с ним.
В первую очередь мы должны выяснить: почему мы выбрали Jest. Этот инструмент тестирования обладает набором мощных фич "из коробки" (снепшоты, оценка покрытия, хелперы на проверку соответствия результатов и асинхронное тестирование) которые очень необходимы для маленьких и средних проектов на старте. Большая вариативность фич позволяет нам обладать меньшим количеством зависимостей. На сегодняшний день, это может быть одним из важных аргументов для фронтенд разработки, т.к. проекты, основанные на React содержат около дюжины зависимостей от транспайлеров (если вы используете ES6) и Redux.
Jest
Для установки Jest и пары зависимостей вам необходимо выполнить простую команду:
npm install --save-dev jest babel-jest identity-obj-proxy
и добавить следующие настройки в package.json
"jest": {
"transform": {
"^.+\\.(jsx|js)?$": "<rootDir>/node_modules/babel-jest"
},
"moduleNameMapper": {
"\\.css$": "identity-obj-proxy"
},
"collectCoverageFrom": [
"**/*.component.{js,jsx}",
"!**/node_modules/**"
],
"coverageReporters": [
"text-summary"
]
}
Пакет babel-jest опционален. Нам необходимо им воспользоваться, если мы используем ES6 в наших тестах.
Давайте взглянем на каждую секцию поподробнее:
- В разделе transform вы можете указать свой скрипт для трансформации или (как мы сделали в этой статье) уже созданный скрипт для поддержки синтаксиса ES6.
- moduleNameMapper может быть полезен, если вы используете CSS Modules в вашем проекте для инкапсуляции стилей в ваших компонентах.
- collectCoverageFrom и coverageReports конфигурируют наши настройки покрытия тестами. Если вы выполните jest --coverage, вы увидите результат этой настройки после выполнения всех тестов.
Enzyme
Просто выполните:
npm install --save-dev enzyme
чтобы иметь возможность разрабатывать тесты с enzyme!
Давайте взглянем на пример ниже:
import React from 'react';
import { mount } from 'enzyme';
import ExampleComponent from './example.component';
describe('ExampleComponent', () => {
test('renders correctly and contains child', () => {
const renderedComponent = mount(
<ExampleComponent>
<div className='child'></div>
</ExampleComponent>
);
expect(renderedComponent).toMatchSnapshot();
});
});
Я использовал метод mount в этом примере лишь для имитации полного рендеринга DOM, но вы можете использовать render или shallow в зависимости от ваших целей.
В этом тесте мы используем снепшоты, о которых я говорил ранее. Благодаря им мы можем очень точно выяснить что именно изменилось в DOM у компоненты и исправить проблему или исполнить jest --updateSnapshots для обновления старых снепшотов.
Заключение
Две команды в консоли, один блок настроек в package.json и… это все. Ваш проект готов для разработки тестов для ваших компонент! Конечно, проекты в реальной жизни могут использовать redux или другие контейнеры состояний и тесты могут быть немного более запутанными, но это уже другая история ;-)