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

模仿useHistory并期待toBeCalledWith

问:模仿useHistory并期待toBeCalledWith是什么意思?如何实现?

答:模仿useHistory并期待toBeCalledWith是指在测试过程中,我们可以模拟React Router中的useHistory钩子,并期望其内部的push或replace函数被调用时,传入特定的参数进行断言。这样我们可以验证页面跳转或替换时是否传入了正确的参数。

为了实现这个目标,我们可以创建一个模拟的useHistory函数,它返回一个包含push和replace函数的对象。然后,我们可以使用jest.fn()来创建一个mock函数,用于跟踪push或replace函数是否被调用以及传入的参数。最后,在测试中,我们可以通过jest的toBeCalledWith函数来验证mock函数是否被特定参数调用。

以下是一个示例代码:

代码语言:txt
复制
// 模拟useHistory函数
const useHistoryMock = () => {
  const pushMock = jest.fn();
  const replaceMock = jest.fn();

  return {
    push: pushMock,
    replace: replaceMock,
  };
};

// 在测试中使用模拟的useHistory函数
it('should call push with specific parameter', () => {
  const history = useHistoryMock();
  // 使用模拟的useHistory函数
  jest.mock('react-router-dom', () => ({
    useHistory: () => history,
  }));

  // 运行待测试的代码
  render(<MyComponent />);

  // 断言push函数被调用,并期待传入特定参数
  expect(history.push).toBeCalledWith('/path');
});

以上代码示例中,我们首先创建了一个模拟的useHistory函数useHistoryMock,该函数返回一个包含push和replace函数的对象。然后,我们使用jest.mock来模拟react-router-dom库中的useHistory函数,使其返回我们的模拟函数。最后,在待测试的代码中调用push函数后,我们使用expect来断言push函数是否被调用,并期待传入特定的参数'/path'。

这样,通过模拟useHistory函数并使用mock函数来进行断言,我们可以在测试中模拟页面跳转或替换,并验证传入参数的正确性。

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

相关·内容

  • 一场升级 React-Router 带来的‘血案’

    事故的发生源头就是因为一个全局组件内使用了 React-Router 中的自定义 hooks —— useHistory,具体细节是这样的。...期望: 展示 location 里面的字段。 当路由跳转,history 发生变化,期望组件 Index 也重新渲染,更新展示内容。 这个功能在项目中是一直没有问题的。...useHistory 本质上调用了 useContext ,使用了整个路由库中 Context 的 history 对象。...我们回到小明遇到的问题,之前小明用 useHistory 来订阅路由变化,当路由更新,那么使用 useHistory 的组件会重新渲染,因为之前的逻辑是,路由更新就会更新 history 对象 。...小明使用的组件就是 Child ,而使用的 useHistory 类似于 useName。 当点击按钮改变 value 。Child 更新视图。

    1.4K30

    模仿超越人类围棋手,KL正则化搜索让AI下棋更像人类,Meta&CMU出品

    他们用人类棋谱训练AI模仿让后者超越了人类。 上图分别展示了该方法在国际象棋(左)、围棋(右)的表现。 纵轴为AI与原始模型对弈的胜率,横轴为AI预测人类落子位置的Top-1准确度。...在国际象棋、围棋和无合作的博弈游戏中,这种方法在预测人类的准确性上达到了SOTA水平,同时也大大强于模仿学习策略。...作者选择了遗憾最小化算法(regret minimization algorithms)作为模仿学习的算法,但是非正则化遗憾最小化算法在预测人类专家行为方面的准确性较低。...因此作者引入了新的方法,引入了与搜索策略和人类模仿学习的锚策略之间的KL散度成正比的成本项。此算法被称为策略正则化对冲,简称piKL-hedge。...piKL-hedge的执行步骤如下: 在下图中,piKL-Hedge(绿色)可以生成预测人类博弈的策略,其准确度与模仿学习(蓝色)相同,同时性能强1.4倍。

    49410

    推荐十一个React Hook库

    用TypeScript编写具有内置状态。它还提供了portals样式和大量其他选项的完全定制。 为此编写的文档非常好,其中显示了许多示例,这些示例对于开始使用库/自己做钩子来说绰绰有余。...它提供的主要功能是: useHistory useLocation useParams useRouteMatch 它的名字很不言自明。...UseHistory将获取应用程序历史记录和方法的数据,例如push推送到新路由。UseLocation将返回代表当前URL的对象。UseParams将返回当前路径的URL参数的键-值对的对象。...文档很好,写了很多例子 地址: https://github.com/ReactTraining/react-router 使用案例: import { useHistory, useLocation,...useRouteMatch } from "react-router-dom"; const Example = () => { let history = useHistory(); let location

    4.1K30

    React 进阶 - React Router

    history.forward()、history.go() 方法 原理 BrowserHistory 模式下的 history 库就是基于上面改变路由,监听路由的方法进行封装处理,最后形成 history 对象,传递给...context 改变,会使消费 context 组件更新,触发路由改变时,重新渲染匹配组件 props.history 是通过 BrowserRouter 或 HashRouter 创建的 history 对象,传递过来的...匹配路由,路由匹配,渲染组件 路由状态是用 context 传递的,所以 Route 可以通过 RouterContext.Consumer 来获取上一级传递来的路由进行路由匹配,如果匹配,渲染子代路由 利用...和 useLocation 对于函数组件,可以用 React-Router 提供的自定义 hooks 中的 useHistory 获取 history 对象,用 useLocation 获取 location...对象 import { useHistory, useLocation } from "react-router-dom" function Home() { const history = useHistory

    1.9K21

    告别昂贵耗时!NVIDIA研发团队推出MimicGen系统革新机器人演示数据收集方式

    在机器人技术中,通过大量人类演示进行模仿学习已被证明是构建高效机器人代理的一种有效方法。然而,收集这些演示数据往往既昂贵又耗时。...为了克服这一挑战,研究人员开发了MimicGen系统,该系统能够从少量的人类演示中自动生成大规模、多样化的数据集,从而极大地推动了机器人模仿学习的边界。...模仿学习的现状与挑战 模仿学习,即通过观察和模仿人类操作来训练机器人,已成为一种流行的机器人训练方法。...MimicGen首先将人类演示分割成以对象为中心的片段,然后在新场景中,通过空间变换这些片段、将它们拼接起来,引导机器人沿着这条新轨迹运动,从而收集新的演示数据。 这种方法看似简单,却极其有效。...总之,MimicGen系统以其独特的数据生成方式和对模仿学习的深远影响,正在成为机器人技术领域的一颗璀璨新星。我们期待它在未来的研究和应用中继续发光发热,为机器人技术带来更多的创新和突破。

    24210
    领券