繁体   English   中英

useNavigate 不适用于 React 测试模拟

[英]useNavigate doesn’t work on React test mock

提示:本站为国内最大中英文翻译问答网站,提供中英文对照查看,鼠标放在中文字句上可显示英文原文

我试图用笑话来模拟 useNavigate 的实现,以使用反应测试库测试组件,但是当我运行我的测试笑话时,我无法识别模拟的 function。

这是组件。

import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import { useNavigate } from "react-router-dom";
import { Button } from "@mui/material";
import Somelogo from "../../assets/some-logo.svg";

export default function NavBar() {
  const navigate = useNavigate();
  return (
    <AppBar color="primary" position="sticky">
      <Toolbar>
        <img
          width="100%"
          style={{ maxWidth: "50px" }}
          height="auto"
          src={Somelogo}
          alt="some logo"
        />
        <Typography
          variant="h6"
          component="div"
          sx={{ flexGrow: 1, textAlign: "center" }}
        >
          E-core Breakdown
        </Typography>
        <Button color="info" onClick={() => navigate("/")}>
          Home
        </Button>
        <Button color="info" onClick={() => navigate("/accounts")}>
          Accounts
        </Button>
      </Toolbar>
    </AppBar>
  );
}

这是我的测试

import userEvent from "@testing-library/user-event";
import { render, screen } from "../../utils/test.utils";
import Navbar from "../navbar";

const mockedUsedNavigate = jest.fn();

jest.mock("react-router", () => ({
  ...(jest.requireActual("react-router") as any),
  useNavigate: () => mockedUsedNavigate,
}));

describe("<Navbar />", () => {
  beforeEach(() => {
    mockedUsedNavigate.mockReset();
  });

  test("should navigate to the correct page", () => {
    render(<Navbar />);

    const accountButton = screen.getByText("Accounts", { exact: false });

    userEvent.click(accountButton);

    expect(mockedUsedNavigate).toHaveBeenCalledTimes(1);
  });
});

当我运行这个测试时,它返回给我测试失败。 我阅读了一些文档并看到了使用完全相同的模拟的示例,但对我来说它不起作用。

失败的测试

我发现我做错了什么,我需要等待预期的结果发生,为测试添加一个 waitfor。

import userEvent from "@testing-library/user-event";
import { render, screen } from "../../utils/test.utils";
import Navbar from "../navbar";

const mockedUsedNavigate = jest.fn();

jest.mock("react-router", () => ({
  ...(jest.requireActual("react-router") as any),
  useNavigate: () => mockedUsedNavigate,
}));

describe("<Navbar />", () => {
  beforeEach(() => {
    mockedUsedNavigate.mockReset();
  });

  test("should navigate to the correct page", () => {
    render(<Navbar />);

    const accountButton = screen.getByText("Accounts", { exact: false });

    userEvent.click(accountButton);

    await waitFor(() => expect(mockedUsedNavigate).toHaveBeenCalledTimes(1));
  });
});
问题未解决?试试本站强大的搜索功能,搜索: useNavigate 不适用于 React 测试模拟
我的 useNavigate 在 onClick function (react-router-dom) (localstorage) 中不起作用

[英]My useNavigate doesn't work inside onClick function (react-router-dom) (localstorage)

默认情况下,我在 localStorage 中收到一个数组“name”,其中包含一个位于 position [0] 的项目。 在我的 handleExitChat function 中,我删除了我在 localStorage 中收到的这个项目,并通过接收 useNavigate() 的导航将用户定向 ...

如果替换路径中的最后一个元素,React Router v6 useNavigate() 不会导航

[英]React Router v6 useNavigate() doesn't navigate if replacing last element in path

我有一个具有以下功能的反应组件 console.log() 显示了我要附加以在导航功能中使用的 ID。 和浏览器中的 URL正在更新。 但是页面没有变化。 这可以从/dashboard/clients导航到/dashboard/clients/foo 但从/dashboard/clien ...

如何在 react-router-dom 中模拟 useNavigate 钩子

[英]How to mock useNavigate hook in react-router-dom

我有一个自定义钩子,它使用react-router-dom中的useNavigate钩子。 我只想添加一个测试来检查是否将预期值传递给了钩子。 该钩子仅在 URL 中存储和检索查询参数的值。 这是我的自定义钩子的样子 - 这就是我测试它的方式 - 第一个测试通过,但第二个测试失败并出现以下错误 - ...

开玩笑 - 更改模拟实现不起作用

[英]Jest - changing mock implementation doesn't work

我有一个位于__mocks__/api.js中的api.js的模拟文件,默认实现如下: 但是我想在一个测试中更改此默认行为,因此我尝试按照不起作用的方式进行操作: 两个console.log都将返回相同的,在__mocks__/api中实现的原始 promise 响应 ...

React TestUtils不适用于装饰器或如何使用重新连接来模拟高阶函数

[英]React TestUtils doesn't work with decorators or how to mock higher order functions using rewire

我有一个更高阶的组件: 和一个组件: 和使用React.findDOMNode的(传递)测试 和使用TestUtils另一个(失败)测试: 如果我删除@withMUI装饰器,它按预期工作。 那么为什么装饰器会影响TestUtils.findComponentWi ...

.click()在反应中不起作用

[英].click() doesn't work in react

我猜.click函数来自jquery,但我也在纯js中看到了,因此我希望我也可以在我的react代码中使用它。 我想使用它的事件看起来像 想法是在编写消息后,我将按Enter,onKeyUp将其转到事件处理程序并运行getElementByClassName().click()并提交消 ...

Webpack for React无法正常工作

[英]Webpack for React doesn`t work

我刚刚开始React,并完成了YouTube上的codecademy课程和其他一些课程。 我决定配置本地计算机以进行响应。 我已经开始使用webpack和webpack-dev-server。 在这里我弄错了。 这是错误截图 这也是我的文件树 这是我的webpack.conf ...

PropTypes 在 React 中不起作用

[英]PropTypes doesn't work in React

我正在运行 React 16.2.0,我正在使用 PropTypes 15.6.1。 我正在使用 ES6 语法和 Webpack。 当我传递无效的道具时,我试图让 PropTypes 发出警告,但它不起作用。 这是代码: 简单消息.js 索引.js webpack.config.js ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM