Jest框架

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-runtime
```
babel-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(
    Facebook
  ).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: [""], //默认路径
    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();
    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();
    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