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.jsmodulerules 字段 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.jsximport './index.css',CSS并不是以模块的形式引入的。所以我们需要自定义Mocks屏蔽CSS,具体如下:

  • 在根目录下新建__mocks__并新建styleMock.js,内容为:
module.exports = {}
  • package.json中添加字段
"scripts":{...
},
"jest": {
    "moduleNameMapper": {
      "\\.css$": "<rootDir>/__mocks__/styleMock.js"
    }
  },

测试:

成功示例

推荐阅读更多精彩内容