React 测试 Enzyme

原文地址：https://www.cnblogs.com/vvjiang/p/8599980.html

参考地址：https://www.cnblogs.com/susu8/p/9512393.html

 

Enzyme是用于React的测试，需搭配其他单元测试使用

 

安装

安装enzyme

npm install --save-dev enzyme

安装对应配适器

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

配适器对应react的列表

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

 

基本示例（搭配Jest）

import React from 'react'

import Enzyme from 'enzyme'

import Adapter from 'enzyme-adapter-react-16'



// 配置配适器

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



const {shallow}=Enzyme



test('test1', function () {

    let button = shallow(<button>test</button>);



    expect(button.text()).toEqual("test");

})

Shallow方法

Shallow将一个组件渲染成虚拟DOM对象，但是只渲染第一层，不渲染所有子组件

 

mount方法

mount方法用于将React组件加载为真实DOM节点。然而真实DOM需要一个浏览器环境，为了解决这个问题，我们可以用到jsdom

安装jsdom：

npm install --save-dev jsdom

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

import jsdom from 'jsdom';

const { JSDOM } = 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;

}

将setup.js配置到jest（运行每个测试文件前先运行setup.js）

setupFiles:["<rootDir>/test/setup.js"],

mount的使用方法和Shallow一样

 

wrapper对象

shallow和mount返回的是wrapper对象，其具有的方法如下：

（详细Api地址http://airbnb.io/enzyme/docs/api/ShallowWrapper/at.html）

.get(index)：返回指定位置的子组件的DOM节点

.at(index)：返回指定位置的子组件

.first()：返回第一个子组件

.last()：返回最后一个子组件

.type()：返回当前组件的类型

.text()：返回当前组件的文本内容

.html()：返回当前组件的HTML代码形式

.props()：返回根组件的所有属性

.prop(key)：返回根组件的指定属性

.state([key])：返回根组件的状态

.setState(nextState)：设置根组件的状态

.setProps(nextProps)：设置根组件的属性

.instance()：返回我们React类的实例，包含我们自定义定义的React类的方法