1. Бесполезный фон
2. Зачем мне это?
3. Хорошо, как я могу получить это?
4. конфигурация
5. Напишите несколько тестов
6. Запустите тесты!
7. Заключение
8. Рекомендации
9. бонус
10. Изменить, какой браузер будет работать в Travis
11. Настроить Трэвис

Эта статья научит вас, как настроить Karma для тестирования компонентов ReactJS. Первоначально он был размещен на Codementor Джастин Ву «s блог ,

Бесполезный фон

Около 8 месяцев назад я начал искать решения для тестирования компонентов React, но у меня не было хороших идей. Сначала я попробовал QUnit, который, кажется, работал нормально, но я хотел, чтобы он запускался автоматически. Я пробовал использовать qunit runner, например, как проект Ember.js для запуска тестов, но это оказалось слишком громоздким.

Я переключился на Karma для тестирования своих компонентов и потратил свое время на создание своих тестовых ресурсов и загрузку их в Karma, но это оказалось довольно медленным, потому что я никогда не кэшировал сборки и не запускал чистую сборку веб-пакетов для каждого пакета. Тьфу. Facebook выпустил Jest, и я переключился. Я думал, что это было здорово, но я быстро столкнулся с некоторыми проблемами:

1. Мне не нравится модуль, который заставляет вещи выглядеть как черные ящики
2. Я никогда не хотел / нуждался в черном боксе
3. Это было медленно
4. Он не установился на всех компьютерах моих коллег без проблем
5. Документация отсутствовала
6. Я должен был придумать хакерский способ позвонить с узла
7. Он не работал с io.js, когда я впервые попробовал
8. Я действительно не знал, как отлаживать свои тесты, кроме как по очень длинным трассам стека, и самое большое, что мне не понравилось, это
9. Это не работает в реальном браузере

Этот пост существует потому что:

1. Ребята, пишущие React-Router - это БОГИ
2. Любая другая запись в блоге о тестировании компонентов React, которую я видел, была очень сложной
3. Потому что эта установка - лучшая вещь, которую я нашел в React, начиная с чистого рендеринга.

Зачем мне это?

Когда тестирование и отладка с полными исходными картами были такими простыми?

Хорошо, как я могу получить это?

Монтаж

Зависимости, которые вам, вероятно, понадобятся:

• карма - настоящий бегун
• карма-кли - кли для кармы
• карма-мокко - для использования каркаса теста мокко с кармой
• karma-webpack - для использования webpack для фактической предварительной обработки кармы
• karma-sourcemap-loader - для загрузки исходных карт в карму
• karma-chrome-launcher - для запуска хрома
• ожидайте - удивительно хорошая библиотека утверждений Майкла Джексона (не путать с известным певцом / танцором)
• babel-loader - или какой-то загрузчик для ваших файлов JSX
• реагировать - ну, это то, что вы используете, верно?
• webpack - webpack, самый удивительный инструмент для сборки браузеров

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

Карма читает из файла karma.conf.js, поэтому давайте удостоверимся, что мы настроили его правильно.

karma.conf.js

var webpack = require ('webpack'); module.exports = function (config) {config.set ({browsers: ['Chrome'], // запускаем в Chrome singleRun: true, // просто запускаем один раз по умолчанию в рамках: ['mocha'], // используем файлы инфраструктуры тестирования mocha: ['tests.webpack.js' // просто загрузить этот файл], препроцессоры: {'tests.webpack.js': ['webpack', 'sourcemap'] // препроцесс с webpack и нашим загрузчиком исходных карт }, reporters: ['dots'], // сообщать результаты в этом формате. webpack: {// вид копии конфигурации вашего webpack. devtool: 'inline-source-map', // просто создаем встроенные исходные карты вместо модуль по умолчанию: {loaders: [{test: /\.js$/, loader: 'babel-loader'}]}}, webpackServer: {noInfo: true // пожалуйста, не спамите консоль при работе в karma!} }); }; Далее нам нужен наш единственный файл, который на самом деле будет использовать webpac

Далее нам нужен наш единственный файл, который на самом деле будет использовать API веб-пакетов, чтобы автоматически находить нужные нам файлы.

tests.webpack.js

var context = require.context ('./ src', true, /-test\.js$/); // убедитесь, что ваш каталог и тест регулярных выражений установлены правильно! context.keys () Foreach (контекст).

Напишите несколько тестов

Тесты действительно должны доказать такие вещи, как 1 === 1, поэтому давайте удостоверимся, что это легко понять.

var React = require ('реагировать'); var TestUtils = require ('реагировать / lib / ReactTestUtils'); // Мне нравится использовать Test Utils, но вместо этого вы можете использовать DOM API. var ожидают = требуют ('ожидают'); var Root = require ('../ root'); // мой root-тест находится в компонентах / __ tests __ /, так что мне нужно в моих компонентах. description ('root', function () {it ('отображает без проблем', function () {var root = TestUtils.renderIntoDocument (<Root />); ожидаем (root) .toExist ();});});

Запустите тесты!

Простое начало кармы запустит тесты один раз. начало кармы --single-run = false для нескольких запусков.

Заключение

И это все! Довольно минимальная конфигурация для создания действительно хорошей среды тестирования. Огромное спасибо парням-маршрутизаторам за то, что они сделали это на GitHub.

Рекомендации

React-Router - https://github.com/rackt/react-router/
Карма - http://karma-runner.github.io/0.12/index.html
React TestUtils - http://facebook.github.io/react/docs/test-utils.html
Мой пример репо - https://github.com/justinwoo/react-karma-webpack-testing/

бонус

Сделать это с Трэвисом тривиально. Просто сделай несколько вещей.

Изменить, какой браузер будет работать в Travis

Travis поставляется только с Firefox, поэтому мы должны изменить это соответствующим образом.

Установите средство запуска Firefox, karma-firefox-launcher, а затем измените конфигурацию вашей кармы соответственно на браузеры: [process.env.CONTINUOUS_INTEGRATION? «Firefox»: «Chrome». Вы также можете использовать PhantomJS, если вы действительно хотите, используя правильный загрузчик.

Настроить Трэвис

Добавьте .travis.yml с соответствующими настройками. Вам нужно будет запустить xvfb в Travis соответственно, чтобы заставить Firefox работать.

travis.yml

язык: node_js node_js: - "0.10" перед установкой: - "exportDISPLAY =: 99.0" - "sh-e / etc / init.d / xvfbstar

И тогда ты в порядке!

Смотрите Трэвис в действии в моем демо репо: https://github.com/justinwoo/react-karma-webpack-testing (построить журнал здесь: https://travis-ci.org/justinwoo/react-karma-webpack-testing/builds/51681700 )

Похожие

Комментарии