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

结果如下

有问题欢迎讨论