一、搭建和配置
npm install jest --save-dev
npm install enzyme --save-dev
npm install enzyme-adapter-react-16 --save-dev
// es6 es7 tytpescript 语法转换
npm install babel-jest ts-jest --save-dev
// 为快照提供了json的组件格式
npm install enzyme-to-json --save-dev
// mock canvas
npm install jest-canvas-mock --save --dev
1.环境配置
// 在根目录创建jest.config.js并添加配置项module.exports = { 配置项 }
module.exports = {
preset: "react-native",
...
}
moduleFileExtensions 设置Jest要执行测试文件的类型
moduleFileExtensions: ['ts','tsx','js','jsx']
transform设置一个入口，来告诉 Jest 要测试的资源 文件
// 如果项目中采用typescript为技术栈，需要设置ts-jest转译代码
"^.+\\.(ts|tsx)$": "ts-jest",
// 设置babel-jest转译es6 es7代码
"^.+\\.(js|jsx)$": "babel-jest",
// Jest环境不能处理css和图片文件，需要通过工具来mock
"^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
项目使用webpack配置的alias如何兼容？ 配置如下：
// Resolve alias in Jest not working
moduleNameMapper
"^Controller/(.*)$": "<rootDir>/src/controller/$1",
"^Service/(.*)$": "<rootDir>/src/service/$1",
"^Store/(.*)$": "<rootDir>/src/store/$1",
"^Styles/(.*)$": "<rootDir>/src/styles/$1",
"^Router/(.*)$": "<rootDir>/src/router/$1",
"^Common/(.*)$": "<rootDir>/src/common/$1"
};
transformIgnorePatterns 配置不忽略这些es库, 从而使babel-jest/jest-ts去处理它们
transformIgnorePatterns: [
"node_modules/(?!(react-native|react-native-button|react-router-native/)"
]
展示单元测试覆盖率
collectCoverage: true
设置Jest配置文件
setupFiles: [
"<rootDir>/node_modules/jest-canvas-mock",
"<rootDir>/jest.setup.js"
],
项目在中有使用到webpack.DefinePlugin插件在打包时根据运行环境动态注入的一些配置项，在单元测试如何去配置呢？
// A set of global variables that need to be available in all test environments
globals: {
__PAF_STAGE__: 16,
__ISUSEI18N__: true
__DEV__: true,
...
}
testRnviroment 测试环境，默认值是：jsdom，可修改为node
testEnvironment: 'jsdom'
rootDir 默认值：当前目录，一般是package.json所在的目录。
rootDir: ' '
enzyme配置，在Jest.setup.js添加如下配置
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
备注： 项目中常用的Jest环境配置的主要注意的配置项都已经说明清楚了，配置好这些你的项目环境配置基本可以运行了，接下来就可以写测试用例了，在写测试用例前，有必要跟大家介绍下Jest和enzyme在使用的时候注意点～
2、Jest Matchers
Matchers俗称断言库，例如上面的expect().toBe()便是其中之一，其他常见用法如下：
1.相等断言
toBe(value)： 比较数字、字符串
toEqual(value)： 比较对象、数组
toBeNull()
toBeUndefined()
2.包含断言
toHaveProperty(keyPath, value)： 是否有对应的属性
toContain(item)： 是否包含对应的值，括号里写上数组、字符串
toMatch(regexpOrString)： 括号里写上正则
3.逻辑断言
toBeTruthy()
toBeFalsy()
在JavaScript中，有六个falsy值：false，0，''，null， undefined，和NaN。其他一切都是Truthy。
toBeGreaterThan(number)： 大于
toBeLessThan(number)： 小于
4.not
取反，用法见下面例子
test('matchers',()=>{
const a = {
hello: 'jest',
hi :{
name: 'jest'
}
}
const b = {
hello: 'jest',
hi:{
name: 'jest'
}
}
// 以下结果均为true
expect(a).toEqual(b)
expect([1,2,3]).toEqual([1,2,3])
expect(null).toBeNull()
expect([1,2,3]).toContain(1)
expect(b).toHaveProperty('hi')
expect('123').toContain('2')
expect('123').toMatch(/^\d+$/)
expect('123').not.toContain('4')
})
使用npx jest测试执行，结果为passed
3、enzyme支持三种方式的渲染：
浅渲染shallow
前面说过，Shallow Rendering用于将一个组件渲染成虚拟DOM对象，但是只渲染第一层，不渲染所有子组件，所以处理速度非常快。并且它不需要DOM环境，因为根本没有加载进DOM。完全渲染mount
mount渲染用于将React组件加载为真实DOM节点。然而，真实DOM需要一个浏览器环境，为了解决这个问题，我们可以用到jsdom，也就是说我们可以用jsdom模拟一个浏览器环境去加载真实的DOM节点。 首先，使用下面的命令安装jsdom模拟浏览器环境，安装命令如下：
npm install --save-dev jsdom复制代码
- 静态渲染render
render静态渲染，主要用于将React组件渲染成静态的HTML字符串，然后使用Cheerio这个库解析这段字符串，并返回一个Cheerio的实例对象，可以用来分析组件的html结构。
shallow是最快的，这是因为shallow的局限性，只渲染第一层，不渲染所有子组件。事实证明，render的效率是mount的两倍。 那么问题来了，mount存在的价值是什么？当然是有价值的，shallow和mount因为都是dom对象的缘故，所以都是可以模拟交互的。
常用函数
enzyme中有几个比较核心的函数需要注意，如下：
- simulate(event, mock)：用来模拟事件触发，event为事件名称，mock为一个event object；
- instance()：返回测试组件的实例；
- find(selector)：根据选择器查找节点，selector可以是CSS中的选择器，也可以是组件的构造函数，以及组件的display name等；
- at(index)：返回一个渲染过的对象；
- get(index)：返回一个react node，要测试它，需要重新渲染；
- contains(nodeOrNodes)：当前对象是否包含参数重点 node，参数类型为react对象或对象数组；
- text()：返回当前组件的文本内容；
- html()： 返回当前组件的HTML代码形式；
- props()：返回根组件的所有属性；
- prop(key)：返回根组件的指定属性；
- state()：返回根组件的状态；
- setState(nextState)：设置根组件的状态；
- setProps(nextProps)：设置根组件的属性；
开发过程中遇到的问题：
1、TypeError: environment.setup is not a function
FAIL __test__/app.test.tsx
● Test suite failed to run
TypeError: environment.setup is not a function
at node_modules/jest-runner/build/run_test.js:112:23
解决方案：
报这种错误可能有些许多原因，我的项目是由于我们对React-native 0.52版本 做了深度改造，造成最新的Jest 24版本不兼容，降级的Jest23版本正常运行
总结：
