Jest 测试 React 组件的覆盖率误报解决
前言
在使用 Jest 测试 React 组件时,经常会遇到测试覆盖率报告的误报问题。本文将从实际案例出发,分析 Jest 测试中的代码覆盖率统计原理,探讨覆盖率误报的原因,并提供解决方案。
案例
我们有一个简单的 React 组件 Button
:
import React from 'react'; const Button = ({ onClick, children }) => ( <button onClick={onClick}>{children}</button> ); export default Button;
我们想要测试它的覆盖率,于是写了下面这个测试:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- --------- - ---- ------------------------- ------ ------ ---- ----------- ------------ ------- ----------- -- -- - ----- - --------- - - -------------- ----------- -- --------- ------------- ----------------------- -------------------------- --- ------------ ------- ------- -- -- - ----- ----------- - ---------- ----- - --------- - - -------------- --------------------------- ------------- -------------------------------- ------ --------------------------------------------- ---
然后我们运行测试,发现覆盖率仅仅达到了 50%:
All files 100% covered src/Button/Button.js: Statements 50%, Branches 0%, Functions 50%, Lines 50% Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: ...ms Ran all test suites matching /Button.test.js/i.
我们的组件很简单,测试代码也很简单,却只达到了 50% 的覆盖率,这非常令人困惑。
分析
我们观察测试覆盖率报告中的表格,可以发现 Button.js
文件的代码覆盖率情况:
File | Statements | Branches | Functions | Lines |
---|---|---|---|---|
src/Button/Button.js | 50% | 0% | 50% | 50% |
其中 Statements
和 Lines
都是 50%,这就意味着我们的两个测试覆盖率已经完全覆盖了 Button.js
文件的所有代码行,但是另外两个数据项 Branches
和 Functions
却为 0%。
Branches
表示 if/else、switch 和三目运算符等分支语句的覆盖情况,而我们的 Button
组件没有任何分支语句,所以这个数据项为 0% 是正确的。
那么为什么 Functions
为 0% 呢?我们的组件中有一个箭头函数,这是一个函数,为什么测试覆盖率报告认为没有覆盖到呢?
答案很简单:因为箭头函数没有被使用过,所以测试覆盖率报告认为它没有被执行过。
解决方案
既然问题的原因已经明确了,解决方案就显而易见了。我们只需要确保所有的代码行都被执行过,那么测试覆盖率就会达到 100%。
回到 Button
组件,我们可以通过点击按钮来触发 onClick
事件,从而执行箭头函数。最终的测试代码如下所示:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- --------- - ---- ------------------------- ------ ------ ---- ----------- ------------ ------- ----------- -- -- - ----- - --------- - - -------------- ----------- -- --------- ------------- ----------------------- -------------------------- --- ------------ ------- ------- -- -- - ----- ----------- - ---------- ----- - --------- - - -------------- --------------------------- ------------- -------------------------------- ------ --------------------------------------------- --- ------------ -------- -- ---------- -- -- - ----- -- - ---------- -------------- ------------------ ------------- ------------------------------------ -- ----- -------- ------ --- -- -------- --- ----- ------ - --------------------------------- ------------------------ ------------------------------------ -- ----- -------- ------ -- -------- ---- ---
我们新增了一个测试用例 Button function is executed
,它模拟点击按钮执行 onClick
事件,从而触发箭头函数,最终测试覆盖率达到了 100%:
All files 100% covered src/Button/Button.js: Statements 100%, Branches 0%, Functions 100%, Lines 100% Test Suites: 1 passed, 1 total Tests: 3 passed, 3 total Snapshots: 0 total Time: ...ms Ran all test suites matching /Button.test.js/i.
结语
Jest 作为前端领域最流行的测试框架之一,对于代码覆盖率的统计也提供了方便的支持。但是,测试覆盖率报告中的数据并不是万无一失的,我们需要深入了解原理,才能更好地利用它进行测试和代码质量管理。
通过本文的案例,我们学习了 Jest 测试中的代码覆盖率统计原理,探讨了覆盖率误报的原因,并提供了一种解决方案,希望能给大家在实际开发中提供一些帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67972849504e4ea9bde30ced