Как запустить тесты в браузере или тестирование при помощи Karma и Jasmine 31.01.2016

Я много говорил о том, для чего нужно писать тесты, но еще ни разу не пытался рассказывать о том, как же происходит тестирование. В этой статье я кратко расскажу, как настроить тестирование JavaScript-кода в браузере.

Для организации тестирования нам потребуется два инструмента — Jasmine,- фреймворк для написания тестов, и Karma, — инструмент для запуска этих тестов в браузере. Рассмотрим каждый из этих инструментов чуть-чуть подробнее.

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

Karma test runner необходим для запуска тестов в браузере на любом доступном устройстве. Karma легко интегрируется со многими фреймворками для описания тестов (например, тот же Jasmine или Mocha) и позволяет управлять процессом тестирования не только из командной строки, но и непосредственно из IDE(например, WebStorm от JetBrains).

Итак, приступим. Для работы нам потребуется установить следующие npm-модули: jasmine, karma, karma-jasmine и karma-chrome-launcher:

$ npm install —save-dev jasmine
$ npm install —save-dev karma
$ npm install —save-dev karma-jasmine
$ npm install —save-dev karma-chrome-launcher

где karma-jasmine — адаптер для интеграции Jasmine и Karma(в документации к karma-jasmine написано, что данный плагин входит в состав Karma по-умолчанию. Проверка же показала, что на данный момент это утверждение ложно и не заслуживает внимания);
karma-chrome-launcher — плагин для автоматического запуска браузера Chrome при запуске тестов так же устанавливается отдельно (если вы хотите протестировать ваш код в других браузерах, то вам потребуется установить соответствующие плагины для их запуска).

Теперь, когда все инструменты установлены, создадим простейший конфиг для запуска тестов (файл karma.config.js):

module.exports = function(config) {

    config.set({

        frameworks: ['jasmine'],

        browsers: ['Chrome'],


        files: [

            '*.test.js'

        ]

    });
};

где поле frameworks указывает на используемые фрейворки для тестирования, browsers содержит имена браузеров, в которых мы хотим протестировать наш код, а files содержит шаблоны для поиска файлов, которые требуется запустить при тестировании. Более подробно о настройках Karma можно прочитать в соответствующем разделе документации.

Для примера создадим простейший тест (файл example.test.js):

describe('Example of testing with Jasmine and Karma', function () {

    it('does not matter how to create an array', function () {

        expect([1, 2, 3]).toEqual(new Array(1, 2, 3));

    });

});

Тестирование запускается командой из консоли:

$ karma start karma.conf.js

Замечу, что по-умолчанию Karma-сервер запускается и слушает порт 9876, и для того, чтобы протестировать ваш код в браузере какого-нибудь устройства, просто нужно открыть в нем ссылку http://<хост на котором запущена Karma>:9876/, а потом перезапустить тесты.

О том, как запустить тесты непосредственно из IDE WebStorm рассказывается в следующем ролике:

by 31.01.2016