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

当使用<Link to="">时,react js Jest测试不应在<Router>外部使用<Link>

在React中,<Link>是React Router库提供的一个组件,用于在应用程序中创建导航链接。它可以用于在不刷新页面的情况下导航到不同的URL。

在进行Jest测试时,我们通常会使用Enzyme或React Testing Library等工具来模拟React组件的渲染和交互。然而,当使用<Link>组件时,如果没有在<Router>组件的上下文中进行测试,会导致测试失败或出现错误。

这是因为<Link>组件需要在<Router>组件的上下文中才能正常工作。在测试环境中,我们应该在测试组件的渲染方法中包裹<Router>组件,以确保<Link>组件能够正常运行。

以下是一个示例代码,展示了如何在Jest测试中正确使用<Link>组件:

代码语言:txt
复制
import React from 'react';
import { render } from '@testing-library/react';
import { BrowserRouter as Router, Link } from 'react-router-dom';

describe('MyComponent', () => {
  it('should render Link component', () => {
    render(
      <Router>
        <Link to="/path">Link Text</Link>
      </Router>
    );
    
    // 进行断言或其他测试逻辑
  });
});

在上述示例中,我们使用了BrowserRouter作为Router组件,并在其中包裹了Link组件。这样,在测试中就可以正常使用<Link>了。

需要注意的是,上述示例中使用的是React Router库提供的BrowserRouter组件,如果你使用的是其他类型的Router组件(如HashRouterMemoryRouter),请相应地进行调整。

总结起来,当使用<Link to="">时,react js Jest测试不应在<Router>外部使用<Link>。我们应该在测试组件的渲染方法中包裹<Router>组件,以确保<Link>组件能够正常工作。

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

相关·内容

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

技术栈选择 当我们想要为 React 应用编写单元测试的时候,官方推荐是使用 React Testing Library[1] + Jest[2] 的方式。...•findAllBy:返回一个promise,找到与给定查询匹配的任何元素,该promise将解析为元素数组。 执行(Act) 现在一切都准备好了,我们可以行动了。...当我们点击按钮测试计数器的增减是否正确: import React from 'react'; import "@testing-library/jest-dom/extend-expect"; import...也就是说,我们现在可以进入下一节并介绍React Router。 7. 测试 React Router 让我们检查一下 TestRouter.js 是什么样子的。...TestRouter.js import React from 'react' import { Link, Route, Switch, useParams } from 'react-router-dom

14.8K33

Jest 进行 JavaScript 测试

Jest 是目前最受欢迎的测试运行器之一,也是 Create React App 的默认选择。 首先要做的事情:我怎么知道要测试些什么? 谈到测试,即使是简单的代码块也会使初学者瘫痪。...但是谈到严肃的事情,大部分时间你都没有那么多的特权。通常我们必须遵循规范,即建立的书面或口头描述。 在本教程中,我们从项目经理那里得到了一个相当简单的规范。...根据规范,测试中的函数应该省略其 url 属性与给定搜索项匹配的对象。...Jest的HTML代码覆盖率报告 如果单击函数名称,你还会看到确切的未经测试的代码行: ? 单个文件的Jest代码覆盖率报告 很整洁不是吗?使用代码覆盖,你可以在有疑问发现要测试的内容。...Jest 可以顺利地测试 React 应用(JestReact 均来自 Facebook 的工程师)。Jest 也是 Create React App 中的默认测试器。

2.7K30

【组件库封装】:封装一个 Library 什么流程?

、editorconfig、eslint、stylelint 等) 构建工具(vitejs、babel、webpack、rollup 等) 联调(npm link、yarn link测试jest)...基于 Typescript、ReactReact Hooks 技术,完成 @webj2eedev/history-plus-plus、@webj2eedev/react-router-plus-plus...配置 .prettierrc 使用的是开源项目 vue-router 中的 .prettierrc 配置 ? 安装 Prettier VSCode 插件 ?...测试 靠谱的开源软件必然是需要单元测试的,这是软件在持续迭代的过程中保持稳定的非常必要的手段。 React 体系下,选用 Jest 测试框架,配合 @testing-library,就足够了。 ?...在 VSCode 中安装 Jest 插件,会提升测试的便捷性。 ? 基于 Jest 测试框架编写测试用例 ? 12.

