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文件。
結果以下

有問題歡迎討論 :)