1.文档说明
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"
}
},测试：
