从零开始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项目架构