1K30

初尝 Jest 单元测试

不同于几年前js乱七八糟,模块化都不普遍的时代,目前团队里主流技术栈就是React,以React天生强制组件化的思想来看,写单元测试应该是天时地利了,而Facebook也提供了配套的测试工具(ReactTestUtils...通常涉及UI的自动化测试,思路是把某一刻的标准状态拍个快照,在测试回归的时候进行pixel to pixel的对比。...先跑跑官网的简单例子,先照步骤安装npm依赖,然后敲代码,jest跑一下: // Link.react.js import React from 'react'; const STATUS = {..._onMouseLeave}> {this.props.children} ); } // Link.react-test.js import React...看起来,这样子添加测试用例,倒也不是很麻烦的样子,主要是snapshots的使用,有四两拨千斤效,不过重点在于其输入数据的构造。 可期。

1.8K80

初尝 Jest 单元测试

不同于几年前js乱七八糟,模块化都不普遍的时代,目前团队里主流技术栈就是React,以React天生强制组件化的思想来看,写单元测试应该是天时地利了,而Facebook也提供了配套的测试工具(ReactTestUtils...通常涉及UI的自动化测试,思路是把某一刻的标准状态拍个快照,在测试回归的时候进行pixel to pixel的对比。...先跑跑官网的简单例子,先照步骤安装npm依赖,然后敲代码,jest跑一下: // Link.react.js import React from 'react'; const STATUS = {..._onMouseLeave}> {this.props.children} ); } // Link.react-test.js import React...看起来,这样子添加测试用例,倒也不是很麻烦的样子,主要是snapshots的使用,有四两拨千斤效,不过重点在于其输入数据的构造。 可期。

1.6K10

React Router 邦邦两拳🥊 🥊

>) 导航, react-router-dom 和 react-router react-router: 实现了路由的核心功能\ react-router-dom...例如:Link组件,会渲染一个a标签,Link组件源码a标签行BrowserRouter和HashRouter组件,前者使用pushState和popState事件构建路由,后者使用window.location.hash...导航 Link Link组件用于取代元素,生成一个链接,允许用户点击后跳转到另一个路由。它基本上就是元素的React 版本,可以接收Router的状态。...to 替代了 href属性,接收跳转的路径 About 如果希望当前路由 样式与其他不同 使用activeStyle,直接在标签内添加样式 About NavLink 是的一种特殊类型,其prop与当前位置匹配,可以将其自身设置为“active” Redirect 从现在的位置跳到另一个位置

3.4K20

前端架构思考,Vue or React?领域设计、文件结构、数据管理、主题替换

在没有企业包袱的角度来看,大厂都是 react 为先, 我更加推荐使用 vue,原因如下 大神没那么多,就大部分场景 95%,vue 都可以很好的覆盖 天生的结构、样式、逻辑相分离,各自的职责界限已经很明显了...太长了,需要不断的上下滑动,还看不懂 界限不明确,就会导致混乱,dom 里面写逻辑,逻辑里透出 dom 都是页面的维度,没有领域的概念,缺少一个整体的认知 最佳实践:每个页面超过 7 个属性和方法,不强求...├── .gitignore ├── build.sh ├── jest.config.js ├── pack.json ├── README.md └── tsconfig.json...单测的写法,使用 jest + testing-library + mm 来进行 mock 以及断言 最好可以在 CI/CD 上配置增量的代码覆盖率是要求在多少,每个 mr 都不能拉低单测覆盖率(待学习.../jest-expect.html#tomatchregexporstring: https://link.juejin.cn/?

28630

使用 TypeScript 编写 React.js 应用 | 笔记

引言 React.js使用具有 Hooks 的 函数式组件 Built-in React Hooks – React 使用 create-react-app 创建工程 TypeScript React...Router 在正常工作后, 重构代码到使用 Redux 使用 React Testing Library 测试应用程序 React Testing Library | Testing Library...仅不是 loading 且没有 error 才显示 More... 按钮, 并处理 More... 按钮的 click 事件并调用 handleMoreClick 。...image-20230625225859778 重构 ProjectCard-test.tsx 以使用 setup 函数在每个测试开始呈现组件。...(你希望编辑器意外地引起大量更改,因为没有本地安装 prettier , 就会使用编辑器扩展自带的 prettier) 能够从命令行运行 Prettier 仍然是一个很好的后备,并且是 CI/CD

77890

【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router

---- 测试所用代码 使用了全局组件 a-button a-menu ... ... 使用外部的模块 useStore useRouter message <!...('ant-design-vue'); // 模拟外部模块 vuex jest.mock('vuex'); // 模拟外部模块 vue-router jest.mock('vue-router');...('ant-design-vue'); // 模拟外部模块 vuex jest.mock('vuex'); // 模拟外部模块 vue-router jest.mock('vue-router');...// 用来模拟 vue-router 的 push 方法 const mockRoutes: string[] = []; // 模拟外部模块 vue-router jest.mock('vue-router...它是一个独立的数据结构,使用特定的方法,更新其中的状态。 测试 Vuex store 非常有必要,交互变的复杂了以后,可以脱离界面对数据的改动做测试,最大限度的保障功能的正常运行。

2.2K30

React 折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现

折腾记的技术栈选型 Mobx & mobx-react(用起来感觉良好的状态管理器) React 16.4.2 (从这个起步,用新不用旧) React Router V4 (如上) antd (版本追求如上...自行维护一份静态路由表 结合路由的history对象的pathanme 在组件渲染完毕的情况下,再去遍历路由表,通过setState重新渲染侧边栏 为什么不在组件初始化的时候就设置,那这样对于404的路由没法控制 react-router-dom...v4虽然提供了全局404组件,但是history里面没有代表404的状态 实现目标 点击侧边栏的子菜单会改变标题,对应的item也会高亮 直接修改路由,初次加载等会自动展开对应的分组,高亮对应的子项 匹配的路由展开和高亮任何..., { Component } from 'react'; import { Link, withRouter } from 'react-router-dom'; // antd import {...│   └── utils # 公用的代码片段,比如一些函数什么的 ├── tests # 存放jest单元测试的目录 │   └── union └── yarn.lock ---- 总结 公司最近打算重构整个后台管理系统

2.9K30

react-router-dom使用指南(最新V6)

Link 做路由跳转不出错 二、路由跳转 在跳转路由,如果路径是/开头的则是绝对路由,否则为相对路由,即相对于当前 URL进行改变 2.1 Link 组件 Link组件只能在Router内部使用,...因此使用Link组件的组件一定要放在顶层的 Router 之内 import { Link } from "react-router-dom"; to foo</Link...react-router 不需操作History对象(Routes 组件会进行操作) 11.2 Location对象 react-router 对 window.location 进行包装后,提供了一个形式简洁的...都是依据外部对象(history)进行导航,而 MemoryRouter 则是自己存储和管理状态堆栈,多用于测试场景。...JS对象定义路由:useRoutes 使用 useRoutes hook,可以使用一个JS对象而不是Routes组件与Route组件来定义路由。

3.8K20

手把手教你全家桶之React(三)--完结篇

/router.js import React from 'react'; import {BrowserRouter as Router,Route,Switch,Link} from 'react-router-dom...缓存我们要解决以下两个问题: 当用户首次访问Home.js,进行文件的加载,第二次访问再进行同样文件的加载吗? 文件做了缓存,我们如果有改动代码,重新打包,我们要如何更新缓存的文件?...公共代码提取 我们打包生成的文件js文件中,都包含了react,redux,react-router这样的代码。然而这些依赖代码我们在很多文件都引用了,而不需要它自动更新。...例如,处于生产环境中,library可能会添加额外的日志log和test。...使用 process.env.NODE_ENV === 'production' ,一些 library 可能针对具体用户的环境进行代码优化,从而删除或添加一些重要代码。

1.1K40
领券