在现代的 Web 开发中,测试是一个非常重要的环节。测试可以保证代码的稳定性和可维护性,也可以提高团队的生产力。而测试覆盖率又是测试中一个非常重要的指标。在这个领域,istanbul 无疑是一个非常优秀的工具,它可以检测出代码中哪些行、函数、分支没有被覆盖到,并可以生成相应的报告。
但是,istanbul 的使用也有一些问题。比如它默认只支持 mocha 和 jasmine 两种测试框架,而不支持其他的框架。同时,它在浏览器环境下的使用也不是很方便。这时候,一些社区给出了解决方案,其中一个比较好的方案就是 buster-istanbul。
buster-istanbul 概述
buster-istanbul 是一个通过 buster 测试框架来使用 istanbul 的工具。它可以让我们非常方便地在浏览器环境下进行测试,并生成测试覆盖率报告。
buster-istanbul 在做浏览器测试时可以分为两步:
- 在测试服务器的中间件层,通过 istanbul 来收集测试覆盖率数据;
- 在测试结束后,通过 istanbul 生成测试覆盖率报告。
buster-istanbul 的使用
在开始使用 buster-istanbul 之前,需要满足以下条件:
先看一下 buster-istanbul
的安装过程:
npm install buster-istanbul --save-dev
在你的 buster.js
配置文件中,添加一个 middleware
具体的项目配置:
-- -------------------- ---- ------- ------ - --------------- ---------- ------- - - ------------ ---------- --------- ------ -------- - -------------- ------------- -- ------ - ------------------- -- ------------------ - ---------------- ----------- -------- -------- - --
其中的 "buster-istanbul"
段配置了 buster-istanbul 的一些详细信息。"outputDirectory"
表示生成的覆盖率结果保存在哪个目录,"formats"
则表示生成哪些格式的覆盖率报告。我们可以选择生成多个格式的报告,比如:["lcov", "cobertura", "html"]
。
然后,我们在控制台中执行 npm run test
命令即可开始测试,同时生成相应的覆盖率报告。覆盖率报告默认是在 coverage
目录下的。
当然,如果你希望在开发过程中,看到覆盖率的具体情况,可以通过自定义 broswer-env
的方法,将覆盖率报告注入到测试页面中,代码如下:
-- -------------------- ---- ------- --- --- - ------------------------------ --- - - -------------------------------------- --- -- - -------------- -------------- - ------------ ------------ ---------------------- ------ -------- -------- ----- - ------------------------- - - ---------------- ----------- -------- --------- ----------------- -------------------- --------- --------------- -- --------------------------------------------- -------- ------------ - -------------------------------------- -------------------------------------------------- - ------------------ --------- ------- --- - ---
值得注意的是,中间件 buster-istanbul
会向被测试的页面注入覆盖率分析的脚本,而浏览器可能会有同源策略等问题,所以需要进行额外的配置。
总结
使用 buster-istanbul 可以让我们非常方便地在浏览器环境下进行测试,并生成测试覆盖率报告。相比直接使用 istanbul,使用 buster-istanbul 还可以在测试环境中收集覆盖率数据,生成覆盖率报告等等方便的功能。特别是在一些需要进行集成测试的场景中,更是非常有用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedb640b5cbfe1ea06114ef