Jest初识——单元测试并自动化报告

准备工作

安装jest

cnpm install --save-dev jest

查看版本

jest -V

确保你的项目已经安装了版本较新的jest测试框架(随版本更迭有可能产生无法预知的BUG，如：配置属性名变更)
已完成对jest配置文件jest.config.js的基本配置

实现单元测试

首先要做的事情：我怎么知道要测试些什么？
如果你正在编写 Web 应用，那么一个好的起点就是测试应用的每个页面和每个用户交互。但 Web 应用由单元代码组成，如函数和组件，需要单独进行测试。很多时候有两种情况：

你正接手一些函数功能未知的祖传代码
你要实现之前没有的新功能

对于这两种情况，你可以通过将测试看作检查给定函数是否产生预期结果来帮助自己。以下是典型测试流程的样子：

导入要测试的函数
给函数输入
定义期望
检查是否按照预期输出

只需这样执行：输入 - 预期输出 - 断言结果

测试用例

以下是一个完整的测试用例

创建js文件，描述测试函数

   //utils.js
   export function fixedZero(val) {
     return val * 1 < 10 ? `0${val}` : val;
   }

创建.test.js文件,添加断言

//utils.test.js
import { fixedZero } from './utils';
...
// describe('函数分组测试描述',() => {
//   test('测试描述', () => {
//       expect("").toBe("");
//   });    
// })

describe('fixedZero tests', () => {
  it('should not pad large numbers', () => {
    expect(fixedZero(10)).toEqual(10);
    expect(fixedZero(11)).toEqual(11);
    expect(fixedZero(15)).toEqual(15);
    expect(fixedZero(20)).toEqual(20);
    expect(fixedZero(100)).toEqual(100);
    expect(fixedZero(1000)).toEqual(1000);
    expect(fixedZero(1000)).toEqual(1000);
  });

  it('should pad single digit numbers and return them as string', () => {
    expect(fixedZero(0)).toEqual('00');
    expect(fixedZero(1)).toEqual('01');
    expect(fixedZero(2)).toEqual('02');
    expect(fixedZero(3)).toEqual('03');
    expect(fixedZero(4)).toEqual('04');
    expect(fixedZero(5)).toEqual('05');
    expect(fixedZero(6)).toEqual('06');
    expect(fixedZero(7)).toEqual('07');
    expect(fixedZero(8)).toEqual('08');
    expect(fixedZero(9)).toEqual('09');
  });
});

在命令行输入npm test utils.test.js，我们可以看到命令台的返回

实现在浏览器上实现测试结果的显示

当我们对一些比较庞大的项目，要进行成百上千个函数进行单元测试时，测试结果仅仅显示在控制台明显不够看。如何优雅的让测试结果展示出来，并可以详细的观察测试结果的具体问题呢？

我们会想到将jest的测试结果 --> 存储 --> 发请求(简单服务器) --> 发送到浏览器 --> 展示

方法

1.我们可以通过nodejs实现但是需要配置一个简单的node服务器，来实现在浏览器显示。但是方法过于繁琐，不在赘述。
2.我们借助于报告工具jest-html-report(本质与第一个方法没有区别，只是这个工具是打包好的，可以直接使用)

参数配置

根据jest官方文档在jest.config.js中有testResultsProcessor属性：

Property	Description	Type	Default
testResultsProcessor	This option allows the use of a custom results processor. This processor must be a node module that exports a function expecting an object with the following structure as the first argument and return it:	string	undefined

这个属性可以允许结果处理程序使用。这个处理器必须是一个输出函数的node模块，这个函数的第一个参数会接收测试结果，且必须在最终返回测试结果。可以用与于接收测试结果，且在最终返回测试结果

首先我们安装它：cnpm install jest-html-report --save-dev

在jest.config.js中，具体配置jest-html-reporter的属性

用到的属性：

Property	Description	Type	Default
pageTitle	The title of the document	string	"Test Suite"
outputPath	The path to where the plugin will output the HTML report	string	"./test-report.html"
includeFailureMsg	If this setting is set to true, this will output the detailed failure message for each failed test.	boolean	false

其他属性参考官方文档：https://github.com/Hargne/jes...

完成jest.config.js中对jest-html-reporter的配置：

       //jest.config.js
       module.exports={
           ...
           testResultsProcessor:'./testReport',
           reporters: [
           'default',
           [
             './node_modules/jest-html-reporter',
             {
               //输出页面标题
               pageTitle: 'Test Report',
               //插件将会输出的HTML报告的路径。
               outputPath:'testReport/JesttestReport.html',
               //为每个失败的测试输出详细的失败消息。
               includeFailureMsg: true,
             },
           ],
         ],
       }

再次在命令行输入npm test utils.test.js，我们可以看到测试结果被成功返回在testReport/JesttestReport.html中

我们打开这个html文件，测试结果的可视化就完成啦。

总结

掌握了实现单元测试的方法
实现了前端单元测试自动化生成报告

参考文章

文档

Jest官方文档:https://jestjs.io/docs/en/getting-started.html
jest-html-reporter官方文档：https://github.com/Hargne/jest-html-reporter/wiki/configuration

Jest初识——单元测试并自动化报告