使用 Enzyme 测试导入到 React 组件中的函数答案

【问题标题】：Testing a function imported into a React component with Enzyme使用 Enzyme 测试导入到 React 组件中的函数
【发布时间】：2017-11-14 21:50:06
【问题描述】：

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

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 组件中，并且无法实际测试它（据我所知）。

【问题讨论】：

听起来你的测试可能会在回调运行之前退出。您最初可以尝试在测试代码中添加延迟，看看是否是这种情况。
@DanPrince 我认为他在问如何测试辅助函数，而不仅仅是回调。
为什么它是一个辅助函数很重要？只需测试它的返回值是否符合您的期望。用这个最小的代码示例有点难以知道你想要什么因为它是一个辅助函数，你也可以在另一个专门的辅助测试中单独测试它。
@MartinDawson 你是对的。现在我正在考虑用 istanbul 排除该函数调用，因为 Jest 在引擎盖下使用了 istanbul。问题是伊斯坦布尔在选择性地关闭代码的某些部分方面有点糟糕。
@MartinDawson 辅助函数（在我的例子中）没有返回值，只是发出跟踪用户交互的请求。

标签： javascript reactjs enzyme

【解决方案1】：

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

伊斯坦布尔（不是开玩笑）在抱怨，因为您没有实际执行我想象的功能的测试，因此它将它标记为未包含任何测试。

这个问题实在是太宽泛了，无法获得测试所有辅助函数的明确答案。

编辑：

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

【讨论】：

公平点。你给了我一个想法，所以现在应该是一个很好的跳板。谢谢。
Fwiw 我有时会发现一个函数也很难测试。它是必须进行测试的重要代码，还是不值得为其编写测试？ 100% 的测试覆盖率在理想世界中是不错的，但并不总是可行的，尤其是当您必须编写一个非常难看的单元测试时。
有趣，我会研究一下。最初的想法是单独测试辅助函数，所以我会坚持下去，如果只是那个函数调用，我就不用担心完整的代码覆盖率。