从零开始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.jsfunction sum(a, b){    return a + b;}  module.exports = sum;复制代码

// demo.test.jsconst 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 (                                            {this.state.isChecked ? this.props.labelOn : this.props.labelOff}                    );    }}复制代码

在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(
    );        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.jsTest Suites: 2 passed, 2 totalTests:       3 passed, 3 totalSnapshots:   0 totalTime:        2.402sRan 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(
    );    > 10 |     expect(checkbox.text()).toEqual('On');         |                             ^      11 |      12 |     checkbox.find('input').simulate('change');      13 |      at Object.
    
      (tests/demo1.test.js:10:29) PASS  tests/demo.test.jsTest Suites: 1 failed, 1 passed, 2 totalTests:       1 failed, 2 passed, 3 totalSnapshots:   0 totalTime:        2.325sRan all test suites.复制代码

总结

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

前言

Jest 特点：

开发

总结

参考文章

系列文章

源码