Jest（测试框架）
1、什么是Jest
官方文档：https://jestjs.io/docs/en/getting-started
- Jest是 Facebook 的一套开源的 JavaScript 测试框架
- 它对同样是 Facebook 的开源前端框架 React 的测试十分友好。
- 它适用但不局限于使用以下技术的项目：Babel, TypeScript, Node, React, Angular, Vue；
2、安装Jest
-
安装Jest及相关依赖
yarn add --dev jest npm install --save-dev jest babel-jest babel-core babel-preset-env regenerator-runtimebabel-jest、 babel-core、 regenerator-runtime、babel-preset-env这几个依赖是为了可以使用ES6的语法特性进行单元测试
ES6提供的 import 来导入模块的方式，Jest本身是不支持的 -
添加babel.config.js文件
module.exports = function (api) { api.cache(false); if (process.env.NODE_ENV === "test") { console.log("env: " + process.env.NODE_ENV); return { presets: [ "@babel/preset-react", [ "@babel/preset-env", { targets: { "node": process.versions.node }, "modules": "auto", }, "jest", ] ], "plugins": [ ["@babel/plugin-proposal-decorators", {legacy: true}], [ "@babel/plugin-proposal-class-properties", {loose: true} ], "@babel/plugin-proposal-object-rest-spread", //*对象rest、spread语法处理 "@babel/plugin-transform-object-assign", //* "@babel/plugin-syntax-dynamic-import", //import()语法处理 "@babel/plugin-transform-runtime", //自动引入辅助函数 "@babel/plugin-transform-modules-commonjs" //* ] }; } ..... }Babel的配置取决于具体的项目使用场景, 这里根据 NODE_ENV 参数做了区分
-
修改package.json中的test脚本
"scripts": { ... "test": "jest", "test:watch": "npm test -- --watch", "test:coverage": "jest --coverage", } -
开始编写测试用例
demo:test('测试1+2=3', () => { expect(1+2).toBe(3) }) -
测试
npm run test npm run test:watch npm run test -- src/static/js/__tests__/demo.test.js npm run test -- src/static/js/__tests__/demo.test.js -u //--updateSnapshot(更新快照)
3、断言(matchers)
Jest提供了expect函数用来包装被测试的方法并返回一个对象，该对象中包含了一系列的匹配器来让我们更方便的进行断言
- 使用expect及 "matcher" 函数来断言某个值
expect({a:1}).toBe({a:1}) //判断两个对象是否相等 expect(1).not.toBe(2) //判断不等 expect(n).toBeNull(); //判断是否为null expect(n).toBeUndefined(); //判断是否为undefined expect(n).toBeDefined(); //判断结果与toBeUndefined相反 expect(n).toBeTruthy(); //判断结果为true expect(n).toBeFalsy(); //判断结果为false expect(value).toBeGreaterThan(3); //大于3 expect(value).toBeGreaterThanOrEqual(3.5); //大于等于3.5 expect(value).toBeLessThan(5); //小于5 expect(value).toBeLessThanOrEqual(4.5); //小于等于4.5 expect(value).toBeCloseTo(0.3); // 浮点数判断相等 expect('Christoph').toMatch(/stop/); //正则表达式判断 expect(['one','two']).toContain('one'); //数组中是否含有某个元素 expect(fn).toHaveBeenCalled(); expect([1, 2, 3]).toHaveLength(3); expect('grapefruit111').toMatch(/grapefruit/); expect(drinkOctopus).toThrowError('yuck, octopus flavor'); /判断函数抛出的错误 - expect可以扩展,使用expect.extend
expect.extend({ toNaN(received, argument) { if (isNaN(received)) { return { message: () => ( `expected ${received} is NaN` ), pass: true, }; } else { return { message: () => ( `expected ${received} not NaN` ), pass: false, }; } }, }); test('even and odd numbers', () => { expect('d').toNaN(); });
4、Mock功能
在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结果，只想知道它是否被正确调用即可，甚至会指定该函数的返回值。此时，使用Mock函数是十分有必要。
demo:
// 函数
function callback() {
......
}
function forEach(items, callback) {
for (let index = 0; index < items.length; index++) {
callback(items[index]);
}
}
//函数 测试用例
const mockCallback = jest.fn();
forEach([0, 1], mockCallback);
expect(mockCallback.mock.calls.length).toBe(2); // 此模拟函数被调用了两次
expect(mockCallback.mock.calls[0][0]).toBe(0); // 第一次调用函数时的第一个参数是 0
expect(mockCallback.mock.calls[1][0]).toBe(1); //第二次调用函数时的第一个参数是 1
参考链接：https://testerhome.com/topics/15149
5、JSDom
Jest在nod环境下运行，node不具备dom，jest在node环境下自己模拟了一套dom
- 安装jquery, 执行 npm i jquery ，并引入.
- 写测试用例时，可以追溯dom节点来进行测试.
import addDivToBody from './demo';
import $ from 'jquery';
test('测试 addDivToBody', () => {
addDivToBody();
addDivToBody();
expect($('body').find('div').length).toBe(2);
})
6、快照测试 Snapshot Testing
快照是什么
通常涉及UI的自动化测试，思路是把某一时刻的标准状态拍个快照，在测试回归的时候进行pixel to pixel的对比
Jest对React组件的快照有所不同
- 把一个组件给序列化成纯文本， 纯文本的比较
- 对于一个React组件而言， 传入相同的props，我们是期望得到相同的输出， 这样一来，通过构造不同的props, 我们即有了不同的测试用例
- 理想状态中，组件若是无内部状态变化，测试用例覆盖率应该可以达到100%了
Jest 可以在首次执行时可以自动生成快照样本，当测试代码有变化时，还可以通过 jest -u 来更新样本。 生成的样本会放在测试文件同级目录下的 __snapshots__ 文件夹中。
Demo
// Link.react-test.js
import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';
it('renders correctly', () => {
const tree = renderer.create(
<Link page="http://www.facebook.com">Facebook</Link>
).toJSON();
expect(tree).toMatchSnapshot();
});
首次执行，就会生成一个快照文件，在snapshots目录下，在之后的toMatchSnapshot()调用就会与之比较，如有不同，则是用例失败，会打印出具体差异
参考链接：https://imweb.io/topic/592aab6eff03ef1a4ef15c51
7、配置Jest
jest几乎是零配置的，但是接入到项目时需要加几个配置
- 生成一个基础配置文件 jest.config.js
jest --init ./node_modules/.bin/jest --init - 配置项介绍
module.exports = {
"globals": { "NODE_ENV": "test" }, //变量设置
roots: ["<rootDir>"], //默认路径
moduleDirectories:[], //从需要的位置开始递归搜索的目录名
moduleFileExtensions:["js", "json", "jsx", "scss", "css"], //模块使用到的扩展名
moduleNameMapper:[], //需要手动mock的模块名映射表，我理解为别名
modulePathIgnorePatterns: [], //列出的模块忽略
setupFilesAfterEnv: [], //所有用例之前执行的js，初始化操作
testEnvironment:'node', //测试环境 node
testPathIgnorePatterns: [], //测试需要忽略的文件 （好像没起作用）
testMatch:[], //测试文件的格式
transform: [],
transformIgnorePatterns: [],
verbose:true, //是否每一个测试都需要报告
// snapshotSerializers: 快照序列化,enzyme-to-json包需要安装依赖
}
- 配置过程中遇到的问题
8、覆盖率报告
https://stackoverflow.com/questions/26618243/how-do-i-read-an-istanbul-coverage-report
- Statement coverage (每条语名)
- Branch coverage（控制结构的分支）
- Function coverage (每个函数)
- Line coverage（每个可执行行）
9、特点
- 测试用例并行执行，更高效
- 强大的 Mock 功能
- 内置的代码覆盖率检查，不需要在引入额外的工具
- 集成 JSDOM，可以直接进行 DOM 相关的测试
- 配置简单
- 有快照测试功能，可对 React 等框架进行 UI 测试
- 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具
Enzyme（React的测试类库）
1、介绍
工具函数库的封装，可以处理浅渲染(shallow)，静态渲染标记(render)以及DOM渲染(mount)，jQuery 风格的API
2、Enzyme配置
npm install --save-dev react-test-renderer enzyme enzyme-adapter-react-16.2 enzyme-to-json
3、浅渲染 Shallow
将一个组件渲染成虚拟 DOM 对象，但是只渲染第一层，不渲染所有子组件，浅渲染是不依赖 DOM 环境的
import { shallow } from 'enzyme';
describe('Enzyme Shallow', function () {
it('test1', function () {
let app = shallow(<App/>);
expect(app.find('h1').text()).to.equal('Todos');
});
};
4、静态渲染 render
将React组件渲染成静态的HTML字符串，然后分析这段HTML代码的结构，返回一个对象。它跟shallow方法非常像，主要的不同是采用了第三方HTML解析库Cheerio，它返回的是一个Cheerio实例对象。
Cheerio:实现了jQuery的一个子集，去掉了jQuery中所有与DOM不一致或者是用来填浏览器的坑的东西，重现了jQueryAPI
import {render} from 'enzyme';
describe('Enzyme Render', function () {
it('test2', function () {
let app = render(<App/>);
expect(app.find('.todo-done').length).to.equal(0);
});
});
Enzyme的设计就是，让不同的底层处理引擎，都具有同样的API（比如find方法）
5、DOM渲染 mount
mount方法用于将React组件加载为真实DOM节点
6、API
.get(index)：返回指定位置的子组件的DOM节点
.at(index)：返回指定位置的子组件
.first()：返回第一个子组件
.last()：返回最后一个子组件
.type()：返回当前组件的类型
.text()：返回当前组件的文本内容
.html()：返回当前组件的HTML代码形式
.props()：返回根组件的所有属性
.prop(key)：返回根组件的指定属性
.state([key])：返回根组件的状态
.setState(nextState)：设置根组件的状态
.setProps(nextProps)：设置根组件的属性
参考链接
- 介绍和基本使用
https://juejin.im/post/5de5fdd3e51d452515148083 - react测试用例编写包括 action/reducer/components
https://www.redux.org.cn/docs/recipes/WritingTests.html - 覆盖率报告
https://stackoverflow.com/questions/26618243/how-do-i-read-an-istanbul-coverage-report - Mock的使用
https://testerhome.com/topics/15149 - 快照
https://imweb.io/topic/592aab6eff03ef1a4ef15c51
