javascript - 在 useEffect 反应钩子中使用路由时，RTL 中的 waitForElementToBeRemoved 错误超时

Question

我尝试了不同的解决方案来解决它，但没有一个有效。我正在使用React 测试库来测试登录组件。我有不同的路线堆叠如下：

<BrowserRouter>
      <div>
        <Home />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/user" exact component={User} />
          <Route path="/login" component={Login} />
          <Route component={NotFound} />
        </Switch>
      </div>
    </BrowserRouter>

这是我的登录组件。

export const Login = () => {
  const history = useHistory();

  useEffect(() => {
    console.log("In useEffect");
    history.push("/user");
  }, []);

  return <div data-testid="user-login">In progress</div>;
};

我写了这样的测试用例：

  it("redirects to /user", async () => {
    testRender(<Login />);
    await waitForElementToBeRemoved(() =>
      screen.findByTestId("user-login")
    );
    screen.debug();
  });

这是我的 testRender 代码：

import React from "react";
import { render } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";

export function testRender(tsx) {
  window.history.pushState({}, "Test page", "/");
  return render(tsx, { wrapper: MemoryRouter });
}

当我运行测试用例时：

expect(getByTestId("user-login").textContent).toBe(
      "In progress"
    );

它正在通过，但“waitForElementToBeRemoved”案例不起作用（错误-“waitForElementToBeRemoved 超时”）。该组件确实执行了 useEffect 但history.push("/user"); 似乎不起作用。请让我知道是否有更好的方法来测试这种情况。

标签： javascriptreactjsjestjsreact-router-domreact-testing-library