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

 阅读约 9 分钟

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,我们可以看到命令台的返回
ceshi.png


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

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

我们会想到将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文件,测试结果的可视化就完成啦。
testreport.png


总结

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

参考文章

文档

阅读 303更新于 2019-10-28

推荐阅读
目录