测试 React 组件 -> setInterval

Question

我的目标是测试从 60 秒倒数到 0 的简单组件，然后是运行函数。

成分：

import { useEffect, useState } from "react";

export default function Clock({ dispatch }) {
  const [clock, setClock] = useState(60);
  useEffect(() => {
    const tick = setInterval(() => {
      setClock(clock - 1);
    }, 1000);
    if (clock === 0) {
      dispatch({ type: "breakDone" });
    }
    return function cleanUp() {
      clearInterval(tick);
    };
  });
  console.log(clock);
  return (
    <div className="clock__container">
      <h1>{clock}s</h1>
      <p data-testid="clock-paragraph">
        lorem ipsum
      </p>
    </div>
  );
}

我在测试组件时遇到问题。我尝试用不同的方法测试它，但我的计时器从未下降到 59s。

我累的是：

给出最差的反馈 -> 假阳性

  test("Value of clock after 1s", async () => {
    render(<Clock />);
    expect(screen.getByText("60s")).toBeInTheDocument();
    setTimeout(() => {
      expect(screen.getByText("59s")).toBeInTheDocument();
    }, 1000);
  });

 test("Value of clock after 1s", async () => {
    render(<Clock />);
    expect(screen.getByText("60s")).toBeInTheDocument();
    jest.advanceTimersByTime(10000);
    expect(await screen.findByText("59s")).toBeInTheDocument();
  });

此解决方案正确测试了 1s 权证，但在 10s 时失败了。

  test("Value of clock after 1s", async () => {
    render(<Clock />);
    const headerElement = screen.getByRole("heading");
    jest.advanceTimersByTime(1000);
    await waitFor(() => expect(headerElement.innerHTML).toBe("59s"));
  });

老实说，我不知道问题出在哪里。

Answer 1

您的 useEffect 挂钩需要时钟状态的依赖数组

像这样：

useEffect(() => {
    const tick = setInterval(() => {
      setClock(clock - 1);
    }, 1000);
    if (clock === 0) {
      dispatch({ type: "breakDone" });
    }
    return function cleanUp() {
      clearInterval(tick);
    };
  },[clock]);

测试 React 组件 -> setInterval

Testing React component -> setInterval

reactjs

react-testing-library