【前端单元测试入门02】react的单元测试之Enzyme

React项目的单元测试

React的组件结构和JSX语法，对上一章的内容来讲进行测试显得很勉强。

React官方已经提供了一个测试工具库：react-dom/test-utils

只是用起来不够方便，于是有了一些第三方的封装库，比如Airbnb公司的Enzyme

测试项目的配置

本次测试项目是根据上一章的测试项目衍生而来，包含上一章讲到的Mocha和chai，这里只介绍新加的一些模块。

项目结构图如下：

因为是React项目，所以自然需要安装React的一些东西：

npm install --save react react-dom babel-preset-react

然后.babelrc文件内容改为

{
  "presets": [ "es2015","react" ]
}

example.jsx的内容为：

import React from 'react'
const Example=(props)=>{
    return (<div>
            <button>{props.text}</button>
        </div>)
}
export default Example

example.test.js的内容暂时为空

Enzyme 的安装与配置

npm install --save-dev enzyme

而enzyme还需要根据React的版本安装适配器，适配器对应表如下：

Enzyme Adapter Package	React semver compatibility
enzyme-adapter-react-16	^16.0.0
enzyme-adapter-react-15	^15.5.0
enzyme-adapter-react-15.4	15.0.0-0 - 15.4.x
enzyme-adapter-react-14	^0.14.0
enzyme-adapter-react-13	^0.13.0

那么因为我们安装的React版本为^16.2.0

所以需要安装：

npm install --save-dev enzyme-adapter-react-16

Enzyme 的使用

现在开始用Enzyme为example.jsx编写测试代码：

import {assert} from 'chai'
import React from 'react'
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import Example from '../src/example'
const {shallow}=Enzyme
Enzyme.configure({ adapter: new Adapter() })
describe('Enzyme的浅渲染测试套件', function () {
  it('Example组件中按钮的名字为text的值', function () {
    const name='按钮名'
    let app = shallow(<Example text={name} />)
    assert.equal(app.find('button').text(),name)
  })
})

如上面代码所示，在使用Enzyme 前需要先适配React对应的版本

Enzyme.configure({ adapter: new Adapter() })

而为了避免每个测试文件都这么写，可以再test目录下新建一个配置文件：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({
  adapter: new Adapter(),
});
export default Enzyme;

然后测试文件的时候只需要引用这个配置文件即可：

import {assert} from 'chai'
import React from 'react'
import Enzyme from './config/Enzyme.config';
import Example from '../src/example'
const {shallow}=Enzyme
describe('Enzyme的浅渲染测试套件', function () {
  it('Example组件中按钮的名字为text的值', function () {
    const name='按钮名'
    let app = shallow(<Example text={name} />)
    assert.equal(app.find('button').text(),name)
  })
})

Enzyme 的使用之浅渲染shallow

上面的例子中就用到浅渲染shallow 。

Shallow Rendering（浅渲染）指的是，将一个组件渲染成虚拟DOM对象，但是只渲染第一层，不渲染所有子组件，所以处理速度非常快。它不需要DOM环境，因为根本没有加载进DOM。

shallow的函数输入组件，返回组件的浅渲染结果，而返回的结果可以用类似jquery的形式获取组件的信息。

运行

npm test

也就是：

mocha --require babel-core/register

得到以下结果：

浅渲染测试与子组件的相关的代码：

现在修改我们的例子，新加一个sub.jsx：

import React from 'react'
const Sub=(props)=>{
    return (<span>{props.text}</span>)
}
export default Sub

在原来的example.jsx中使用Sub，形成嵌套：

import React from 'react'
import Sub from './sub'
const Example=(props)=>{
    return (<div>
            <button>{props.text}</button>
            <Sub text={props.text}  />
        </div>)
}
export default Example

使用shadow测试子组件的代码：

import {assert} from 'chai'
import React from 'react'
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import Example from '../src/example'
const {shallow,mount}=Enzyme
Enzyme.configure({ adapter: new Adapter() })
describe('Enzyme shallow的浅渲染（Shallow Rendering）中', function () {
  it('Example组件中按钮的名字为子组件Sub中span的值', function () {
    const name='按钮名'
    let app = shallow(<Example text={name} />)
    const buttonObj=app.find('button')
    const spanObj=app.find('span')
    console.info(`查找到button的个数：${buttonObj.length}`)
    console.info(`查找到span的个数：${spanObj.length}`)
    assert.equal(buttonObj.text(),spanObj.text())
  })
})

测试结果为：

如上图所示，shallow所得到的浅渲染对象中差找不到子组件Sub的span元素。

为了解决上面这种情况，Enzyme给出的解决方案为用mount实现 Full DOM Rendering。

Enzyme 的使用之mount

mount方法用于将React组件加载为真实DOM节点。

然而真实DOM需要一个浏览器环境，为了解决这个问题，我们可以用到jsdom.

下面是jsdom的官方介绍：

jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js. In general, the goal of the project is to emulate enough of a subset of a web browser to be useful for testing and scraping real-world web applications.

也就是说我们可以用jsdom模拟一个浏览器环境去加载真实的DOM节点。

