从零开始React项目架构(五)

前言

作为一个项目而言，单元测试应该是必备的一部分，也是最容易被大家忽略的一部分，这篇文章就介绍一下jest 和 enzyme。

Jest 特点：

测试用例并行执行，更高效
强大的 Mock 功能
内置的代码覆盖率检查，不需要在引入额外的工具
集成 JSDOM，可以直接进行 DOM 相关的测试
更易用简单，几乎不需要额外配置
可以直接对 ES Module Import 的代码测试
有快照测试功能，可对 React 等框架进行 UI 测试

开发

安装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看下效果

让我们写个简单的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.

总结

这篇文章我们介绍了在项目中加入单元测试, 简单写了一些测试例子。

参考文章

系列文章

源码

React项目架构