React项目搭建基于Karma的CI环境

来自： http://www.cnblogs.com/E-WALKER/p/5178358.html

简介

在浏览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，结果图：