使用 React 和 jest 将状态钩子传递给子组件时如何测试副作用？

Question

我想测试一个子组件，但它依赖于父组件的状态（挂钩）。

孩子接收isModalOpen 和setIsModalOpen 作为属性。每次isModalOpen 更改时，Child 内部的useEffect 都会触发。但是，当我尝试单独测试Child 组件时，我无法强制更改触发useEffect 挂钩的状态更改。如何在测试环境中不必渲染Parent 来实现这一点？

在下面的示例中，我可以通过渲染Parent 使测试通过。我只想渲染Child，仍然让测试通过。

function Child({ isModalOpen, setIsModalOpen }) {
  useEffect(() => {
    console.log("is the modal open?", isModalOpen);
  }, [isModalOpen]);

  return (
    <button data-testId="myBtn" onClick={() => setIsModalOpen(!isModalOpen)}>
      Click to {isModalOpen ? "close" : "open"} modal
    </button>
  );
}

function Parent() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    return <Child isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />;
}

测试：

it("React test", () => {
  let isModalOpen = false;
  const mockFunction = jest.fn((val) => (isModalOpen = val));

  const { queryByTestId } = render(
    <Child isModalOpen={isModalOpen} setIsModalOpen={mockFunction} />
  );

  const btnEl = queryByTestId("myBtn");

  btnEl.click();
  expect(btnEl.innerHTML).toEqual("Click to close modal");

  // -----
  // -----
  // -----
  // ----- The below code works
  // const { queryByTestId } = render(<Parent />);

  // const btnEl = queryByTestId("myBtn");

  // btnEl.click();
  // expect(btnEl.innerHTML).toEqual("Click to close modal");
});

以下是上述代码 sn-p 的工作示例： https://codesandbox.io/s/jest-test-forked-cjm3r?file=/index.test.js

Answer 1

实际上总结起来，如果钩子被传递给孩子，你试图测试的内容与钩子无关。把孩子想象成你的主题在测试中；换句话说，它是您要测试的唯一内容。根据定义，“钩子”是无关紧要的。你传入一个函数，你可以断言一个函数已经被调用了正确的值。

总结一下，有两种情况

1. 当模态是 open 并且您单击按钮“单击以关闭模态”按钮时，模态将关闭或以其他方式已知正在使用 false 调用您的模拟函数.
2. 当模态框关闭并且您单击“单击以关闭模态框”按钮时，模态框将打开或以其他方式已知正在使用 true 调用您的模拟函数.

为了证明这一点，我对您上面的测试做了一些小改动。随意复制和粘贴它并自己检查，如果您有任何问题，请告诉我。

注意：从沙盒链接复制并粘贴，稍作修改，以免与原始代码有太大差异。

it("closes the modal when clicking on the button", () => {
    function Child({ isModalOpen, setIsModalOpen }) {
        useEffect(() => {
            console.log("is the modal open?", isModalOpen);
        }, [isModalOpen]);

        return (
            <button data-testId="myBtn" onClick={() => setIsModalOpen(!isModalOpen)}>
                Click to {isModalOpen ? "close" : "open"} modal
            </button>
        );
    }

    // notice the mock here doesn't take arguments
    const mockFunction = jest.fn();

    const { queryByTestId } = render(
        // notice that I've set the initial value for isModal to true
        <Child isModalOpen={true} setIsModalOpen={mockFunction} />
    );

    const btnEl = queryByTestId("myBtn");

    btnEl.click();
    expect(btnEl.innerHTML).toEqual("Click to close modal");

    // the assertion here
    expect(mockFunction).toHaveBeenCalledWith(false);
});

it("opens the modal when clicking on the bottom", () => {
    function Child({ isModalOpen, setIsModalOpen }) {
        useEffect(() => {
            console.log("is the modal open?", isModalOpen);
        }, [isModalOpen]);

        return (
            <button data-testId="myBtn" onClick={() => setIsModalOpen(!isModalOpen)}>
                Click to {isModalOpen ? "close" : "open"} modal
            </button>
        );
    }

    const mockFunction = jest.fn();

    const { queryByTestId } = render(
        // notice that I've set the initial value for isModal to false
        <Child isModalOpen={false} setIsModalOpen={mockFunction} />
    );

    const btnEl = queryByTestId("myBtn");

    btnEl.click();
    expect(btnEl.innerHTML).toEqual("Click to open modal");

    // the assertion here
    expect(mockFunction).toHaveBeenCalledWith(true);
});