JavaScript
reactjs

Reactjs のテストを karma + karma-fixture + mocha + power-assert で書いてみる

More than 3 years have passed since last update.

前回書いた ReactJS + Flumpt のカウンターのサンプル にテストを追加してみる。


karuma インストールと設定

$ npm install --save-dev karma

$ node_modules/.bin/karma init
> mocha

> no

> Chrome

>

>
yes


テストで必要なライブラリをインストール

$ npm install --save-dev babel-plugin-espower karma-browserify power-assert karma-fixture karma-html2js-preprocessor


karma.conf.js

// Karma configuration

// Generated on Mon Dec 21 2015 12:22:32 GMT+0900 (JST)

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: ['mocha', 'browserify'],

// list of files / patterns to load in the browser
files: [
'test/fixtures/**/*.html',
'test/**/*.spec.js'
],

// list of files to exclude
exclude: [
],

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'test/fixtures/**/*.html': 'html2js',
'test/**/*.spec.js': 'browserify'
},

browserify: {
debug: true,
transform: [
['babelify', {plugins: ['babel-plugin-espower']}]
]
},

// 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 simultanous
concurrency: Infinity
});
};


テスト用のファイルを書く

$ mkdir test

$ emacs test/counter.spec.js


test/counter.spec.js

'user strict';

import assert from 'power-assert';

describe('Click a button', () => {
let countSelector = '.js-container > div > p > span:nth-child(2)';

before(() => {
document.body.innerHTML = window.__html__['test/fixtures/index.html'];
require('../src/app.jsx');
});

after(() => {
document.body.innerHTML = '';
});

it('1 increases', () => {
let incBtn = document.querySelector('button:nth-child(1)');
let init_count_num = Number(document.querySelector(countSelector).textContent);
let count_num;

incBtn.click();

count_num = Number(document.querySelector(countSelector).textContent);
assert(init_count_num + 1 === count_num);

});

it('1 decreases', () => {
let decBtn = document.querySelector('button:nth-child(2)');
let init_count_num = Number(document.querySelector(countSelector).textContent);
let count_num;

decBtn.click();

count_num = Number(document.querySelector(countSelector).textContent);
assert(init_count_num - 1 === count_num);
});

});


フィクスチャ

$ mkdir test/fixtures/

$ emacs test/fixtures/index.html


test/fixtures/index.html

<div class="js-container"></div>


package.json

"scripts" に追加

    "test": "karma start",


テスト 実行

$ npm test

Chrome 47.0.2526 (Mac OS X 10.10.5): Executed 2 of 2 SUCCESS (0.103 secs / 0.017 secs)


参考