如何使用新的反应路由器钩子测试组件?

2024-03-05

到目前为止,在单元测试中,React 路由器匹配参数被检索为组件的 props。 因此,考虑某些特定匹配和特定 url 参数来测试组件很容易:我们只需在测试中渲染组件时按照我们想要的方式精确匹配路由器匹配的 props(我为此目的使用酶库)。

我真的很喜欢用于检索路由内容的新钩子,但我没有找到有关如何使用新的反应路由器钩子在单元测试中模拟反应路由器匹配的示例?


Edit: The proper这样做的方式是 Catalina Astengo 中描述的answer https://stackoverflow.com/a/58206121/917750因为它使用真正的路由器功能,仅模拟历史/路由状态,而不是模拟整个钩子。

我最终解决这个问题的方法是使用 jest.mock 模拟测试中的钩子:

// TeamPage.test.js
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
  useParams: () => ({
    companyId: 'company-id1',
    teamId: 'team-id1',
  }),
  useRouteMatch: () => ({ url: '/company/company-id1/team/team-id1' }),
}));

I use jest.requireActual使用react-router-dom的真实部分来处理除了我感兴趣的钩子之外的所有内容。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用新的反应路由器钩子测试组件? 的相关文章

  • 在 Ionic React 中隐藏登录屏幕上的选项卡

    我从 cli 创建了一个带有选项卡启动模板的离子反应应用程序 并向现有结构添加了登录功能 我做了什么 App tsx const App React FC gt
  • React.js 通过 Router 传递参数,而不是在 URL 中

    您好 我想从一个页面移动到另一页面并传递参数search and type 如果 URL 中没有这些参数 我可以使用 React Router 来实现此目的吗 我正在看这个https github com rackt react route
  • React Router V4 使用 Material UI 在 ListItem 内实现 NavLink

    我是 React 新手 我创建了一个简单的应用程序Login and 仪表板页 我已经成功配置了我的公共路线 and 私人路线 with Redirect功能 但是当我想实施时材料 ui 核心 https material ui com 事
  • 反应路由器路径内的问号

    我正在尝试在 URL 中传递参数 但读取时遇到问题 我正在使用反应路由器 v4 URL http localhost 3000 reset token 123 http localhost 3000 reset token 123我试着这样
  • React 路由参数自动解码字符串

    您好 反应路由器参数会自动解码字符串吗 例如我有这条路线
  • 组件在react-router-4中匹配空值

    我正在尝试迁移到使用 React Router 4 但在理解其逻辑时遇到了一些困难
  • React-Router 中未调用 onEnter

    好吧 我厌倦了尝试 The onEnter方法不起作用 知道为什么吗 Authentication before filter function requireAuth nextState replace console log calle
  • React Router 4 中 URL 更改但视图未更改

    我使用的是react router 4而不是react router 3 所以我使用的是react router dom 我试图让 this props history push 工作 但它所做的只是保持视图相同 但 URL 发生了变化 例
  • 反应路由器和 Express 冲突

    我有我想要 React Router 处理的路径 而且我还有一个 Express API 后端 我从 React 应用程序调用它来执行一些安全的 API 调用 希望在这里提供应用程序 id 应用程序的唯一 URL 我使用 ID 从 Reac
  • React Router v4 基本名称和自定义历史记录

    我想为我的路由分配一个基本名称 我可以使用 BrowserRouter 来实现 不过 我还想指定自定义历史记录 以便我可以以编程方式导航我的用户 我可以用路由器做到这一点 然而我不能两者都做 是否可以扩展其中一个路由器以支持此功能或围绕其包
  • React 路由器匹配失败

    使用有什么好处Match and Miss组件来自react router over Router成分 我似乎找不到任何关于此的文档反应路由器文档 https github com ReactTraining react router tr
  • 从 HashRouter 中删除 #

    我在用着react router dom对于我的路由 由于我也在使用 GitHub Pages 所以我需要使用HashRouter in my Router jsx like so import React from react impor
  • 在 Apache 服务器上处理 React Router

    我在重定向 Apache 服务器上 React 生成的 URL 路径的 404 错误时遇到问题 设想 假设我有一些由 React Router 生成的 URL www somewebsite com apps Problem 如果最终用户单
  • React router 如何点击查看详细组件

    我有两个组件 Car 和 CarDetails 我想用超链接 link 来显示 cars 组件中的所有汽车 当用户单击时 它应该将 carid param s 传递给 CarDetails 组件 App js import React Co
  • React router v4 嵌套路由相对路径

    我有一个带有 React Router v4 的组件到另一个组件 我想在第二个组件中添加另一个路由 这是主要路线 const Dashboard gt return div div
  • 为什么我的反应路由器链接将我带到页面中间?

    我的网站上有很多链接 但只有一个可以执行此操作 它没有将我带到导航栏的顶部 而是转到内容的中间 知道为什么会这样吗 这是一个页面 其中有一个 map经历一些JSON 这是渲染div页面下方的文本元素 如果重要的话 这是一些可能相关的代码 路
  • 如何在react-router-dom v6中的路由组件中添加道具

    正如标题所述 我曾经有一个带有状态组件的页面 该组件根据 url 的更改获取不同的 props 现在 升级到React Router v6 我真的不明白如何让它再次工作 我确实知道现在解决这个问题的唯一方法是使用诸如 useNavigate
  • useLocation 挂钩 - 确定过去的位置

    根据 React Router 5 1文档 https v5 reactrouter com web api location应该可以看到 应用程序现在在哪里 你想让它去哪里 甚至它曾经在哪里 在我的应用程序中 我需要查看 它在哪里 我访问
  • React-Router v5 History.push 不触发组件

    很抱歉朋友们又问这个问题了 我找到了解决这个问题的几个方法 但他们让我很困惑 我只是想问一个优雅的方法来做到这一点 正如你通过标题所理解的 我有一个关于反应路由的问题 让我解释 我有一个按钮 其名称是Login 单击按钮后 我执行了一些逻辑
  • 纯组件在没有变化时渲染?

    我有一个像这样的纯组件 interface Props checkBoxTitleStyle any checkBoxBackgroundColor any onPressCheckBox id isChecked selectedArra