首先安装jsdom：

npm install --save-dev jsdom

然后在test目录下新建一个文件setup.js：

import jsdom from 'jsdom';
const { JSDOM } = jsdom;
if (typeof document === 'undefined') {
    const dom=new JSDOM('<!doctype html><html><head></head><body></body></html>');
    global.window =dom.window;
    global.document = global.window.document;
    global.navigator = global.window.navigator;
}

最后修改我们的package.json中的测试脚本为：

 "scripts": {
    "test": "mocha --require babel-core/register --require ./test/setup.js"
  }

这样在运行npm test时，会先用babel解析js，然后再执行setup.js中的代码，给global对象模拟一个浏览器环境。

在配置好模拟浏览器环境后，修改测试代码为：

import {assert} from 'chai'
import React from 'react'
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import Example from '../src/example'
const {shallow,mount}=Enzyme
Enzyme.configure({ adapter: new Adapter() })
describe('Enzyme mount的DOM渲染（Full DOM Rendering）中', function () {
  it('Example组件中按钮的名字为子组件Sub中span的值', function () {
    const name='按钮名'
    let app = mount(<Example text={name} />)
    const buttonObj=app.find('button')
    const spanObj=app.find('span')
    console.info(`查找到button的个数：${buttonObj.length}`)
    console.info(`查找到span的个数：${spanObj.length}`)
    assert.equal(buttonObj.text(),spanObj.text())
  })
})

运行

npm test

结果为：

如上，在mount得到的结果中可以找到子组件的元素

Enzyme 的使用之render

而Enzyme还提供了一个不需要jsdom模拟环境解决子组件测试的方法：render。

Enzyme的render函数得到的结果被称为Static Rendered Markup，以下为官方的介绍

enzyme's render function is used to render react components to static HTML and analyze the resulting HTML structure.

render returns a wrapper very similar to the other renderers in enzyme, mount and shallow; however, render uses a third party HTML parsing and traversal library Cheerio. We believe that Cheerio handles parsing and traversing HTML extremely well, and duplicating this functionality ourselves would be a disservice.

意思就是说render会根据react组件得到一个静态HTML文本结果，借助一个第三方的HTML解析库Cheerio去生成一个类似于mount和shallow得到的封装对象。

修改测试代码为：

import {assert} from 'chai'
import React from 'react'
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import Example from '../src/example'
const {shallow,mount,render}=Enzyme
Enzyme.configure({ adapter: new Adapter() })
describe('Enzyme render的静态HTML渲染（Static Rendered Markup）中', function () {
  it('Example组件中按钮的名字为子组件Sub中span的值', function () {
    const name='按钮名'
    let app = render(<Example text={name} />)
    const buttonObj=app.find('button')
    const spanObj=app.find('span')
    console.info(`查找到button的个数：${buttonObj.length}`)
    console.info(`查找到span的个数：${spanObj.length}`)
    assert.equal(buttonObj.text(),spanObj.text())
  })
})

测试结果为：

shallow ,render和mount的效率对比

空口无凭，直接上测试代码：

it('测试 shallow 500次', () => {
  for (let i = 0; i < 500; i++) {
    const nav = shallow(<Nav />)
    assert.equal(nav.find('a').text(), '首页')
  }
})
it('测试render500次', () => {
  for (let i = 0; i < 500; i++) {
    const nav = render(<Nav />)
    assert.equal(nav.find('a').text(), '首页')
  }
})
it('测试mount500次', () => {
  for (let i = 0; i < 500; i++) {
    const nav = mount(<Nav />)
    assert.equal(nav.find('a').text(), '首页')
  }
})

结果：

结果证明:

shallow果然最快，这是肯定的，但是因为shallow的局限性，我们可能更想知道render和mount的效率。

事实证明，render的效率是mount的两倍。

有人可能要质疑你为什么不将次数弄更大一点，因为在设定为1000次的情况下mount直接超时了，也就是超过了mocha的默认执行时间限定2000ms。

那么问题来了，mount存在的价值是什么，render就可以测试子组件，render还不需要jsdom和额外的配置。

当然是有价值的，shallow和mount因为都是dom对象的缘故，所以都是可以模拟交互的，比如

 const nav = mount(<Nav />)
 nav.find('a').simulate('click')

而render是不能的。

小结

简而言之，Enzyme主要包括三个测试：

一个是浅渲染的shallow，这个生成虚DOM对象，所以渲染最快，然而它并不能测试子组件的相关代码。

另一个是DOM渲染mount，它会生成完整的DOM节点，所以可以测试子组件。但是要依赖一个用jsdom模拟的浏览器环境。

最后一个是HTML文本渲染render，它会将react组件渲染为html文本，然后在内部通过Cheerio自动生成一个Cheerio对象。

渲染方法	是否可以测试子组件	是否可以模拟交互	性能（测试500次）
shallow	否	是	116ms
mount	是	是	421ms
render	是	否	984ms

文中介绍了简单的用法，具体的API文档见：

Shallow Rendering

Full DOM Rendering

Static Rendered Markup