Переход от кармы к шутке

Отказ от ответственности: в этой статье описывается моя конкретная миграция. Это ни в коем случае не универсальное руководство по миграции.

Зачем тестировать и почему Jest?

Jest — это тестовая платформа, созданная Facebook, которая гордится тестированием Javascript с нулевой конфигурацией. Изначально это то, что делает Jest привлекательным. Приложения с достаточным тестовым покрытием дают разработчикам больше уверенности, когда приходит время выпускать изменения. Имея это в виду, упрощение разработки тестов увеличивает шансы того, что разработчики, работающие над вашим приложением, напишут осмысленные утверждения.

Причина, по которой я решил перейти с Karma на Jest, в основном заключается в тестировании моментальных снимков. Снимки позволяют протестировать обновленные компоненты React в сравнении с предыдущей версией этого компонента. Если тесты пройдены, это означает, что ваши обновления отображают компонент так же, как он отображался при создании моментального снимка. И наоборот, если внесенные вами изменения предназначались для изменения способа визуализации компонента, вы можете обновить снимок, чтобы отразить это; все будущие тесты будут сравниваться с новым снимком. (Снимок — единственный источник правды. Множественные снимки не сохраняются. Только самые последние.)

Более подробную информацию можно найти здесь: https://facebook.github.io/jest/

Установка

Чтобы установить Jest с Yarn, выполните следующую команду:

yarn add --dev jest

Чтобы установить с помощью NPM, запустите это:

npm install --save-dev jest

Конкретное переносимое приложение использует Babel для переноса кода ES6/React, поэтому Также необходимы Babel-Jest и несколько плагинов для трансформации. Требуемые преобразования: transform-decorators-legacy, transform-es2015-modules-commonjs и transform-class -свойства.

Для их установки используйте:

yarn add --dev babel-env babel-jest babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties babel-plugin-transform-es2015-modules-commonjs

Вавилон

По умолчанию Jest будет использовать настройки в вашем .babelrc, но будут использовать только настройки, определенные в «тестовая» среда (Jest автоматически устанавливает NODE_ENV в «тестовую»). Этот раздел был добавлен, чтобы порадовать Jest:

Теперь нам нужно указать Jest использовать Babel-Jest для преобразования наших файлов «.js»:

// package.json
"transform": {
"^.+\\.js$": "babel-jest"
},

Убийство чая утверждений

Чтобы облегчить перенос существующего теста на платформу Jest, Jest-CodeModsпредоставляет простую команду линейный интерфейс, помогающий преобразовать ваши файлы **/*.spec.js (или test.js) в правильный формат.

Примечание. Команда `jest-codemods` ожидает, что вы уже зафиксировали все незавершенные изменения git перед запуском преобразований.

Следуйте инструкциям на Jest-CodeMods Github, чтобы начать.

Особый случай: псевдоним Webpack

До этой миграции параметры конфигурации приложения хранились в файле конфигурации YAML в корневой папке. Webpack проанализировал этот файл при сборке и загрузил его как внешний. Jest было трудно понять это (без дополнительной настройки), поэтому я решил вместо этого загрузить конфигурацию как Псевдоним Webpack. Файлы были перемещены из файла YAML в файл JS с помощью экспорта CommonJS.

// config.dev.js
module.exports = {
  // app settings go here
}

Это было добавлено в конфигурацию Webpack (символ $ указывает, что это точный путь):

// webpack.dev.config.js
resolve: {
  alias: {
    config$: path.resolve(__dirname, 'config/config.dev.js')}
}

А вот как был получен доступ к конфигу в приложении:

// test.js
import Config from 'config';

Наконец, мы должны включить настройки в наш .babelrc, которые сообщат Jest, как разрешить наш новый псевдоним:

Установите этот пакет:

yarn add -D babel-plugin-module-resolver

Потом:

// .babelrc
["module-resolver",{
    "root": ["./app"],
    "alias": {"appConfig": "./config/appConfig.test.js"}
}]

Заканчивать

Последним шагом был просто запуск тестов. Все тесты в этом приложении находились в папке src, поэтому я добавил тестовый скрипт в package.json:

"test": "jest src/**/*.spec.js"

Большая часть рутинной работы по преобразованию тестов была выполнена с помощью Jest-CodeMods, но по-прежнему требовалось немного ручной работы для удаления Sinon в пользу функций Jest. Как только вы пройдете все тесты, вы готовы к работе. Удачного тестирования!