小编Mil*_*etX的帖子

使用反应路由器和反应测试库测试后退按钮

我有一个组件,允许用户使用 React router v6 的钩子导航回历史记录useNavigate。但是,当我调用该函数时,测试似乎失败,navigate(-1)但如果我传递字符串 url,则测试会通过,例如。navigate("/home")。有谁知道正确的测试方法吗navigate(-1)?这是一个codesandbox来说明问题https://codesandbox.io/s/navigate-back-test-yt82g3?file=/src/navigateBack.test.tsx

import { renderWithRouter } from "./testUtils";
import { screen } from "@testing-library/react";

it("goes back", () => {
  function Home() {
    let navigate = useNavigate();

    function handleClick() {
      navigate("/about");
    }

    return (
      <div>
        <h1>Home</h1>
        <button onClick={handleClick}>about me</button>
      </div>
    );
  }

  function About() {
    let navigate = useNavigate();

    function handleClick() {
      navigate(-1); // test failed
      // navigate("/home"); // test passed
    }

    return (
      <div>
        <h1>About</h1>
        <button onClick={handleClick}>go …
Run Code Online (Sandbox Code Playgroud)

reactjs jestjs react-router react-router-dom react-testing-library

5
推荐指数
1
解决办法
3735
查看次数