首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

测试:单击(fireEvent.click) react-router-dom中的链接,但react-testing-library不触发

在React开发中,react-testing-library是一个常用的测试工具,用于对React组件进行单元测试和集成测试。而react-router-dom是React官方提供的用于处理路由的库。

针对问题的具体情况,如果在测试中通过fireEvent.click去模拟点击react-router-dom中的链接,但react-testing-library没有触发预期的行为,可能有以下几个原因:

  1. 路由没有正确设置:首先需要确保路由在组件中正确设置并导出。可以使用BrowserRouter或MemoryRouter进行测试环境的路由模拟。
  2. 测试环境中未正确包装组件:在测试代码中需要使用React提供的测试工具包裹被测试的组件,常用的包装方法是render方法。确保使用render函数正确渲染组件,并在后续的测试逻辑中使用相应的选择器进行查找。
  3. 点击事件未触发:在测试中使用fireEvent.click模拟点击操作时,需要确保点击事件已经绑定到目标链接元素上。可以通过给目标元素添加onClick事件监听或者使用React提供的Link组件来确保链接可以被正确点击。

综上所述,解决该问题的步骤如下:

  1. 确认路由设置正确,使用BrowserRouter或MemoryRouter等工具模拟路由环境。
  2. 使用render方法包装被测试的组件,并使用选择器定位目标链接元素。
  3. 确认目标链接元素绑定了点击事件,可以通过onClick事件监听或使用React的Link组件来实现。
  4. 使用fireEvent.click模拟点击目标链接元素。
  5. 检查是否触发了预期的行为。

以下是腾讯云相关产品和产品介绍链接地址的一些推荐,用于支持云计算领域的开发和测试:

  1. 云服务器(CVM):提供可扩展的云服务器实例,满足不同规模和需求的业务场景。详情请参考:https://cloud.tencent.com/product/cvm
  2. 云数据库MySQL版(CDB):高性能的云数据库服务,支持自动备份、容灾和扩展,适用于各类应用场景。详情请参考:https://cloud.tencent.com/product/cdb
  3. 腾讯云CDN:提供全球分布式的内容分发网络,加速网站和应用的访问速度。详情请参考:https://cloud.tencent.com/product/cdn

请注意,这仅仅是一些示例产品,腾讯云还提供了许多其他产品和解决方案,可以根据具体需求进行选择和使用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

用Jest来给React完成一次妙不可言~单元测试

•创建冒烟测试集合(主流程测试用例)。•标记哪些测试是非确定性测试测试结果唯一)。 •级别2 •如果有测试运行结果为红色(失败❌)就不会发布。•每次代码提交之前都要求通过冒烟测试。...并触发DOM事件,如单击、焦点、更改等。您可以在这里找到许多其他可以调度事件。...触发事件通常会触发应用程序一些更改,因此我们必须执行一些断言来确保这些更改发生。在我们测试,这样做一个好方法是确保呈现给用户计数已经更改。...第一个测试使用 fireEvent.click() 触发一个 click 事件,检查单击按钮时计数器是否增加到1。 第二个检查当点击按钮时计数器是否减为-1。...测试当我们点击链接时,它是否用参数导航到其他页面: 现在,要检查导航是否工作,我们必须触发导航链接单击事件。

14.9K33

如何测试 React Hooks ?

一旦你把类组件 Accordion 重构为函数式组件,那些测试就会挂掉。所以为了确保我们代码库能在推倒重来情况下准备好 hooks 重构,我们能做些什么呢?...这是最简单办法了,除非你真的需要相关行为同步发生才能那么做,因为实际上这会伤及性能。 使用 react-testing-library wait 工具并把测试设置为 async。...相反,我通过把组件测试写成同步,虽然付出了一点实现细节上代价,取得了功效学上权衡。软件无绝对,我们要在这种事情上权衡利弊。我只是觉得在这个领域稍加研究以利于得到更好测试功效。...你当然可以那么做,实际上我会把它挪到 __tests__ 目录,因为这就是我喜欢测试自定义 hooks 原因。...将我关于避免实现细节忠告用在你测试,让在当今类组件上工作良好类,在之后重构为 hooks 时照样能发挥作用。祝你好运!

1.5K10

【译】使用Enzyme和React Testing Library测试React Hooks

