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

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

---

准备工做

安装jest

cnpm install --save-dev jest

查看版本

jest -V

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

---

实现单元测试

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

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

对于这两种状况，你能够经过将测试看做检查给定函数是否产生预期结果来帮助本身。 如下是典型测试流程的样子：

1. 导入要测试的函数
2. 给函数输入
3. 定义指望
4. 检查是否按照预期输出

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

测试用例

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

• 建立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的测试结果转移到页面上
• 关于 jest 测试结果如何在浏览器上显示的问题

文档

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