React前端功能测试覆盖率统计-插桩

最新推荐文章于 2024-03-10 11:58:05 发布

置顶唐伯虎点蚊香dw

最新推荐文章于 2024-03-10 11:58:05 发布

阅读量2.5k

点赞数

分类专栏： Java从开发到设计文章标签： react istanbul 覆盖率

本文链接：https://blog.youkuaiyun.com/dw147258dw/article/details/109338424

版权

Java从开发到设计专栏收录该内容

81 篇文章 ¥299.90 ¥399.90

订阅专栏

超级会员免费看

本文详细介绍了如何在React项目中进行功能测试覆盖率的统计，重点讲解了使用istanbul进行代码插桩的方法，包括针对node项目和React项目的具体步骤。在React项目中，由于插桩和编译的问题，作者尝试了nyc和babel-plugin-istanbul，并解决了样式丢失和编译错误等问题，最终实现了覆盖率的准确统计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.React工程插桩教程
对于前端的覆盖率统计，单元测试的可以i通过jest和Enzyme配合进行单元测试并统计覆盖率，但是现在说的覆盖率主要是指功能测试的覆盖率。
而对于功能测试的测试覆盖率，肯定是需要进行代码插桩然后统计代码执行的密度，进行覆盖率统计，而插桩的库主流的就是istanbul
一，对于node项目
可以使用istanbul-middleware来进行插桩以及覆盖率统计，可以参考样例https://github.com/chenhengjie123/middleware-browser-coverage-demo
在依赖中添加istanbul-middleware和nopt，
然后使用istanbulMiddleware.hookLoader(__dirname , {verbose:true})来注入钩子返回插桩代码
app.use('/coverage', coverage.createHandler({ verbose: true, resetOnGet: true }));
app.use(coverage.createClientHandler(publicDir, { matcher: matcher }));
暴露/coverage来获取覆盖率，然后可以通过远程请求获取覆盖率或这定时i上报采集分析覆盖率，覆盖率信息保存至全局变量window.__coverage__中

二，对于React项目
因为React是属于客户端，re