确保代码没有bug一种方法就是编写测试用例。测试React hooks与测试一般程序方式没有太大区别。 在本教程,我们将了解如何通过使用带有hooksto-do应用程序来实现这一点。...我们使用断言,在进一步模拟单击事件之前,输入“修复失败测试”,该事件应该将新项目添加到待办事项列表。 最后,断言列表中有三个项,并且第三个项与我们创建项相等。...使用react-testing-library测试 我们将为此写三个测试: 1、初始待办事项渲染 2、我们可以加一个新待办事项 3、我们可以删除一个待办事项 首先,我们安装需要安装包: npm install...为了模拟添加新待办项单击事件,我们使用fireEvent.click()方法并传入getByText()方法,该方法返回是文本与我们传参数匹配节点。...因为我们只想删除一个项目,所以我们对集合第一个项目触发一个click事件,它应该删除第一个待办事项。这应该使待办事项子节点长度等于1。 这些测试也可以在GitHub上找到。

4.1K30

【React】653- 22 个让 React 开发更高效更有趣工具

别误会,请把它当成一件好事。...以下是 Guppy 使用时样子: 7. react-testing-library 我一直很喜欢 react-testing-library,因为在编写单元测试时感觉不错。...这个包提供了实用 DOM 测试程序,鼓励良好测试实践。 此解决方案旨在解决测试实施细节问题,就像用户可以看到它们一样,而不是测试 React 组件输入/输出。...使用此工具,我们可以将鼠标悬停在节点上,这些节点是指向树与它们直接相关组件链接。...它们会用橙色/红色标出严重重渲染问题,帮助我们在开发页面时更容易发现一些性能问题。 除非我们目标是构建平庸应用程序,否则为什么试试这个在我们身边好东西。 18.

2K20

React 现代化测试

测试动机 测试用例书写是一个风险驱动行为, 每当收到 Bug 报告时, 先写一个单元测试来暴露这个 Bug, 在日后代码提交, 若该测试用例是通过, 开发者就能更为自信地确保程序不会再次出现此...Dots 提出 The Testing Trophy, 该模型是笔者比较认可前端现代化测试模型, 模型示意图如下: 奖杯模型自下而上分为静态测试、单元测试、集成测试、e2e 测试, 它们职责大致如下...(代表库: eslint、flow、TypeScript) 单元测试: 在奖杯模型, 单元测试职责是对一些边界情况或者特定算法进行测试。...(代表库: jest、react-testing-library) e2e 测试: 模拟用户在真实环境上操作行为(包括网络请求、获取数据库数据等)测试。...(代表库: cypress) 越是上层测试给开发者带来自信是越大, 与此同时, 越是下层测试测试效率是越高。奖杯模型综合考虑了这两点因素, 可以看到其在集成测试占比是最高

93130

22 个让 React 开发更高效更有趣工具

别误会,请把它当成一件好事。...以下是 Guppy 使用时样子: 7. react-testing-library 我一直很喜欢 react-testing-library,因为在编写单元测试时感觉不错。...这个包提供了实用 DOM 测试程序,鼓励良好测试实践。 此解决方案旨在解决测试实施细节问题,就像用户可以看到它们一样,而不是测试 React 组件输入/输出。...使用此工具,我们可以将鼠标悬停在节点上,这些节点是指向树与它们直接相关组件链接。...它们会用橙色/红色标出严重重渲染问题,帮助我们在开发页面时更容易发现一些性能问题。 除非我们目标是构建平庸应用程序,否则为什么试试这个在我们身边好东西。 18.

10.3K31

22 个让 React 开发更高效更有趣工具

别误会,请把它当成一件好事。...以下是 Guppy 使用时样子: 7. react-testing-library 我一直很喜欢 react-testing-library,因为在编写单元测试时感觉不错。...这个包提供了实用 DOM 测试程序,鼓励良好测试实践。 此解决方案旨在解决测试实施细节问题,就像用户可以看到它们一样,而不是测试 React 组件输入/输出。...使用此工具,我们可以将鼠标悬停在节点上,这些节点是指向树与它们直接相关组件链接。...它们会用橙色/红色标出严重重渲染问题,帮助我们在开发页面时更容易发现一些性能问题。 除非我们目标是构建平庸应用程序,否则为什么试试这个在我们身边好东西。 18.

2.1K31

2019年,React 开发者应该掌握 22 种神奇工具

请不要误会。把它当成一件好事。利用那些烦人消息,这样我们就可以修复那些浪费重渲染。 4....7. react-testing-library 我一直很喜欢 react-testing-library (https://url.leanapp.cn/AAWrJhu),因为在编写单元测试时感觉不错...这个包提供了 DOM 测试实用程序,鼓励良好测试实践。 此解决方案旨在解决测试实施细节问题,就像用户可以看到它们一样,而不是测试 React 组件输入/输出。...使用此工具,您可以将鼠标悬停在节点上,这些节点是指向树与它们直接相关组件链接。...它们会用橙色/红色标出严重重渲染问题,帮助我们在开发页面时更容易发现一些性能问题。 除非我们目标是构建平庸应用程序,否则为什么试试这个在我们身边好东西。 18.

2.4K21

21个让React 开发更高效更有趣工具

Guppy 启动后样子 7. react-testing-library react-testing-library 是一个很棒测试库,编写单元测试时,它会让你感觉很好。...这个包提供了React DOM测试实用程序,鼓励良好测试实践。 此解决方案旨在解决测试实现细节问题,而不是测试React组件输入/输出,就像用户会看到它们一样。...使用此工具,您可以将鼠标悬停在节点上,这些节点是指向与树组件直接相关组件链接。...如果在查看结果时遇到问题,可以在地址栏输入chrome:extensions ,查找“React Sight”框,然后单击“Allow access to file URLs”开关,如下所示: 12....Awesome React Awesome React开源库是一个与React相关很棒列表。 我可能会忘记其他网站并单独从这个链接学习React。

2.4K30

前端测试体系建设与最佳实践总结

单元测试:是指对软件最小可测试单元进行检查和验证,通常指的是独立测试单个函数。 UI 测试:是对图形交互界面的测试。 集成测试:就是测试应用不同模块如何集成,如何一起工作,这和它名字一致。...React Testing Library 出比较晚,倾向于支持 React 新功能,这对我来说在测试 Hooks 时是一个巨大好处。...我们测试点在加菜和减菜按钮事件是否被正确触发,当数量为 0 时,减号按钮和数量是否展示,数量不为 0 时,展示是否正确。...在写某些模块单测或是 UI 测试时,大家可能会发现一些难以测试点,比如 Localstorage, 或一些延时函数触发。...,测试 Toast 弹窗内内容是否一致,beforeClose 事件是否是在弹窗关闭时才触发

5.3K30

如何测试驱动开发 React 组件?

什么是 TDD TDD(Test-driven development),就是测试驱动开发,是敏捷开发一项核心实践和技术,也是一种软件设计方法论。...它原理就是在编写代码之前先编写测试用例,由测试来决定我们代码。而且 TDD 更多地需要编写独立测试用例,比如只测试一个组件某个功能点,某个工具函数等。...本文将以创建一个 Confirmation 组件来说明,如何在 React 如何实现测试驱动开发。..."> } export default Confirmation 然后把这个组件导入到测试,它现在通过了。...现在我们得到了我们想要组件渲染 HTML ,现在我想要确保我可以从外部传递这个组件按钮回调函数,并确保它们在单击按钮时被调用。

2.2K10

21个让React 开发更高效更有趣工具

7. react-testing-library react-testing-library 是一个很棒测试库,编写单元测试时,它会让你感觉很好。...这个包提供了React DOM测试实用程序,鼓励良好测试实践。 此解决方案旨在解决测试实现细节问题,而不是测试React组件输入/输出,就像用户会看到它们一样。...使用此工具,您可以将鼠标悬停在节点上,这些节点是指向与树组件直接相关组件链接。...如果在查看结果时遇到问题,可以在地址栏输入chrome:extensions ,查找“React Sight”框,然后单击“Allow access to file URLs”开关,如下所示: ?...Awesome React Awesome React开源库是一个与React相关很棒列表。 我可能会忘记其他网站并单独从这个链接学习React。

97820

离开页面前,如何防止表单数据丢失?

应用程序最终版本可以在 CodeSandbox 上进行测试,代码可在 GitHub 上获得。...这是希望,因为我们在导航到下一步时保存表单数据。 为了解决这个问题,我们需要验证下一个 URL 是否是表单步骤之一,然后再检查未保存更改。...我们可以使用这个钩子来复制版本5 Prompt 组件行为,首先,我们需要调整我们 App 组件以使用新数据路由器,因为它们是 unstable_usePrompt 钩子工作所必需。...为了简化 App 逻辑,我们还将主页导航链接移动到 Stepper 。 设置完成后,我们现在可以实现重定向阻止功能。...最后,我们在 usePrompt 钩子抽象出阻止逻辑并管理阻止器状态。 我们可以通过导航到联系步骤,填写一些字段并单击主页导航项来测试 FormPrompt 是否按预期工作。

5.8K20

如何测试驱动开发 React 组件?

什么是TDD TDD(Test-driven development),就是测试驱动开发,是敏捷开发一项核心实践和技术,也是一种软件设计方法论。...它原理就是在编写代码之前先编写测试用例,由测试来决定我们代码。而且 TDD 更多地需要编写独立测试用例,比如只测试一个组件某个功能点,某个工具函数等。...本文将以创建一个 Confirmation 组件来说明,如何在 React 如何实现测试驱动开发。..."dialog">; }; export default Confirmation; 然后把这个组件导入到测试,它现在通过了。...现在我们得到了我们想要组件渲染 HTML ,现在我想要确保我可以从外部传递这个组件按钮回调函数,并确保它们在单击按钮时被调用。

2.1K10
领券