Протестируйте код JavaScript с помощью браузеров Karma, Mocha, Chai и безголовых

1. Быстрое объяснение
2. Монтаж
3. Заключение

Веб-приложения используют все больше и больше JavaScript. Что касается внутреннего кода, вы должны проверить его. Однако тестирование внешнего кода не так просто, как тестирование внутреннего кода. Действительно, вы должны протестировать его на нескольких браузерах (Chrome, Edge, Firefox, Safari и т. Д.) И их разных версиях. Это означает, что вам нужно протестировать свой код как минимум в 10 браузерах, чтобы убедиться, что ваш код работает должным образом.

В этой статье я покажу, как использовать Karma для запуска тестов, а Mocha и Chai - для их написания.

Быстрое объяснение

Карма позволяет тестировать ваш код на реальных браузерах и реальных устройствах, таких как телефоны, планшеты. Он запускает браузеры и запускает на них тесты.

кофе мокко это многофункциональный JavaScript-фреймворк, работающий на Node.js и в браузере, что делает асинхронное тестирование простым и увлекательным. Тесты Mocha запускаются последовательно, обеспечивая гибкую и точную отчетность и отображая неперехваченные исключения в правильные тестовые случаи.

description ('Array', () => {description ('# indexOf ()', () => {it ('должно возвращать -1, если значение отсутствует', () => {assert.equal ([ 1,2,3] .indexOf (4), -1);});});});

Chai библиотека утверждений BDD / TDD для узла и браузера, которая может прекрасно сочетаться с любой средой тестирования javascript.

assert.equal (foo, 'bar');

Подводя итог, Карма запускает мокко в нескольких браузерах. Утверждения тестов написаны с использованием Chai.

Монтаж

Карма поставляется с несколькими плагинами. Есть плагины для использования тестовых фреймворков и плагины для запуска браузеров. Вы можете установить Karma, плагины, мокко и чай, используя npm:

npm i - save-dev карма карма-мокко карма-чай npm i - save-dev карма-хром-лаунчер карма-firefox-launcher карма-то-лаунчер npm i - спас-дев мокко чай

Вы найдете список запуска на GitHub: Карма пусковые установки

Затем создайте функцию, тест и конфигурацию кармы. Структура вашего приложения должна выглядеть так:

MyProject ├── src │ └── main.js ├── test │ └── mainSpec.js ├── package.json └── karma.conf.js

Вот содержимое файла main.js:

function endWith (str, суффикс) {return str.indexOf (суффикс, str.length - суффикс.length)! == -1; }

Вот содержимое файла mainSpec.js:

description ('main', function () {description ('# endWith ()', function () {it ('должно возвращать true, когда значение заканчивается суффиксом'), function () {assert.equal (true, endWith ( "abcd", "cd"));}); it ('должен возвращать false, если значение не заканчивается суффиксом', function () {assert.equal (false, заканчиваетсяWith ("abcd", "cde") );});});});

Затем вы должны настроить карму. Создайте файл karma.config.js со следующим содержимым:

module.exports = function (config) {config.set ({frameworks: ['mocha', 'chai'], файлы: ['src / ** / *. js', 'test / ** / *. js' ], репортеры: ['progress'], порт: 9876, // цвета порта веб-сервера karma: true, logLevel: config.LOG_INFO, браузеры: ['ChromeHeadless', 'Firefox', 'FirefoxDeveloper', 'FirefoxNightly', ' IE '], autoWatch: false, параллелизм: Infinity, customLaunchers: {FirefoxHeadless: {base:' Firefox ', флаги: [' -headless '],},},})}

По умолчанию karma-firefox не регистрирует безголовую версию браузера, поэтому я добавляю ее вручную в раздел customLaunchers.

Наконец, добавьте тестовый скрипт в packages.json:

{"name": "my-project", "version": "0.0.0", "devDependencies": {// код опущен для краткости}, "scripts": {"test": "start karma --single- запустите --browsers ChromeHeadless, FirefoxHeadless, IE karma.conf.js "}}

Теперь вы можете запустить тесты, используя npm test

тест npm

Заключение

Ваша тестовая среда настроена. Вы можете добавить множество тестов для вашего кода переднего плана. Карма и Мокко имеют много функций. В этом посте мы просто рассмотрим поверхность. Обязательно прочитайте документацию, чтобы изучить возможности этих решений.

Похожие