從零開始React項目架構(五)

前言

---

做爲一個項目而言，單元測試應該是必備的一部分，也是最容易被你們忽略的一部分，這篇文章就介紹一下jest 和 enzyme。

Jest 特色：

1. 測試用例並行執行，更高效
2. 強大的 Mock 功能
3. 內置的代碼覆蓋率檢查，不須要在引入額外的工具
4. 集成 JSDOM，能夠直接進行 DOM 相關的測試
5. 更易用簡單，幾乎不須要額外配置
6. 能夠直接對 ES Module Import 的代碼測試
7. 有快照測試功能，可對 React 等框架進行 UI 測試

開發

---

1. 安裝jest

npm install jest babel-jest enzyme enzyme-adapter-react-16
複製代碼

咱們先寫個列子試一下，在tests文件夾下建立demo.js和 demo.test.js

// demo.js
function sum(a, b){
    return a + b;
}
 
 module.exports = sum;
複製代碼

// demo.test.js
const sum = require('./sum.js')

test('test 1 plus 2 result', () => {
  expect(sum(1 , 2)).toBe(3);
})


test('test 2 plus 2 should equal 4', () => {
  expect(sum(2 , 2)).toBe(4);
})
複製代碼

在package.json的 script 中加入

"test": "jest"
複製代碼

咱們運行npm run test看下效果

2. 讓咱們寫個簡單的UI測試
   在routes中建立Demo2.jsx

import React from 'react';

export default class CheckboxWithLabel extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isChecked: false };
        this.onChange = this.onChange.bind(this);
    }

    onChange() {
        this.setState({ isChecked: !this.state.isChecked });
    }

    render() {
        return (
            <label> <input type="checkbox" checked={this.state.isChecked} onChange={this.onChange} /> {this.state.isChecked ? this.props.labelOn : this.props.labelOff} </label> ); } } 複製代碼

在tests中建立`demo2.test.js

import React from 'react'
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { shallow } from 'enzyme'
import Demo from '../src/routes/Test.jsx'
configure({ adapter: new Adapter() });

test('CheckboxWithLabel changes the text after click', () => {
    const checkbox = shallow(<Demo labelOn="On" labelOff="Off" />); expect(checkbox.text()).toEqual('Off'); checkbox.find('input').simulate('change'); expect(checkbox.text()).toEqual('On'); }); 複製代碼

咱們運行npm run test 來看下效果

PS F:\mytest\react-architecture> npm run test
 > react-architecture@1.0.0 test F:\mytest\react-architecture
> jest

 PASS  tests/demo.test.js
 PASS  tests/demo2.test.js

Test Suites: 2 passed, 2 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        2.402s
Ran all test suites.
複製代碼

好，咱們吧demo2.test.js 的 expect(checkbox.text()).toEqual('Off'); 和expect(checkbox.text()).toEqual('On'); 換下位置，會出現什麼呢？

PS F:\mytest\react-architecture> npm run test
 > react-architecture@1.0.0 test F:\mytest\react-architecture
> jest

 FAIL  tests/demo2.test.js
  ● checkbox change

    expect(received).toEqual(expected)

    Expected value to equal:
      "On"
    Received:
      "Off"

       8 | test('checkbox change', () => {
       9 |     const checkbox = shallow(<Demo labelOn="On" labelOff="Off" />);
    > 10 |     expect(checkbox.text()).toEqual('On');
         |                             ^
      11 |
      12 |     checkbox.find('input').simulate('change');
      13 |

      at Object.<anonymous> (tests/demo1.test.js:10:29)

 PASS  tests/demo.test.js

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 2 passed, 3 total
Snapshots:   0 total
Time:        2.325s
Ran all test suites.
複製代碼

總結

---

這篇文章咱們介紹了在項目中加入單元測試, 簡單寫了一些測試例子。

參考文章

---

1. jest文檔
2. enzyme文檔

系列文章

---

1. 從零開始React項目架構(一)
2. 從零開始React項目架構(二)
3. 從零開始React項目架構(三)
4. 從零開始React項目架構(四)

源碼

---

React項目架構