Как настроить окружение юнит тестирования Javascript

Вначале была функция и вызывали ее в одном месте. Потом мы захотели вызвать ее в другом месте с новыми возможностями и обновили ее. Нам эта ф-ия так понравилась, что мы вызвали ее в третьем месте и еще сделали функциональные правки и… в первом месте что-то пошло не так. А как узнать? Проверять во всех местах где мы использовали эту функцию, все ли правильно работает? Можно, но лучше использовать unit тесты.

Как правильно тестировать свой код вы можете найти в первых строчках поисковика, а вот с настройкой окружения приходится повозиться. Так вот сегодня я хочу помочь начинающим разработчикам настроить окружение для unit тестирования своего кода.

Имеет смысл читать статью далее, если читатель освоил работу с npm или подобным менеджером пакетов.

Начнем с небольших определений:

unit-тестирование — это технология, цель которой уменьшить вероятность ошибок и побочных эффектов (когда при исправлении одного бага вносится другой баг).
karma — инструмент, позволяющий запустить java-script тесты в браузерах.
jasmine — фреймворк для тестирования javasctript кода.

В инструкции по установке Karma (как и во многих других) говорится, что пакеты следует установить в проекте локально.

1 2	# Install Karma: $ npm install karma --save-dev

1 2	# Install plugins that your project needs: $ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

Для удобства мы также можем установить глобально karma-cli npm install -g karma-cli, иначе из терминала команды будут доступна так ./node_modules/karma/bin/karma.После чего мы можем создать файл конфигурации:

1	karma init karma.conf.js

Вначале у нас спросят используемый фреймворк для тестирования. ( jasmine )
Используем ли мы файловый/модульный загрузчик Require.js. ( Нет )
Какие браузеры мы хотим просматривать ( Chrome )
Какие файлы мы прослушиваем. ( *[Ss]pec.js )
Следует ли исключить какие-то файлы
Следить ли за изменениям тестов ( yes )

Ответив на вопросы, у нас появится файл конфигурации.

Файл конфигурации:

// Karma configuration

// Generated on Thu May 09 2019 18:54:02 GMT+0300 (RTZ 2 (зима))

module.exports = function(config) {

config.set({

// base path that will be used to resolve all patterns (eg. files, exclude)

basePath: '',

// frameworks to use

// available frameworks: https://npmjs.org/browse/keyword/karma-adapter

frameworks: ['jasmine'],

// list of files / patterns to load in the browser

files: [

'*[Ss]pec.js'

// list of files / patterns to exclude

exclude: [

// preprocess matching files before serving them to the browser

// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor

preprocessors: {

// test results reporter to use

// possible values: 'dots', 'progress'

// available reporters: https://npmjs.org/browse/keyword/karma-reporter

reporters: ['progress'],

// web server port

port: 9876,

// enable / disable colors in the output (reporters and logs)

colors: true,

// level of logging

// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG

logLevel: config.LOG_INFO,

// enable / disable watching file and executing tests whenever any file changes

autoWatch: true,

// start these browsers

// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher

browsers: ['Chrome'],

// Continuous Integration mode

// if true, Karma captures browsers, runs the tests and exits

singleRun: false,

// Concurrency level

// how many browser should be started simultaneous

concurrency: Infinity

})

}

Создадим еще один файл с тестами:

// test.spec.js

describe("A suite is just a function", function() {

var a;

it("and so is a spec", function() {

a = true;

expect(a).toBe(true);

});

it("and so is a spec", function() {

a = true;

expect(a).toBe(false);

});

Мы уже можем посмотреть как работает наш тест запустив команду karma start karma.conf.js, но я рекомендую немного подождать и сделать дополнительные надстройки.

Установим пакет npm i -D karma-jasmine-html-reporter, который в браузере динамически отобразит результаты тестов. Дополним конфиг кармы:

...

reporters: ['progress', 'kjhtml'],

client: {

clearContext: false // leave Jasmine Spec Runner output visible in browser

...

Теперь у нас все готово. Запускаем karma start karma.conf.js и приступаем к своему первому тестированию.