React項目搭建基于Karma的CI環境
來自： http://www.cnblogs.com/E-WALKER/p/5178358.html
簡介
在瀏覽Github的時候是否經常看到這樣的CI圖標呢？
本文即為介紹如何為基于React的項目配置 CircleCI 的自動化測試環境
源碼在此 </div>
本地實現
項目依賴如下:
"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
}
})
}</pre>
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
</div>
import React, { Component } from 'react'
export default class Counter extends Component {
render() {
const { count } = this.props
return (
<div>
<span id='counter'>{ count }</span>
</div>
)
}
}</pre>
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')
})
})</pre>
現在即可以本地運行Karma start，結果圖：
</div>
對接circleci
我們希望有自動化的CI環境，這樣可以更方便團隊開發。
本文以circleci為例。
關聯好Github賬號后，CI下的build目錄中即可導入工程。
針對Node項目，circleci會自動運行npm run test,所以暫時沒有必要配置相關的yml文件。
結果如下
有問題歡迎討論 :)
</div>
本文由用戶 rwft3131 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
相關經驗
相關資訊