Jest介绍-单元测试和自动化报告准备安装jestcnpminstall--save-devjest查看版本jest-V确保你的项目安装了更新版本jest测试框架（不可预测bug可能会随着版本的变化而出现，例如：配置属性名称的变化）已经完成jest配置文件jest.config.js的基本配置，实现单元测试。要做的第一件事：我怎么知道要测试什么？如果您正在编写Web应用程序，一个好的起点是测试应用程序的每个页面和每个用户交互。但是Web应用程序由需要单独测试的代码单元组成，例如功能和组件。很多时候有两种情况：您正在接管一些功能未知的遗留代码您正在实现以前不存在的新功能在这两种情况下，您都可以通过将测试视为检查给定功能是否产生预期结果来帮助自己。下面是一个典型的测试流程：导入要测试的函数定义函数输入的期望检查输出是否符合预期像这样执行：输入-预期输出-断言结果测试用例下面是一个完整的测试case创建一个描述测试的js文件Function//utils.jsexportfunctionfixedZero(val){returnval*1<10?`0${val}`:val;}创建一个.test.js文件并添加断言//utils.test.jsimport{fixedZero}from'./utils';...//describe('函数分组测试描述',()=>{//test('测试描述',()=>{//expect("").toBe("");//});//})describe('fixedZero测试',()=>{it('应该不填充大数字',()=>{expect(fixedZero(10)).toEqual(10);expect(fixedZero(11)).toEqual(11);expect(fixedZero(15)).toEqual(15);期望（fixedZero（20））。toEqual（20）；期望（fixedZero（100））。toEqual（100）；期望（fixedZero（1000））。toEqual（1000）；期望（fixedZero（1000））。toEqual（1000）);});it('应该填充单个数字并将它们作为字符串返回',()=>{expect(fixedZero(0)).toEqual('00');expect(fixedZero(1)).toEqual('01');期望(fixedZero(2)).toEqual('02');期望(fixedZero(3)).toEqual('03');期望（固定零（4））。toEqual（'04'）;期望（固定零（5））.toEqual（'05'）;expect(fixedZero(6)).toEqual('06');期望（fixedZero（7））.toEqual（'07'）;期望（fixedZero（8））.toEqual（'08'）;期望（固定零（9））.toEqual（'09'）;});});在命令行输入npmtestutils.test.js，我们可以看到命令控制台的返回，实现了在浏览器上显示测试结果当我们对一些比较大的项目要执行上百个功能的时候，在进行单元测试的时候，测试结果只显示在控制台上，这显然是不够的。如何优雅的展示测试结果，详细观察测试结果的具体问题？我们会想到jest测试结果-->存储-->发送请求（简单服务器）-->发送到浏览器-->显示方法1.我们可以通过nodejs实现但是需要配置一个简单的node服务器来实现显示在浏览器中。但方法过于繁琐，这里不再赘述。2、我们使用报表工具jest-html-report（本质和第一种方法一样，只是这个工具是封装好的，可以直接使用）参数配置根据jest官方文档，jest中有一个testResultsProcessor属性。config.js：PropertyDescriptionTypeDefaulttestResultsProcessor此选项允许使用自定义结果处理器。该处理器必须是一个节点模块，该模块导出一个函数，该函数期望具有以下结构的对象作为第一个参数并返回它：stringundefined此属性允许使用结果处理器。这个处理程序必须是一个输出函数的节点模块，这个函数的第一个参数将接收测试结果，最后必须返回测试结果。可以用来接收测试结果，最后返回测试结果。首先，我们安装它：cnpminstalljest-html-report--save-dev在jest.config.js中，具体配置jest-html-reporter的属性使用Property：PropertyDescriptionTypeDefaultpageTitle文档的标题string"TestSuite"outputPath的路径到插件将输出HTMLreportstring的位置。/test-report.html"includeFailureMsg如果此设置设置为true，这将输出每个失败的详细失败消息test.booleanfalse的其他属性参考官方文档：https：//github.com/Hargne/jes...完成jest.config.js中jest-html-reporter的配置：//jest.config.jsmodule.exports={...testResultsProcessor:'./testReport',reporters:['default',['./node_modules/jest-html-reporter',{//输出页面标题pageTitle:'测试报告',//插件将输出HTML报告的路径。outputPath:'testReport/JesttestReport.html',//为每个失败的测试输出详细的失败消息。includeFailureMsg:true,},],],}再次在命令行输入npmtestutils.test.js，可以看到测试结果成功返回。在testReport/JesttestReport.html中，我们打开这个html文件，可视化测试结果就可以了。总结掌握了实现单元测试的方法实现了前端单元测试的自动生成报告参考文章HowtotransferjesttestresultstothepageJest测试结果如何在浏览器上显示的文档Jest官方文档：https://jestjs。io/docs/en/getting-started.htmljest-html-reporter官方文档：https://github.com/Hargne/jest-html-reporter/wiki/configuration
