JavaScript
es6
reactjs

ES6+Reactをkarma+mocha+chaiでテストした時の設定まとめ

More than 3 years have passed since last update.


やりたいこと


  • Reactコンポーネントのテスト

  • テストカバレッジ出力


設定後のテスト結果出力

START:

ListView
✔ propsが正しく設定できる

Finished in 0.017 secs / 0.008 secs

SUMMARY:
✔ 1 test completed
--------------|----------|----------|----------|----------|----------------|
File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines |
--------------|----------|----------|----------|----------|----------------|
parts/ | 90.48 | 58.06 | 100 | 100 | |
ListView.js | 90.48 | 58.06 | 100 | 100 | |
--------------|----------|----------|----------|----------|----------------|
All files | 90.48 | 58.06 | 100 | 100 | |
--------------|----------|----------|----------|----------|----------------|

以下、設定方法。


使用モジュール

"babel-core": "^6.3.26",

"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"chai": "^3.4.1",
"istanbul-instrumenter-loader": "^0.1.3",
"karma-coverage": "^0.5.3",
"karma-mocha": "^0.2.1",
"karma-mocha-reporter": "^1.1.4",
"karma-phantomjs-launcher": "^0.2.2",
"karma-phantomjs-shim": "^1.2.0",
"karma-sourcemap-loader": "^0.3.6",
"karma-webpack": "^1.7.0",
"mocha": "^2.3.4",
"phantomjs": "^1.9.19",
"react-addons-test-utils": "^0.14.5",
"webpack": "^1.12.9"

多い。。。


設定ファイル

src/以下にテスト対象ファイル

test/以下にテストファイルを置いておきます。

テストファイルの名前は、*.spec.jsで揃えておきます。


karma.conf.js

module.exports = function(config) {

config.set({
basePath: '',
frameworks: ['phantomjs-shim', 'mocha'],
files: [
'test/**/*\.spec\.js'
],
exclude: [
'**/*\.swp'
],
plugins: [
'karma-phantomjs-launcher',
'karma-phantomjs-shim',
'karma-mocha',
'karma-sourcemap-loader',
'karma-webpack',
'karma-coverage',
'karma-mocha-reporter'
],
preprocessors: {
'test/**/*\.spec\.js': ['webpack', 'sourcemap']
},
// webpack設定
webpack: {
devtool: 'inline-source-map',
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules\//
}
],
postLoaders: [
{
test: /\.js$/,
exclude: /(test|node_modules)\//,
loader: 'istanbul-instrumenter'
}
]
}
},
webpackServer: {
noInfo: true
},
// mochaの実行結果とカバレッジを出力
reporters: ['mocha', 'coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
// PhantomJS上でテスト実行
browsers: ['PhantomJS'],
singleRun: false,
concurrency: Infinity,
// カバレッジ出力形式
coverageReporter: {
dir: 'coverage/',
reporters: [
{ type: 'html' },
{ type: 'text' }
]
}
})
}


.babelrc

{

"presets": [
"es2015",
"react"
]
}


テストサンプル


テスト対象(src/components/parts/ListView.js)

import React, { Component } from 'react'

export default class ListView extends Component {
constructor(props) {
super(props)
}

render() {
return (
<div>
<image src={this.props.imageUrl}></image>
<span>{this.props.text}</span>
</div>
)
}
}


テスト(test/components/parts/ListView.spec.js)

import React from 'react'

import ReactTestUtils from 'react-addons-test-utils'
import { expect } from 'chai'

import ListView from '../../../src/components/parts/ListView'

describe('ListView', () => {
it('propsが正しく設定できる', () => {
let component = ReactTestUtils.renderIntoDocument(<ListView imageUrl="http://example.com/" text="sample" />)

expect("http://example.com/").to.equal(component.props.imageUrl)
expect("sample").to.equal(component.props.text)
})
})


テスト出力結果

START:

ListView
✔ propsが正しく設定できる

Finished in 0.017 secs / 0.008 secs

SUMMARY:
✔ 1 test completed
--------------|----------|----------|----------|----------|----------------|
File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines |
--------------|----------|----------|----------|----------|----------------|
parts/ | 90.48 | 58.06 | 100 | 100 | |
ListView.js | 90.48 | 58.06 | 100 | 100 | |
--------------|----------|----------|----------|----------|----------------|
All files | 90.48 | 58.06 | 100 | 100 | |
--------------|----------|----------|----------|----------|----------------|


まとめ

テストもできてカバレッジも取れて幸せです。