首页
学习
活动
专区
工具
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。...测试当我们点击链接时,它是否用参数导航到其他页面: 现在,要检查导航是否工作,我们必须触发导航链接上的单击事件。

15K33
  • 如何测试 React Hooks ?

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

    1.6K10

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

    确保代码没有bug的一种方法就是编写测试用例。测试React hooks与测试一般程序的方式没有太大区别。 在本教程中,我们将了解如何通过使用带有hooks的to-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.

    2.1K20

    React 现代化测试

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

    93930

    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.4K30

    如何测试驱动开发 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。

    99420

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

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

    5.9K20

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

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

    2.1K10
    领券