over 3 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 使用 chaireact-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/

← React Redux 環境建立及心得 React.createClass 與 extends React.Component →
 
comments powered by Disqus