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

使用withRouter和connect,如何在酶中断言调用了history.push?

使用withRouter和connect,可以在酶中断言调用了history.push的方式如下:

  1. 首先,确保你的组件已经使用了withRouter进行包装,以便能够访问到路由相关的属性和方法。
代码语言:txt
复制
import { withRouter } from 'react-router-dom';

class YourComponent extends React.Component {
  // ...
}

export default withRouter(YourComponent);
  1. 然后,在测试文件中,使用enzyme的shallow函数来渲染你的组件,并使用jest.fn()创建一个mock函数来模拟history.push方法。
代码语言:txt
复制
import { shallow } from 'enzyme';
import { createMemoryHistory } from 'history';

// 导入你的组件
import YourComponent from './YourComponent';

describe('YourComponent', () => {
  it('should call history.push when something happens', () => {
    const history = createMemoryHistory();
    const pushMock = jest.fn();
    history.push = pushMock;

    // 使用shallow渲染组件
    const wrapper = shallow(<YourComponent />, {
      context: { router: { history } },
    });

    // 模拟触发某个事件或条件
    // ...

    // 断言history.push被调用
    expect(pushMock).toHaveBeenCalledWith('/your-path');
  });
});

在这个例子中,我们使用了enzyme的shallow函数来浅渲染组件,并通过context属性传递了模拟的history对象。然后,我们创建了一个mock函数pushMock来模拟history.push方法,并将其赋值给history对象。最后,在断言部分,我们使用expect语句来验证history.push是否被调用,并传入了预期的路径参数。

需要注意的是,这里使用了createMemoryHistory来创建一个内存中的history对象,以便在测试中模拟路由的跳转。另外,如果你的组件中使用了connect函数来连接Redux的状态和操作,也需要确保在测试文件中正确地配置Provider和store。

希望以上内容能够帮助到你!如果有任何疑问,请随时提问。

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

相关·内容

React 进阶 - React Router

# React 路由原理 BrowserHistory 模式 改变路由 通过调用 api 实现的路由跳转,如在 React 应用调用 history.push 改变路由,本质上是调用 window.history.pushState...window.history.pushState history.pushState(state, title, path) state:一个与指定网址相关的状态对象, popstate 事件触发时,该对象会传入回函数...一般不会直接使用 Router ,而是使用 React-Router-DOM BrowserRouter 或者 HashRouter ,两者关系就是 Router 作为一个传递路由更新路由的容器...对于距离路由组件比较远的深层次组件,通常可以用 React-Router 提供的 withRouter 高阶组件方式获取 histroy ,loaction 等信息 import { withRouter...const age = 18 history.push(`/home?

1.8K21

从零手写react-router

match对象方法history库的使用RouterBrowserRouter的实现Route组件的实现SwitchRedirect的实现withRouter的实现LinkNavLink实现聚合api...回函数又接收两个参数(location对象, action), 他返回一个函数用于解除监听, 后续我们用到的时候我相信你就懂了location对象: 表达当前地址栏的信息createHref: 传递一个..., LinkNavLink本身也不难如果要说简单一点, 就写个a元素阻止默认事件然后使用history.push跳转就行了, 毕竟人家也就实现了一个无刷新跳转的功能我们在react-router-dom...match对象方法history库的使用RouterBrowserRouter的实现Route组件的实现SwitchRedirect的实现withRouter的实现LinkNavLink实现聚合api..., LinkNavLink本身也不难如果要说简单一点, 就写个a元素阻止默认事件然后使用history.push跳转就行了, 毕竟人家也就实现了一个无刷新跳转的功能我们在react-router-dom

3.1K30

Nodejs编写异步的单元测试代码