随机推荐

  • 当属性第二次设置为相同值时,INotifyPropertyChanged 不起作用

    这是重现此问题的代码 xaml
  • 黄瓜测试未运行

    我正在开发我的第一个功能文件 selenium 项目 我创建了一个功能文件和运行器类 package cucumberpkg2 import org junit runner RunWith import cucumber api Cucu
  • 如何在 Xamarin Picker 控件中显示两个项目:字符串和图像?

    I have a situation where I need to display a picker control in Xamarin like the following way 它将并排显示国家国旗和国家代码 所选的国家 地区代码
  • HTML5 平铺引擎

    在哪里可以找到 HTML5 的图块引擎
  • 从“添加或删除规则集”中删除规则集

    在尝试通过 Nuget 将规则集加载和卸载到 C 中后 我的 添加或删除规则集 窗口中有一堆来自其他解决方案的规则集 我在任何地方都没有使用这些规则集 更不用说在我当前的项目中了 有没有办法从这个列表中删除项目 您应该能够通过编辑以下注册表
  • 为什么当我设置 CurrentCulture 时时区没有改变?

    根据我的研究 不可能更改线程的时区 所以我的问题是why你不能吗 我本以为将应用程序的文化切换到特定国家 地区也会改变这一点 在我看来似乎是预期的行为 Edit 修改后我可以明白为什么它可能不应该默认映射 1 1 的原因 然而 我仍然认为能
  • 如何消除 .dropdown 和 .dropdown-menu 之间的间隙

    在移动视图中时 单击 dropdown菜单之间有一个小空间 dropdown和 dropdown menu 如图所示 Question是否可以消除那个小空间 间隙 Codepen 示例代码视图 http codepen io riwakaw
  • ASP.NET MVC HTTP 发布/删除

    我有一个 ASP NET MVC 应用程序 我有单个函数模式 将通过 HTTP POST 和 HTTP DELETE 调用 尽管调用了 Post 但从未调用过删除 我确认 IIS 接受 HTTP 删除 任何意见 路线和控制器 routes
  • 如何增加 phpMyAdmin 中的导入大小限制

    有谁知道是否或如何可以增加phpMyAdmin 中的导入大小限制 目前我的服务器限制为 50MB 请注意 这与upload max filesize在 php ini 中 该值设置为 2MB 我需要将一张表导入到我的一个数据库中 而 php
  • SQL中表名前面的“#”是什么意思?

    SQL 中名为 mytable 的表和 table 有什么区别 我在很多自定义程序中看到表名以 开头 这些是本地临时表 对于创建它们的进程来说是私有的
  • 将txt文件的全文存储到mongodb中

    我创建了一个 python 脚本 可以自动执行将 PDF 转换为 txt 文件的工作流程 我希望能够在 MongoDB 中存储和查询这些文件 我需要将 txt 文件转换为 JSON BSON 吗 我应该使用像 PyMongo 这样的程序吗
  • 有什么办法可以访问本地网络中的GAE开发应用程序服务器吗?

    如果我通过以下方式访问我的网站http 本地主机 8080 http localhost 8080来自运行服务器的同一台 Win 7 PC 则它可以正常工作 如果我尝试从另一台电脑访问它 使用我的内部电脑的 IPhttp 192 168 1
  • 如果我使用 byte 而不是 int,我的循环迭代速度会更快吗?

    这段代码是否 for byte b 0 b lt 100 b some code 比这段代码运行得更快 for int b 0 b lt 100 b some code 一点都不 如果有的话 它会更慢 因为底层硬件通常具有处理本机 int
  • 如何在 Fortran 中获取未知长度的命令行参数?

    我想从用于运行程序的命令行读取一些文本字符串 我正在使用内部子例程GET COMMAND ARGUMENT在一个基本上是这样的程序中 program test character len 100 argument call GET COMM
  • Java加密问题

    我正在使用 PBE 加密来加密和解密 Android 应用程序上的某些文本 但当我使用错误的私钥解密文本时 我收到 BadPaddingException 并显示 填充块损坏 消息 我的问题是 由于我不太熟悉 Java 中的加密 这是否是加
  • 无法将路由器服务传递给 symfony 2.6 中的 twig 扩展

    我有一个树枝扩展 我试图在其中注入路由器服务 所以 服务 yml app twig extension class SeoReportBundle Twig SeoReportExtension arguments router tags
  • 发布到IIS后.Net core服务不可用

    当我将 up 发布到 IIS 后 当我尝试访问它时 出现错误 暂停服务 http错误503服务不可用 接下来我应该做什么 我使用 Windows Server 2008 64 位 和 IIS 8 5 该应用程序是Web api NET CO
  • php xpath 问题

    我正在尝试使用 xpath 解析 blogspot feed 但它似乎不适用于我尝试的任何内容 我不确定这是因为名称空间还是什么原因 但我希望有人可以帮助我 这是代码 xml simplexml load file http feeds f
  • NS3-如何在模拟运行期间修改点对点通道数据速率

    我是 NS3 新手 正在查看first cc 教程 https www nsnam org doxygen first 8cc source html https www nsnam org doxygen first 8cc source
  • 如何使用新的反应路由器钩子测试组件?

    到目前为止 在单元测试中 React 路由器匹配参数被检索为组件的 props 因此 考虑某些特定匹配和特定 url 参数来测试组件很容易 我们只需在测试中渲染组件时按照我们想要的方式精确匹配路由器匹配的 props 我为此目的使用酶库 我