Question

我尝试了许多方案，但都无济于事，正面临useEffect Cleanup返回方法的问题。寻找一些解决方案以涵盖用例。由于声望较低，因此无法附加屏幕截图。

我进行了一些研究，并遵循提供的解决方案，例如创建spyOn，安装，unMount方案。但是没有一个。

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
});

Answer 2

为了运行您在useEffect挂钩中指定的清理功能，您可以缓存对它的引用，然后稍后在测试中调用该引用：

let cleanupFunc;

jest.spyOn(React, "useEffect").mockImplementationOnce(func => {
    cleanupFunc = func();
});

cleanupFunc();

Answer 3

React不会在同步模式下运行该挂接。 https://codesandbox.io/s/m5m5yqrr18

import React from "react";
import { cleanup, render } from "react-testing-library";

afterEach(cleanup);

it("React test", () => {
  let a = false;
  function Test() {
    React.useEffect(() => {
      a = true;
    });
    return <div>Hello World</div>;
  }
  const { rerender } = render(<Test />);
  rerender(<Test />);
  expect(a).toBe(true);
});

Answer 4

以@ thomas-rufflo的答案为基础，值得指出：

import { useEffect } from 'react';

不起作用。您必须使用：

React.useEffect

来自此博客文章： https://blog.carbonfive.com/shallow-testing-hooks-with-enzyme/

我是前端测试的新手，所以这使我绊了一段时间！

Answer 5

致那些和我一样无法使接受的答案起作用的人：

jest.spyOn(React, "useEffect").mockImplementationOnce(cb => cb()());

将第二个 () 添加到回调中以执行清理工作。

如何对测试进行单元测试使用Jest和Enzyme的效果cleanUp返回函数

5 个答案: