reactjs - 如何使用 Jest 和 Enzyme 对 useEffect cleanUp 返回函数进行单元测试

Question

我尝试了很多方案，但没有一个有效，我面临 useEffect Cleanup 返回方法的问题。寻找一些解决方案来覆盖用例。由于声誉较低，无法附加屏幕截图。

我做了一些研究并遵循了提供的解决方案，例如创建 spy 、安装、卸载场景。但没有一个奏效。

useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    window.addEventListener('resize', handleResize);
    return () => {
       window.removeEventListener('scroll', handleScroll);
       window.removeEventListener('resize', handleResize);
    };
}, []);

预期 useEffect 函数内 return 语句的测试覆盖率。

请原谅拼写错误 - 从手机发布。

Answer 1

我建议您结帐react-testing-library 。该库提供了一个 unmount 方法，该方法从其 render 方法返回。调用unmount()后，您可以检查监听器是否已被删除。总的来说，我非常推荐react-testing-library。我们将它与 jest 结合用于所有前端测试，它的作用就像一个魅力。

unmount 方法的示例用法:

import { render } from "@testing-library/react";

it("Should do what I want", () => {
  const { unmount } = render(
    <MyComponent value="test" } />
  );

  unmount();

  // ... expects
});