使用@ testing-library / react（react-testing-library）进行单元测试分支覆盖率（100％）

Question

如何使用@ testing-library / react（react-testing-library）在单元测试中覆盖所有分支（100％）。

以下是一些情况

1. 条件陈述

   const num = getNum();
   if(num%2 === 0){
     statements...
   } else {
     statements...
   }
   

如何在if和else分支中覆盖语句？

1. 组件中的私有方法

   const onDateSelectorChange = (elem, value) => {
     statements...
   } 
   

如何覆盖上述私有方法中的语句，这些语句被创建为作为道具传递给子对象和 仅由孩子触发？

Answer 1

react 测试库的工作方式是模拟真实用户对 Web 应用程序的使用。这样一来，人们就不需要在每次对代码进行底层更改或出于性能原因重新格式化代码时更新他们的测试，直到功能发生更改。 为了实现这个反应测试库，提供了多种方法来帮助模拟用户交互行为。例如。 fireEvent、onChange、userEvent 等

简而言之，要增加分支覆盖率，您必须以所有分支中的代码都执行的方式将数据传递给不同的测试。 例如下面：

const num = getNum();
if(num%2 === 0){
  statements...
} else {
  statements...
}

您需要以这样的方式模拟 num，对于一个测试，num 的值将 num % 2 设为零，这将覆盖 if 部分，然后在另一个测试中需要模拟 num 值，以便执行到 else 部分.这样就可以覆盖两个块中的语句。 对于组件中的私有方法，您可以利用反应测试用户交互方法并尝试以真实用户交互的方式与 DOM 交互。假设在选择日历中的新日期时触发了方法 const onDateSelectorChange = (elem, value) => { statements... } ，请尝试使用 fireEvent 并模拟该日期选择，该日期选择将依次执行此方法。