react-enzyme

2023-10-14 16:07:10

简介
安装及配置
enzyme 渲染方式
enzyme 常用的测试函数

简介

Enzyme是由Airbnb开源的一个React的JavaScript测试工具，使React组件的输出更加容易extrapolate 。Enzyme的API和jQuery操作DOM一样灵活易用，因为它使用的是cheerio库来解析虚拟DOM，而cheerio的目标则是做服务器端的jQuery。Enzyme兼容大多数断言库和测试框架，如chai、mocha、jasmine等。

安装及配置

使用enzyme之前，需要在项目中安装enzyme依赖，安装的命令如下：

npm install --save-dev enzyme

由于React 项目需要依赖React的一些东西，所以请确保以下模块已经安装:

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

要完成渲染测试，除了enzyme之外，还需要Enzyme Adapter库的支持，由于React 版本的不同，Enzyme Adapter的版本也不一样。适配器和React的对应表如下:

enzyme 渲染方式

shallow()

浅渲染，是对官方的Shallow Renderer的封装。将组件渲染成虚拟DOM对象，只会渲染第一层，子组件将不会被渲染出来，因而效率非常高。不需要DOM环境，并可以使用jQuery的方式访问组件的信息.

为了进行浅渲染shallow测试，我们新建一个名为enzyme.test.js的测试文件

import React from 'react'
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import Example from '../enzyme'

const {shallow}=Enzyme

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

describe('Enzyme shallow', function () {
    it('Example component', function () {
        const name='按钮名'
        let app = shallow(<Example text={name} />)
       let btnName=app.find('button').text();
       console.log('button Name:'+btnName)
    })
})

为了避免每个测试文件都这么写，我们可以再test目录下新建一个配置文件enzyme_config.test.js。文件内容如下:
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

export default Enzyme;
然后，在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"
}
现在，我们的shallow测试代码可以改为:
import React from 'react'
import Enzyme from './enzyme.config';
import Example from '../enzyme'

const {shallow}=Enzyme

describe('Enzyme shallow', function () {
it('Example component', function () {
const name='按钮名'
let app = shallow()
let btnName= app.find('button').text()
console.log('button Name:'+btnName)
})
})

render()

静态渲染，它将React组件渲染成静态的HTML字符串，然后使用Cheerio这个库解析这段字符串，并返回一个Cheerio的实例对象，可以用来分析组件的html结构.

针对前面的enzyme.js文件，我们的静态渲染测试的代码如下：
import React from 'react'
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import Example from '../enzyme'

const {shallow,mount,render}=Enzyme

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

describe('Enzyme render test', function () {
it('Example render', function () {
const name='按钮名'
let app = render()

    const buttonObj=app.find('button')
    const spanObj=app.find('span')

    console.info(`查找到button的个数：${buttonObj.length}`)
    console.info(`查找到span的个数：${spanObj.length}`)

    buttonObj.text(),spanObj.text()
})

})

mount()

完全渲染，它将组件渲染加载成一个真实的DOM节点，用来测试DOM API的交互和组件的生命周期，用到了jsdom来模拟浏览器环境.

mount渲染用于将React组件加载为真实DOM节点。然而，真实DOM需要一个浏览器环境，为了解决这个问题，我们可以用到jsdom，也就是说我们可以用jsdom模拟一个浏览器环境去加载真实的DOM节点。
首先，使用下面的命令安装jsdom模拟浏览器环境，安装命令如下:

npm install --save-dev jsdom

然后我们添加一个完全渲染的测试代码:
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()

const buttonObj=app.find('button')
const spanObj=app.find('span')

console.info(`查找到button的个数：${buttonObj.length}`)
console.info(`查找到span的个数：${spanObj.length}`)

buttonObj.text(),spanObj.text()
})
})

enzyme 常用的测试函数

simulate(event, mock)：用来模拟事件触发，event为事件名称，mock为一个event object；
instance()：返回测试组件的实例；
find(selector)：根据选择器查找节点，selector可以是CSS中的选择器，也可以是组件的构造函数，以及组件的display name等；
at(index)：返回一个渲染过的对象；
get(index)：返回一个react node，要测试它，需要重新渲染；
contains(nodeOrNodes)：当前对象是否包含参数重点 node，参数类型为react对象或对象数组；
text()：返回当前组件的文本内容；
html()：返回当前组件的HTML代码形式；
props()：返回根组件的所有属性；
prop(key)：返回根组件的指定属性；
state()：返回根组件的状态；
setState(nextState)：设置根组件的状态；
setProps(nextProps)：设置根组件的属性；

码农公寓