1

如何使用 @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...
}

如何覆盖上述私有方法中的语句，这些语句创建为作为道具传递给子级并且仅从子级触发？

4

1 回答 1

1

反应测试库的工作方式是模拟真实用户对 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 并模拟该日期选择，这将依次执行此方法。

于 2021-05-31T07:45:48.940 回答