Question

我试图想出一种方法来测试一个使用辅助函数的组件方法，如下所示：

handleUserClick = e => {
  this.setState({ somePieceOfState: e.target.value }, () => {
    someHelperFn(e.target.value);
  });
}

这是一个粗略的例子，但基本上现在我有整个组件的代码覆盖率（Jest），除了调用辅助函数的行。我不知道如何将帮助函数单独导入测试文件也可能有所帮助，所以我很难过。

编辑：我认为这是一个广泛的问题，关于如何测试使用辅助函数或不组件方法的函数的组件，而不是特别针对上述示例。

根据要求，这里仔细看看被调用的函数：

const someHelperFn = params => {
  const BASE_URL = '/api/public/log-client-event';
  const queryString = generateQueryString(params);
  const logClientRequest = new XMLHttpRequest();
  logClientRequest.open('GET', `${BASE_URL}${queryString}`);
  logClientRequest.send();
  return logClientRequest;
};

它没有返回值。看起来好像Jest抱怨，因为它存在于React组件中，并且没有办法实际测试它（我知道）。

Answer 1

在这个例子中，您提供了模拟XMLHttpRequest的示例。然后，您将测试在调用handleUserClick时调用它。这取决于帮助函数如何测试它，但它们几乎肯定是一种方式。

伊斯坦布尔（不是开玩笑）抱怨，因为你没有实际执行我想象的功能的测试，所以它标记为没有任何测试覆盖。

对于测试所有辅助函数来获得确定的答案真是太宽泛了。

修改

如果你必须测试辅助函数并且不能像我上面那样在内部进行测试，那么你可以使用proxyQuire作为最后的手段来模拟辅助函数进入间谍，然后检查它是否被调用。我不会这样做，因为它可能会变得混乱。

使用Enzyme测试导入React组件的函数

1 个答案: