javascript - 使用 Enzyme 测试导入到 React 组件中的函数

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 被调用时被调用。这取决于辅助函数对您如何测试它的作用，但它们几乎肯定是一种方法。

Istanbul(不是开玩笑)在提示，因为您没有实际执行我想象的功能的测试，因此它将它标记为未被任何测试覆盖。

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

编辑:

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