jest 查看测试报告和代码覆盖率

前提是 项目已经接入了 jest;

如何接入?

查看 官方文档 jest

脚本命令

package.json中配置脚本命令

"scripts": {
    "test": "jest",
    "test:coverage": "jest --coverage"
  },

npm run test 是跑ut的命令

执行npm run test:coverage即可查看ut覆盖率。

怎样看到测试报告

1. 运行脚本 执行 npm run test:coverage命令后，项目的根目录下会生成 \coverage 文件夹 其文件结构如图所示

其中 \Icov-report下的index.html文件 即是生成的测试报告。

2. 在浏览器中打开报告查看

在 vscode 中安装拓展插件 open in browser

安装后，在index.html文件中右键选择 在浏览器中打开（快捷键 option + B）就可以看到测试报告

看懂测试报告

这是报告总览，可以看到各个目录下的覆盖情况。
Filter 可以用来快速筛选；
点进其中一个目录

可以看到各个文件夹下的覆盖情况，打开其中一个文件查看

可以看到一些高亮和提示，这些就是有问题的地方，鼠标hover上去能看到具体的错误提示。 如，红色高亮表示该用例未覆盖

黄色高亮表示该分支条件未覆盖

E 标志 表示else路径未覆盖

等，其他可hover查看详细信息；

更新报告

根据报告，可以补充测试用例，提高ut覆盖率。 每次修改用例之后，重新执行 npm run test:coverage 命令即可更新报告，原来打开的浏览器页面会自动更新。