gototop gototop

Почта

Логин:

Пароль:


( что это )

Вход в ЭЖ



 

 

Лицензия

 

 

Аккредитация

 

Вход

Войти используя сервисы:

Войти

А так же:
VeriSign , AOL

Поддержка сайта

Телефон поддержки сайта и Электронного журнала

+7 908 952 88 56

пн.-пт. с 9.00 до 17.00

 

также можно связаться по Skype

Skype Me™!

 и   421812859

  • Категории : 40
  • Изображения : 238
  • Комметарии : 1
  • Голосов : 79
  • Просмотры : 38983


Тестирование компонентов ReactJS с помощью Karma и Webpack

  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, начиная с чистого рендеринга.

Ребята, пишущие React-Router - это БОГИ   Любая другая запись в блоге о тестировании компонентов React, которую я видел, была очень сложной   Потому что эта установка - лучшая вещь, которую я нашел в 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 )

Хорошо, как я могу получить это?
Зачем мне это?
Когда тестирование и отладка с полными исходными картами были такими простыми?
Хорошо, как я могу получить это?
CONTINUOUS_INTEGRATION?

Новости

Экология в современном мире
Современное понятие «экология» имеет более широкое значение, чем в первые десятилетия развития этой науки. Всеобщее внимание к экологии повлекло расширение первоначально довольно чётко обозначенной Эрнстом

Должностная инструкция эколога (примерный образец) ("Кадровик. Кадровое


Экология и бизнес
Министерство общего и профессионального образования Российской Федерации СУРГУТСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ Гуманитарный Факультет Кафедра лингвистики и межкультурной коммуникации Интенсивное

Институт инженерной экологии и химического машиностроения
Федеральное государственное бюджетное образовательное учреждение высшего образования « Московский политехнический университет » ( сокращ. «Московский политех») — технический университет, расположенный

Курсовая работа: Инновационная деятельность в сфере экологии. Скачать бесплатно и без регистрации
Введение Актуальность исследования. Любое предприятие, существующее в рыночных условиях, для получения стратегических преимуществ должно осуществлять инновационную деятельность. Инновационная

Новостройки Подмосковья: города с лучшей экологией. Пушкино, Ивантеевка, Домодедово.
Здоровый образ жизни становится все более популярной концепцией. Но люди задумываются не только над тем, что они едят или пьют, но и над своим местом жительства, чаще выбирая квартиры в экологически чистых

Вегетарианство: 1001 факт
  «Как вы думаете, - спрашивает кандидат биологических наук Анна Марголина, - что вносит наибольший вклад в накопление в атмосфере Земли парниковых газов, которые считаются основной причиной глобального

Актуальность проблемы визуальной экологии городской среды
Постановка проблемы В наши дни человеческое общество всё чаще сталкивается с проблемами, которые образовались в результате нарушения взаимодействия в системе «человек -- окружающая природная среда». Еще

Буклеты По Экологии Для Детей
     В районной библиотеке работает выставка к году экологии в России под названием "Экология. Природа. Жизнь". С февраля начнет работать ежемесячная выставка периодических изданий по экологии, которые

ВИКТОРИНЫ ПО ЭКОЛОГИИ ДЛЯ ДОШКОЛЬНИКОВ... План-конспект занятия по окружающему миру (средняя группа) на тему: Экологическая викторина для дошкольников « Знатоки природы»
В конце викторины мы увидим результат. Берегите, любите и охраняйте природу. Этот конспект направлен на воспитание интереса к природе родного края, развитию любознательности, познавательного интереса

Погода

Наши учредители

 

администрации г. Кемерово

    Начальник управления

  Чернова Нина Александровна

  Адрес: 650000, г. Кемерово

  пр. Советский, 54

  тел. приемной: (384-2) 36-46-19

 

Председатель комитета

Казаченко Ольга Алексеевна

  Адрес: 650000, г. Кемероово,

  Притомская Набережная, 7

  тел. приемной: (384-2) 36-81-71

Российское образование

 

 

Школьная форма


Форма

Голосования

Ваше отношение к инклюзивному образованию (обучению детей-инвалидов в общеобразовательной школе).
 
Управление образования администрации г.Кемерово
Какая главная проблема современных школьников?