Почему вы хотите это сделать?

Одним из моих первых проектов на JavaScript до того, как я ухватился за стек React/Node/Express, была карточная игра под названием HEIST. Все это интерфейс, с множеством манипуляций с DOM jQuery и объектом состояния, который управляет всем этим (было бы неплохо иметь React, а?). Достаточно, чтобы отслеживать, что я хотел написать несколько тестов, чтобы я через шесть месяцев не сломал все, когда он неизбежно пойдет на рефакторинг или добавление в игру и забудет, как это работает.

Чтобы было еще веселее, это было даже не приложение Node, поэтому я хотел запускать свои тесты в браузере, не выполняя npm init или npm install что-либо локально. Привет, QUnit!

Настроить QUnit и начать писать тесты было предельно просто. Локальные тесты прошли без проблем, все прошли, а так все хорошо.

Пока я не захотел их автоматизировать.

Настройка Трэвиса

Я использовал TravisCI, у которого есть много возможностей. Это бесплатно. Его легко настроить — вы можете просто указать его в репозитории GitHub, и он будет запускать ваши тесты каждый раз, когда вы отправляете изменения. И, самое главное, это дает вам эту милую маленькую [сборку | прохождение], чтобы поместить его поверх файла README.

Настройка QUnit с Travis была не самым обременительным процессом, хотя мне пришлось немного повозиться, потому что я не использовал Node и NPM локально. Я только что настроил package.json, и Трэвис предварительно установил соответствующие модули.

Каковы соответствующие модули? Мы будем использовать Grunt из-за этого потока StackOverflow (хотя вы, безусловно, можете использовать Gulp или вообще обойтись без дополнительного средства запуска задач).

Вот что нам нужно настроить в нашем package.json:

“devDependencies”: {
 “grunt”: “^1.0.1”,
 “grunt-contrib-qunit”: “^1.3.0”

а вот наш .travis.yml, куда мы помещаем наши настройки и хуки жизненного цикла. Здесь мы устанавливаем Node и наши зависимости для разработчиков.

language: node_js
node_js:
 — “6”
install: npm install

Наконец, нам понадобится Gruntfile.js, чтобы Grunt мог указать QUnit на HTML, который мы хотим протестировать:

module.exports = function (grunt) {
 // Project configuration.
 grunt.initConfig({
 qunit: {
   files: ["path/to/your/file.html"]
 }
 });
// Load plugin
 grunt.loadNpmTasks(“grunt-contrib-qunit”);
// Task to run tests
 grunt.registerTask(“test”, “qunit”);
};

Сладкий! Мы должны быть в порядке, верно?

Ладно, ВТФ? Наши тесты отлично работали в локальном браузере. Почему они терпят неудачу сейчас?

Как заставить это работать с ES6

После сообщения об ошибке я взглянул на первую строку моего файла test.js. Это было простое утверждение «привет» из очень четких инструкций по настройке QUnit. Не должно быть проблем, верно?

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

И, судя по беглому гуглю, вероятно, никогда и не будет.

Итак, у нас есть несколько вариантов:

  1. Запустите Chrome в безголовом режиме с Трэвисом. Это дополнительный шаг для установки, и иногда он не запускается из-за постоянной проблемы с разрешениями и песочницей. Мы могли бы решить эту проблему, но PhantomJS установлен по умолчанию в среде Travis, поэтому я просто решил придерживаться его.
  2. Перепишите наши тесты (и весь JS в нашем проекте) на ES5. Если бы это были просто тесты, это могло бы быть хорошо, пока они не полагаются на промисы или любые другие функции ES6-y. Однако, поскольку вся моя игра была на ES6, это было невозможно.
  3. Установите Babel и транспилируйте наш JS в ES5, прежде чем мы запустим наши тесты. Это то, что я в итоге сделал.

Давайте добавим babel-cli и babel-preset-env в наши зависимости разработки и поместим файл .babelrc в корневой каталог. Это выглядит так:

{
  "presets": [
    "env"
  ]
}

¯\_(ツ)_/¯

Теперь все, что нам нужно сделать, это добавить строку в Travis .yml, которая запустит Babel для наших JS-файлов и выгрузит результаты в другой каталог.

before_script: babel test -d build

Сладкий. Не забудьте изменить теги сценария в вашем HTML, чтобы они указывали на ваши новые файлы.

Эй, так лучше!

Это не новаторство или что-то в этом роде, но другие ответы, которые я нашел, были либо более сложными, чем эта установка, либо не решали проблему Phantom/ES6. Надеюсь, это сэкономит вам время! Если вы хотите увидеть конечный результат, он находится в HEIST github repo.