Jest 测试 React 组件的覆盖率误报解决

阅读时长 6 分钟读完

Jest 测试 React 组件的覆盖率误报解决

前言

在使用 Jest 测试 React 组件时,经常会遇到测试覆盖率报告的误报问题。本文将从实际案例出发,分析 Jest 测试中的代码覆盖率统计原理,探讨覆盖率误报的原因,并提供解决方案。

案例

我们有一个简单的 React 组件 Button

我们想要测试它的覆盖率,于是写了下面这个测试:

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --------- - ---- -------------------------
------ ------ ---- -----------

------------ ------- ----------- -- -- -
  ----- - --------- - - -------------- ----------- -- --------- -------------
  ----------------------- --------------------------
---

------------ ------- ------- -- -- -
  ----- ----------- - ----------
  ----- - --------- - - -------------- --------------------------- -------------
  -------------------------------- ------
  ---------------------------------------------
---

然后我们运行测试,发现覆盖率仅仅达到了 50%:

我们的组件很简单,测试代码也很简单,却只达到了 50% 的覆盖率,这非常令人困惑。

分析

我们观察测试覆盖率报告中的表格,可以发现 Button.js 文件的代码覆盖率情况:

File Statements Branches Functions Lines
src/Button/Button.js 50% 0% 50% 50%

其中 StatementsLines 都是 50%,这就意味着我们的两个测试覆盖率已经完全覆盖了 Button.js 文件的所有代码行,但是另外两个数据项 BranchesFunctions 却为 0%。

Branches 表示 if/else、switch 和三目运算符等分支语句的覆盖情况,而我们的 Button 组件没有任何分支语句,所以这个数据项为 0% 是正确的。

那么为什么 Functions 为 0% 呢?我们的组件中有一个箭头函数,这是一个函数,为什么测试覆盖率报告认为没有覆盖到呢?

答案很简单:因为箭头函数没有被使用过,所以测试覆盖率报告认为它没有被执行过。

解决方案

既然问题的原因已经明确了,解决方案就显而易见了。我们只需要确保所有的代码行都被执行过,那么测试覆盖率就会达到 100%。

回到 Button 组件,我们可以通过点击按钮来触发 onClick 事件,从而执行箭头函数。最终的测试代码如下所示:

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --------- - ---- -------------------------
------ ------ ---- -----------

------------ ------- ----------- -- -- -
  ----- - --------- - - -------------- ----------- -- --------- -------------
  ----------------------- --------------------------
---

------------ ------- ------- -- -- -
  ----- ----------- - ----------
  ----- - --------- - - -------------- --------------------------- -------------
  -------------------------------- ------
  ---------------------------------------------
---

------------ -------- -- ---------- -- -- -
  ----- -- - ----------
  -------------- ------------------ -------------
  ------------------------------------ -- ----- -------- ------ --- -- -------- ---
  
  ----- ------ - ---------------------------------
  ------------------------
  ------------------------------------ -- ----- -------- ------ -- -------- ----
---

我们新增了一个测试用例 Button function is executed,它模拟点击按钮执行 onClick 事件,从而触发箭头函数,最终测试覆盖率达到了 100%:

结语

Jest 作为前端领域最流行的测试框架之一,对于代码覆盖率的统计也提供了方便的支持。但是,测试覆盖率报告中的数据并不是万无一失的,我们需要深入了解原理,才能更好地利用它进行测试和代码质量管理。

通过本文的案例,我们学习了 Jest 测试中的代码覆盖率统计原理,探讨了覆盖率误报的原因,并提供了一种解决方案,希望能给大家在实际开发中提供一些帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67972849504e4ea9bde30ced

纠错
反馈