在Nodejs的开发过程,异步这个话题是无论如何都躲不过去的,关于异步的文章已经有过许多篇了,我也不打算写在开发Web应用的过程,该如何在Nodejs处理异步代码。...使用的测试框架是Mocha,断言库是Chai,那么今天我们就来聊聊在单元测试,处理异步代码的各种姿势。 处理promise const { query } = require('.....catch(err => { done(err); throw err; }); }); }); 先来看看今天的例子,这段代码就是测试数据库连接状态的库,在断言我偏向于使用...const { should } = require('chai'); ... should(); 在这样引用了should之后,是无法像刚才代码那样使用should的,为什么我会写出这样的语法呢?...function不要再加入done回的,不然测试程序会一直等待你的done回,当超时之后就会报错了。

1.4K10

优雅的在 react 中使用 TypeScript

写在最前面 为了在 react 更好的使用 ts,进行一下讨论 怎么合理的再 react 中使用 ts 的一些特性让代码更加健壮 讨论几个问题,react 组件的声明?...react 高阶组件的声明使用?class组件 props state 的使用?......只要在组件内部使用了propsstate,就需要在声明组件时指明其类型。 但是,你可能发现了,只要我们初始化了state,貌似即使没有声明state的类型,也可以正常调用以及setState。...componentDidMount() { this.state.a // ok: 1 //正确的使用了 ts 泛型指示了 state 以后就会有正确的提示...因为react的高阶组件本质上是个高阶函数的调用,所以高阶组件的使用,我们既可以使用函数式方法调用,也可以使用装饰器。

2.7K10

从零手写react-router

match对象方法history库的使用RouterBrowserRouter的实现Route组件的实现SwitchRedirect的实现withRouter的实现LinkNavLink实现聚合api...回函数又接收两个参数(location对象, action), 他返回一个函数用于解除监听, 后续我们用到的时候我相信你就懂了location对象: 表达当前地址栏的信息createHref: 传递一个..., 所以我们仔细想想这个逻辑应该很快就出来了, 我们只要在Switch里将children属性挨个遍历然后控制渲染就可以了, 我们从react-router官方的逻辑也可以想到大概是这么回事: 因为你使用了官方...history.push来处理(因为他默认会使用replace) // 其他的就是Route该有的属性: exact, sensitive, strict const { from = "", to..., LinkNavLink本身也不难如果要说简单一点, 就写个a元素阻止默认事件然后使用history.push跳转就行了, 毕竟人家也就实现了一个无刷新跳转的功能我们在react-router-dom

1.4K40

从零手写react-router

match对象方法history库的使用RouterBrowserRouter的实现Route组件的实现SwitchRedirect的实现withRouter的实现LinkNavLink实现聚合api...回函数又接收两个参数(location对象, action), 他返回一个函数用于解除监听, 后续我们用到的时候我相信你就懂了location对象: 表达当前地址栏的信息createHref: 传递一个..., 所以我们仔细想想这个逻辑应该很快就出来了, 我们只要在Switch里将children属性挨个遍历然后控制渲染就可以了, 我们从react-router官方的逻辑也可以想到大概是这么回事: 因为你使用了官方...history.push来处理(因为他默认会使用replace) // 其他的就是Route该有的属性: exact, sensitive, strict const { from = "", to..., LinkNavLink本身也不难如果要说简单一点, 就写个a元素阻止默认事件然后使用history.push跳转就行了, 毕竟人家也就实现了一个无刷新跳转的功能我们在react-router-dom

1.5K50

手写react-router

match对象方法history库的使用RouterBrowserRouter的实现Route组件的实现SwitchRedirect的实现withRouter的实现LinkNavLink实现聚合api...回函数又接收两个参数(location对象, action), 他返回一个函数用于解除监听, 后续我们用到的时候我相信你就懂了location对象: 表达当前地址栏的信息createHref: 传递一个..., 所以我们仔细想想这个逻辑应该很快就出来了, 我们只要在Switch里将children属性挨个遍历然后控制渲染就可以了, 我们从react-router官方的逻辑也可以想到大概是这么回事: 因为你使用了官方...history.push来处理(因为他默认会使用replace) // 其他的就是Route该有的属性: exact, sensitive, strict const { from = "", to..., LinkNavLink本身也不难如果要说简单一点, 就写个a元素阻止默认事件然后使用history.push跳转就行了, 毕竟人家也就实现了一个无刷新跳转的功能我们在react-router-dom

1.3K40

从零手写react-router_2023-03-01

match对象方法 history库的使用 RouterBrowserRouter的实现 Route组件的实现 SwitchRedirect的实现 withRouter的实现 LinkNavLink...回函数又接收两个参数(location对象, action), 他返回一个函数用于解除监听, 后续我们用到的时候我相信你就懂了 location对象: 表达当前地址栏的信息 createHref:..., 所以我们仔细想想这个逻辑应该很快就出来了, 我们只要在Switch里将children属性挨个遍历然后控制渲染就可以了, 我们从react-router官方的逻辑也可以想到大概是这么回事: 因为你使用了官方...history.push来处理(因为他默认会使用replace) // 其他的就是Route该有的属性: exact, sensitive, strict const { from = "",..., LinkNavLink本身也不难 如果要说简单一点, 就写个a元素阻止默认事件然后使用history.push跳转就行了, 毕竟人家也就实现了一个无刷新跳转的功能 我们在react-router-dom

1.3K30

应用connected-react-routerredux-thunk打通react路由孤立

解决这个问题的方法很简单,找到connect并且将它用withRouter包裹: // before export default connect(mapStateToProps)(Something)...// after import { withRouter } from 'react-router-dom' export default withRouter(connect(mapStateToProps...在使用一些 redux 的connect()或者 mobx的inject()的组件,如果依赖于路由的更新要重新渲染,会出现路由更新了但是组件没有重新渲染的情况。...所以在使用 withRouter 解决更新问题的时候,一定要保证 withRouter 在最外层,比如withRouter(connect()(Component)),而不是 connect()(withRouter...store高级用法 如果store使用了中间件middleware增强器enhaners,代码要修改下: import { createStore, applyMiddleware, compose

2.3K00

深入揭秘前端路由本质,手写 mini-router

路由的区别 一般来说,浏览器端的路由分为两种: hash 路由,特征是 url 后面会有 # 号, baidu.com/#foo/bar/baz。 history 路由,url 普通路径没有差异。...('foo') 的时候,本质上就是调用了 window.history.pushState 去改变路径,并且通知 listen 所挂载的回函数去执行。...Route 组件,你就会看到它们是如何这个简单的 history 库结合使用了。...[location, setLocation] = useState(history.location); // 初始化的时候 订阅 history 的变化 // 一旦路由发生改变 就会通知使用了...,实际上真正的实现考虑的情况比较复杂,使用了 path-to-regexp 这个库去处理动态路由等情况,但是核心原理其实就是这么简单。

1.4K41

React-Router 5.0 制作导航栏+页面参数传递

在React,常用的有两个包可以实现这个需求,那就是react-routerreact-router-dom。本文主要针对react-router-dom进行说明。...BrowserRouter HashRouter特点 在URL采用#号来作为当前视图的地址,改变#号后的参数,页面并不会重载 BrowserRouter特点 正常浏览网易url类似 页面并不会重载...导航代码剖析 BrowserRouter HashRouter已经介绍过了 两种url不同的展现形式 定义路由时使用了三种不同的方式: 指定component对应的组件 将组件作为子组件 对router...history对象的需要使用withRouter这个高阶函数 进行history注入 第三种可以直接传入props 直接拥有history对象 比较方便 Switch组件: 类似于编程语言的条件控制语句...NavLink Link 这两个组件都是对 A链接 的一种封装 但是使用场景不太一样 如果选择导航栏的时候使用NavLink非常合适 因为他直接提供activeStyle

3.4K10

React学习(最终篇)—— 高阶应用:高阶组件(HOCs)

HOCs通常以第三方React组件库的方式呈现,比如Redux的 connect  Relay的 createContainer。... 没有任何关系,他们只是都调用了DataSource不同的方法以获取特定的数据。...由于是一个纯函数,所以即使对其继续使用HOC包装也不会有任何问题。 在前面的介绍,HOCs容器组件的实现模式有相似之处。容器组件是将高级组件底层组件整合在一起形成连接的一部分。...: // 例子用于实现这个过程 // const EnhancedComponent = connect(commentSelector)(withRouter(WrappedComponent))...,通过这个回将ref通过props传递到外部 this.inputEl = inputEl }} /> // 然后直接使用 this.inputEl.focus();

1.6K41

DvaJS入门解析

reducer store,异步action等的抽象概念。...action 必须带有 type 属性指明具体的行为,其它字段可以自定义,如果要发起一个 action 需要使用 dispatch 函数;需要注意的是 dispatch 是在组件 connect Models...在 dva connect Model 的组件通过 props 可以访问到 dispatch,可以调用 Model 的 Reducer 或者 Effects,常见的形式: dispatch({...并且,每一次的计算都应该使用immutable data,这种特性简单理解就是每次操作都是返回一个全新的数据(独立,纯净),所以热重载时间旅行这些功能才能够使用。...所以在 dva ,通常需要 connect Model的组件都是 Route Components,组织在/routes/目录下,而/components/目录下则是纯组件(Presentational

72230

「源码解析 」这一次彻底弄懂react-router路由原理

个人理解,单页面应用是使用一个html下,一次性加载js, css等资源,所有页面都在一个容器页面下,页面切换实质是组件的切换。 ?...所谓BrowserRouterHashRouter,也只不过用了history库createBrowserHistorycreateHashHistory方法 react-router-dom 我们不多说了...hashIndex : 0) + '#' + path ) } 在hash模式下 ,history.push 底层是调用了window.location.href来改变路由。...使得我们可以在页面组件的props获取location ,match等信息。 4 Redirect-没有符合的路由,那么重定向 重定向组件, 如果来路由匹配上,会重定向对应的路由。...五 总结 + 流程分析 总结 history提供了核心api,监听路由,更改路由的方法,已经保存路由状态state。

3.8K40

React的高阶组件

HOC在React的第三方库很常见,例如Redux的connectRelay的createFragmentContainer。...Mixin是一种混入的模式,在实际使用Mixin的作用还是非常强大的,能够使得我们在多个组件中共用相同的方法,但同样也会给组件不断增加新的方法属性,组件本身不仅可以感知,甚至需要做相关的处理(例如命名冲突...const EnhancedComponent = logProps(InputComponent); 这样做会产生一些不良后果,其一是输入组件再也无法像HOC增强之前那样使用了,更严重的是,如果你再用另一个同样会修改...同样的属性也允许connect其他HOC承担装饰器的角色。此外许多第三方库都提供了compose工具函数,包括lodash、ReduxRamda。...const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent)) // 你可以编写组合工具函数 // compose

3.8K10

React知识图谱

Antd3 Form、react-redux connect、react-router withRouter等 传送门createPortal ReactDOM.createPortal(child,...使用场景react-redux的connect。 useContext 接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。...以上三者对比 redux是集中式管理state,而recoilmobx都是分散式。 recoil状态的读写都是Hooks函数,目前没有提供类组件的使用方式。...MemoryRouter:把 URL 的历史记录保存在内存的 (不读取、不写入地址栏)。在测试非浏览器环境很有用,React Native。...只是如果你不会国际化、权限、数据流、配置式路由等问题,还是不要用了。 组件库 Antd 蚂蚁的,使用很广泛,风格素雅简洁。

29920
领券