使用Jest进行前端单元测试

4 分钟

对于逻辑复杂、迭代频繁的前端项目,进行单元测试很有必要。

这样可以节省大量E2E测试的时间,保证代码的可靠性,量化评估研发团队、测试团队的产出。

1. 选型

常见的前端单元测试框架,有Mocha、Jasmine、Jest。我的选型思路如下:

  • Mocha不自带断言,需要结合其他断言库才可使用。Jasmine、Jest自带断言;
  • Github上,Star数分别是:Mocha 20.4k,Jasmine 15.1k,Jest 34.7k;
  • Jest由Facebook出品。

综上,选择Jest。

2. 覆盖率报告

先说重点:

  • Jest自带HTML格式的覆盖率报告,没有必要再安装jest-html-reporter这种第三方库。
  • 要生成HTML覆盖率报告,需要手动修改Jest配置文件。

先配置一下Jest。如果按照官网的教程,直接执行jest --init会报错。应该执行:

npx jest --init

选择需要覆盖率报告:

配置完成后,会生成一个jest.config.js文件。

执行npm test,还是没有覆盖率报告:

还得修改jest.config.js文件,将 collectCoverage设置为true,并解除注释:

// Indicates whether the coverage information should be collected while executing the test
collectCoverage: true,

再次执行npm test,控制台就会展示覆盖率情况了:

同时,Jest会生成一个coverage目录,其子目录lcov-report内的index.html就是HTML格式的覆盖率报告了:

3. 第三方覆盖率报告

如果想要使用jest-html-reporter这个第三方库生成覆盖率报告,也不要按它主页所说的进行配置。直接在package.json新增如下配置最方便:

"jest": {
  "reporters": [
    "default",
    ["./node_modules/jest-html-reporter", {
      "pageTitle": "Test Report"
    }]
  ]
}

jest-html-reporter生成的覆盖率报告如下:

对比一下,还是Jest原生的覆盖率报告信息更全、样式更美观。

4. 量化评估产出

看覆盖率报告即可:

  • 覆盖率不够:测试团队需要补充测试用例;
  • 通过率不是100%:研发团队需要修正bug,提高代码质量。

版权所有 © 2021 Shiau. 以商业目的使用本网站内容需获许可。非商业使用本网站内容需遵循知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议。All content is made available under the CC BY-NC-ND 4.0 for non-commercial use. Commercial use of this content is prohibited without explicit permission.

Powered by hexo with theme moderate.