写给自己看的jest+enzyme测试教程

作者 likaiqiang 日期 2019-08-11
写给自己看的jest+enzyme测试教程

jest

Jest 是 FaceBook 用来测试 JavaScript 应用的一套测试框架(注意jest是框架)。可以用来测试react

安装jest

局部安装

npm install –save-dev jest

使用npm script或者npx jest来启动jest,jest会自动检索项目中的测试文件。可以通过配置jest来自定义测试目录与测试文件类型。

全局安装

npm install jest -g

配置jest

通过在项目根目录下创建jest.config.js来配置jest

常用配置

配置jest的检索目录与文件

testMatch: ['<rootDir>/**/__tests__/**/*.unit.(js|jsx|ts|tsx)']

配置jest的启动文件,即每运行一个测试文件前都要先运行这个文件,可以写一些通用的代码。

setupFiles: ["<rootDir>tests/setupTests.js"]

jest-babel

jest是不支持ES6语法的,可以安装jest-babel来解决这个问题,默认jest-babel会读取项目根目录下的.babelrc来读取babel配置。

可以配置transform选项来指定jest-babel的目标文件

transform: {
"^.+unit\\.(js|jsx)$": "babel-jest"
}

jest的语法

jest使用Matchers(匹配器)来测试各种代码,具体的文档可以看这里

jest还支持UI测试,即快照测试。初次运行测试文件,jest会生成一个描述该测试用例dom结构的文件。以后每次运行该测试用例都会与第一次生成的描述文件做对比,这在代码重构时非常有用。具体文档可以看这里

enzyme

jest对UI交互测试有点力不从心,但是这是enzyme的强项。enzyme的语法时类jquery的,可以进行各种模拟dom操作。它的方法分为三类:render、mount、shallow

render会把组件渲染成真正的html。而mount与shallow仅仅把组件渲染成虚拟dom,mount与shallow的区别,前者会渲染所有组件(当前组件与子组件),后者仅仅渲染当前组件。

jest-enzyme

enzyme固然强大,但是却引入了另一套语法,这时就需要jest-enzyme,把enzyme的方法加到jest的原型上,即用jest的方式调用enzyme。