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?output }

]

},

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 (

)

}

}

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(

)

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文件。

结果如下

有问题欢迎讨论 ????