about 7 years ago
首先必需先安裝 NodeJS 和 npm
node 4.4.0
npm 3.3.12
安裝全域 mocha
npm install -g mocha
準備好底下 package.json 內容
{
"name": "reacttest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha --compilers js:babel-core/register ./test/* --require ./test/test_helper.js"
},
"author": "jasonwang",
"license": "ISC",
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7"
},
"devDependencies": {
"babel-core": "^6.4.5",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"chai": "^3.5.0",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7"
}
}
及 .babelrc 檔案
{
"presets": ["es2015", "react"]
}
建立 Counter.js 內容是兩個 button 對 state 作加減
import React from 'react'
class Counter extends React.Component {
constructor(props) {
super(props)
this.state = {count : 0}
}
increment() {
this.setState({count: ++this.state.count})
}
decrement () {
this.setState({count: --this.state.count});
}
render(){
return(
<div>
<p><span>{this.state.count}</span></p>
<button onClick={this.increment.bind(this)}>+</button>
<button onClick={this.decrement.bind(this)}>-</button>
</div>
)
}
}
export default Counter
建立 test\Counter-test.js 使用 chai 及 react-addons-test-utils
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import Counter from '../Counter';
import {expect} from 'chai';
describe ('Counter', () => {
// 測試 view 狀態
it ('appears in view', () => {
const shallowRenderer = TestUtils.createRenderer();
shallowRenderer.render(<Counter className='counert' />);
const result = shallowRenderer.getRenderOutput();
expect(result.type).to.be.equal('div');
//expect(result.props.className).to.be.equal('counert');
});
// 測試 button 狀態
it('displays buttons', () => {
const component = TestUtils.renderIntoDocument(<Counter />);
const buttons = TestUtils.scryRenderedDOMComponentsWithTag(component,'button');
expect(buttons.length).to.equal(2);
expect(buttons[0].textContent).to.equal('+');
expect(buttons[1].textContent).to.equal('-');
});
// 測試 + 動作
it('adds when + is clicked', () => {
const component = TestUtils.renderIntoDocument(<Counter />);
const buttons = TestUtils.scryRenderedDOMComponentsWithTag(component,'button');
expect(component.state.count).to.equal(0);
TestUtils.Simulate.click(buttons[0]);
expect(component.state.count).to.equal(1);
TestUtils.Simulate.click(buttons[0]);
expect(component.state.count).to.equal(2);
});
// 測試 - 動作
it('subtracts when — is clicked', () => {
const component = TestUtils.renderIntoDocument(<Counter />);
const buttons = TestUtils.scryRenderedDOMComponentsWithTag(component,'button');
expect(component.state.count).to.equal(0);
TestUtils.Simulate.click(buttons[1]);
expect(component.state.count).to.equal(-1);
TestUtils.Simulate.click(buttons[1]);
expect(component.state.count).to.equal(-2);
});
// 測試 - 和 + 動作
it('adds and subtracts', () => {
const component = TestUtils.renderIntoDocument(<Counter />);
const buttons = TestUtils.scryRenderedDOMComponentsWithTag(component,'button');
expect(component.state.count).to.equal(0);
TestUtils.Simulate.click(buttons[0]);
expect(component.state.count).to.equal(1);
TestUtils.Simulate.click(buttons[1]);
expect(component.state.count).to.equal(0);
});
});
建立透過 jsdom 建立 DOM 需要的環境 test\test_helper.js
import jsdom from 'jsdom';
if (typeof document === 'undefined') {
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.defaultView;
global.navigator = global.window.navigator;
}
於 terminal 執行
npm test
package.json 指令設定
"scripts": {
"test": "mocha --compilers js:babel-core/register ./test/* --require ./test/test_helper.js"
},
--compilers js:babel-core/register 指定要轉碼的編譯器
./test/* 為測試的目錄及檔案
./test/test_helper.js DOM 需要的環境路徑
執行結果
Counter
√ appears in view
√ displays buttons
√ adds when + is clicked
√ subtracts when — is clicked
√ adds and subtracts
5 passing (59ms)
參考網址
https://medium.com/viet.q.trang/basic-react-testing-walkthrough-b32b49c16a57#.jn6by86ag@
http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html
http://www.checkme.tw/wordpress/react-unit-testing/
https://facebook.github.io/react/docs/test-utils.html
http://chaijs.com/
