React项目搭建基于Karma的CI环境
rwft3131
9年前
来自： http://www.cnblogs.com/E-WALKER/p/5178358.html
简介
本地实现
项目依赖如下:
"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文件。
结果如下
有问题欢迎讨论 :)
</div>