Jest测试React组件入门

一、引入

• 本文介绍一个基于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'

    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.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$": "/__mocks__/styleMock.js"
    }
  },

测试：

成功示例