Javascript 如何在这个自定义挂钩中模拟下一个路由器？

我有一个定制的钩子，在很多地方都使用它，它拦截一个back操作并调用传入的函数。我希望验证是否在beforePopState中调用了正确的函数。我该怎么嘲笑这个呢

const useBackNavigationIntercept = (action) => {
  const router = useRouter();

  useEffect(() => {
    router.beforePopState(() => {
      action();

      return false;
    });
  }, [action, router]);
};

我有一个测试，我试图模拟路由器，以便在路由中有一个特定的值，当调用钩子时，调用相应的拦截操作

e、 g.测试使用挂钩的部件：

import actions from '../../actions'

const SomeComponent = () => {
  ...
  const router = useRouter();
  const { country } = router.query;

  useBackNavigationIntercept(() => actions.someFunction(country));
  ...
}

并希望验证是否使用

UK

作为参数调用了

someFunction

非常感谢您的帮助，谢谢

更新：

someFunction

模拟如下：

import actions from '../../actions';
jest.mock('../../actions');
jest.mock('next/router', () => ({
  useRouter: jest.fn().mockImplementation(() => ({
    query: {
      country: 'UK',
    },
    beforePopState: require.requireActual('next/router'),
  })),
}));
...

// I'm expecting to be able to do something like this

it('calls someFunction with the correct args', () => {
  render(<SomeComponent {...props} />
  history.back();
  expect(actions.someFunction).toHaveBeenCalledWith('UK')
});

从“../../actions”导入操作；
jest.mock（'../../actions'）；
jest.mock（'next/router'，（）=>({
useRouter:jest.fn（）.mockImplementation（（）=>({
查询：{
国家：'英国'，
},
beforePopState:require.requireActual（'next/router'），
})),
}));
...
//我希望能做这样的事情
它（'使用正确的参数调用someFunction'，（）=>{
渲染(
历史。返回（）；
expect（actions.someFunction）.与（'UK'一起调用）
});

您需要模拟导入

。/actions

并为其提供间谍方法

棘手的部分是测试中文件的导入顺序，因为您希望在组件代码导入之前模拟导入

它应该是这样的：

//SomeComponent.spec.jsx
const actionsMock={
someFunction:jest.fn（）
};
jest.mock（'../../actions'，（）=>actionsMock）；
jest.mock（'next/router'，（）=>({
useRouter:jest.fn（）.mockImplementation（（）=>({
查询：{
国家：'英国'，
},
beforePopState:require.requireActual（'next/router'），
})),
}));
const SomeComponent=require（“../path to/SomeComponent”）
//------------------------它应该是必需的，而不是导入的
//因为“导入”必须是文件中的第一件事，我们有我们的模拟定义
它（'使用正确的参数调用someFunction'，（）=>{
渲染（；
历史。返回（）；
expect（actionsMock.someFunction）.toHaveBeenCalledWith（'UK'）；
});

someFunction来自何处？

someFunction

可以是任何东西，例如，我可以在别处定义一个

注销

函数，并在钩子回调中调用它。您正在测试一个特定组件，它使用您的自定义钩子，该组件从何处获取someFunction？我有一个定义的重用列表在另一个文件中，我只是在测试中模拟它（更新以反映这一点），

SomeComponent

从哪里获得

someFunction

函数？它是硬编码的吗？它是通过导入获得的吗？