在瀏覽Github的時候是否常常看到這樣的CI圖標呢?
本文即爲介紹如何爲基於React的項目配置CircleCI的自動化測試環境
源碼在此css
項目依賴以下:node
"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的工程結構。react
karma.conf.jswebpack
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.jsgit
//All test case naming follow /-test\.js$/ regexp pattern. const context = require.context('./components', true, /-test\.js$/) context.keys().forEach(context)
設置好工做環境後,咱們能夠寫一個最基本的Component與對應的tests
Counter.jsgithub
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.jsweb
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,結果圖:
npm
咱們但願有自動化的CI環境,這樣能夠更方便團隊開發。
本文以circleci爲例。
關聯好Github帳號後,CI下的build目錄中便可導入工程。
針對Node項目,circleci會自動運行npm run test,因此暫時沒有必要配置相關的yml文件。
結果以下
json
有問題歡迎討論 :)sass