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

Question

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

const Test: React.FC = () => {

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

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

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

score 0 · Accepted Answer

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

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

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

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

1 回答 1