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

【问题标题】：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 进行单元测试，这可能是一种测试反模式。

【讨论】：