一、引入
- 本文介绍一个基于
enzyme测试React的例子
import { shallow, mount, render } from 'enzyme'
二、介绍
- shallow render — 仅渲染一层，不渲染子组件，他返回虚拟 DOM 对象，不能进行 DOM 操作（一般用于Item）
- full dom render — 真正的 DOM 渲染，可以操作 DOM ，很常用（一般用于Input、List）
三、演示（以shallow render为例）
1.下载demo
demo下载地址
2.配置
- 克隆代码
-
npm i安装依赖 - 安装测试所需要的包
npm i react-test-renderer enzyme enzyme-adapter-react-16 jest -D
3.根目录下新建.babelrc文件，文件内容为：
{
"presets":[
"es2015",
"react"
]
}
- 此内容本为
webpack.config.js中module的rules字段babel的编译配置。因为Jest测试需要调用.babelrc文件，因此需要配置
4.在要测试的组件目录下新建__test__文件夹，并在文件夹里新建**.test.jsx（零配置的前提下），并添加测试
- 例如，为了测试
item组件，新建src/item/__test__/item.test.jsx，文件内容为：
import React from 'react'
import Enzyme,{shallow} from 'enzyme' //本例子只以shallow(浅渲染，只渲染父组件)为例
import Item from '../../item' //导入需测试的组件
import Adapter from 'enzyme-adapter-react-16'; //适应React-16
Enzyme.configure({ adapter: new Adapter() }) //适应React-16，初始化
test('Item',()=>{
const item = shallow(<Item item="test"/>); //传入数据'item'
expect(item.text()).toBe('test')
expect(item.hasClass('item')).toBe(true)
expect(item.hasClass('item-selected')).toBe(false)
})
test('Item Clicked',()=>{
const item = shallow(<Item item="test" />)
item.simulate('click')
expect(item.hasClass('item')).toBe(true)
expect(item.hasClass('item-selected')).toBe(true)
})
测试（必定出错，请往下看）：
出错示例
5.以上出错是因为没屏蔽CSS，因为在index.jsx中import './index.css'，CSS并不是以模块的形式引入的。所以我们需要自定义Mocks屏蔽CSS，具体如下：
- 在根目录下新建
__mocks__并新建styleMock.js，内容为：
module.exports = {}
- 在
package.json中添加字段
"scripts":{...
},
"jest": {
"moduleNameMapper": {
"\\.css$": "<rootDir>/__mocks__/styleMock.js"
}
},
测试：
成功示例
