React项目搭建基于Karma的CI环境
简介
在浏览Github的时候是否经常看到这样的CI图标呢?
本文即为介绍如何为基于React的项目配置CircleCI的自动化测试环境
源码在此
本地实现
项目依赖如下:
"devDependencies": {
"jasmine-core": "^2.4.1",
"karma": "^0.13.19",
"karma-jasmine": "^0.3.6",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.23",
"karma-webpack": "^1.7.0",
"phantomjs-prebuilt": "^2.1.3",
"webpack": "^1.12.1",
"eslint-plugin-react": "^3.11.1",
"babel-core": "^5.8.24",
"babel-loader": "^5.3.2",
"babel-eslint": "^5.0.0-beta6",
"css-loader": "^0.18.0",
"phantomjs-polyfill": "0.0.1",
"style-loader": "^0.12.3"
},
"dependencies": {
"react": "^0.14.7",
"react-addons-test-utils": "^0.14.7",
"react-dom": "^0.14.7"
}
是基于phantomjs作为运行环境,Karma作为Test Runner的工程结构。
karma.conf.js
const webpack = require('webpack')
module.exports = function (config) {
config.set({
browsers: ['PhantomJS'],
singleRun: true,
frameworks: [ 'jasmine' ],
files: [
'./node_modules/phantomjs-polyfill/bind-polyfill.js',
'./unit-test.webpack.js'
],
preprocessors: {
'./unit-test.webpack.js': [ 'webpack', 'sourcemap' ]
},
reporters: [ 'spec' ],
plugins: [
require('karma-webpack'),
require('karma-jasmine'),
require('karma-phantomjs-launcher'),
require('karma-sourcemap-loader'),
require('karma-spec-reporter')
],
webpack: {
devtool: 'inline-source-map',
module: {
loaders: [
{ test: /\.(jpe?g|png|gif|svg)$/, loader: 'url', query: {limit: 10240} },
{ test: /\.js$/, exclude: /node_modules/, loaders: ['babel']},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' }
]
},
resolve: {
modulesDirectories: [
'components',
'node_modules'
],
extensions: ['', '.json', '.js']
},
plugins: [
new webpack.NoErrorsPlugin(),
]
},
webpackServer: {
noInfo: true
}
})
}
unit-test.webpack.js
//All test case naming follow /-test\.js$/ regexp pattern.
const context = require.context('./components', true, /-test\.js$/)
context.keys().forEach(context)
设置好工作环境后,我们可以写一个最基本的Component与对应的tests
Counter.js
import React, { Component } from 'react'
export default class Counter extends Component {
render() {
const { count } = this.props
return (
<div>
<span id='counter'>{ count }</span>
</div>
)
}
}
client-test.js
import React from 'react'
import { renderIntoDocument } from 'react-addons-test-utils'
import ReactDOM from 'react-dom'
import Counter from '../Counter'
function renderComponent(count) {
const renderer = renderIntoDocument(
<Counter count={count}/>
)
return ReactDOM.findDOMNode(renderer)
}
describe('Counter', () => {
it('should be renderered', () => {
const dom = renderComponent()
expect(dom).not.toBeUndefined()
})
it('should render correct number', () => {
const dom = renderComponent(10)
const count = dom.querySelector('#counter').textContent
expect(count).toBe('10')
})
})
现在即可以本地运行Karma start,结果图:
对接circleci
我们希望有自动化的CI环境,这样可以更方便团队开发。
本文以circleci为例。
关联好Github账号后,CI下的build目录中即可导入工程。
针对Node项目,circleci会自动运行npm run test,所以暂时没有必要配置相关的yml文件。
结果如下
有问题欢迎讨论 😃