直接在功能组件中测试功能

Posted 2023-02-21

【中文标题】直接在功能组件中测试功能

【英文标题】：Testing functions directly in Functional component

【发布时间】：2020-07-17 08:40:16

【问题描述】：

假设我们有如下功能组件。

const Test: React.FC = () => 

  const isItemSelected = () =>  console.log('Hi); ;

  return (
  <div> </div>
  );
;

我想在编写单元测试时直接调用 isItemSelected 函数，而不模拟任何单击或更改事件。有可能吗？

【参考方案1】：

在不使用任何额外框架进行测试的情况下轻松完成此操作的一种方法是获取您的业务逻辑并将其与实际的 React 组件分开，因此在您的情况下，您可以这样定义您的函数：

const isItemSelected = () =>  console.log('Hi'); ;
const Test: React.FC = () => 

  return (
  <div> </div>
  );
;

现在您可以为 isItemSelected 编写简单的单元测试。如果您的函数中有依赖关系，比如说“setState”，您可以将其作为参数传递给您的函数。但是请注意，如果您实际上没有任何逻辑，那么您正在尝试对通常不需要的 UI 进行单元测试，这可能是一种测试反模式。

另见：http://blog.codepipes.com/testing/software-testing-antipatterns.html

【讨论】：

嗨 Ali，不，我需要将该功能保留在 React 组件中。

你真的不知道，如果你愿意，你可以发布一个完整的例子

实际上，我要测试的函数作为道具传递给另一个组件，并从那里触发该函数。我们现在不能修改设计。我们需要提高代码覆盖率，所以我们现在正在编写单元测试。