无法用开玩笑模拟浅安装组件的反应 useLocation 挂钩答案

【问题标题】：Unable to mock the react useLocation hook with jest for shallow mounted component无法用开玩笑模拟浅安装组件的反应 useLocation 挂钩
【发布时间】：2022-11-22 21:30:56
【问题描述】：

我正在尝试测试使用 useLocation 反应挂钩的组件，但即使我模拟了它，useLocation().pathname 也会导致错误，因为 useLocation 未定义。

我的另一个问题是，如果我在此测试文件中成功地模拟了 useLocation()，它是否也适用于其余部分？有没有办法只为一个笑话测试文件模拟模块？

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useLocation: jest.fn().mockReturnValue({
    pathname: '/route'
  })
}));

describe('ComponentUsingLocation', () => {
  test('should render', () => {
    const wrapper = shallow(
      <ComponentUsingLocation />
    );

    expect(wrapper).toMatchSnapshot();
  });
});

【问题讨论】：

shallow 不会渲染 hook
有什么方法可以访问浅安装组件中的 useLocation().pathname 吗？
不，尝试挂载或react-hooks-testing-library.com
谢谢！我也知道可以使用 jest.spyOn()
jest-react-hooks-shallow 确实有帮助，而不是使用 jest.fn().mockImplementation，用常规函数替换它就可以了，不过，不知道这个 mock 是否可以在它定义的文件中工作，或者他们全部？

标签： javascript reactjs jestjs

【解决方案1】：

你能试一下吗

jest.mock('react-router-dom', () => ({
  ...jest.requireActual("react-router-dom") as {},
  useLocation: jest.fn().mockImplementation(() => {
      return {
        pathname: "/route",
        search: '',
        hash: '',
        state: null
      };
  })
}));

并回答你的第二个问题，如果你想让它在文件内的所有测试用例中工作，你可以在 beforeAll() jest 函数上模拟它。

【讨论】：

这没有用，但我发现了一些东西： jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useLocation: () => ({ 路径名: 'localhost:3000/example/path' }) }));

【解决方案2】：

似乎不同的实现确实有效，出于某种原因不使用 jest.fn().mockReturnValue 而是简单地使用常规函数来完成这项工作。

我还在标准的 react-scripts 项目中安装了 jest-react-hooks-shallow 包。

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useLocation: () => ({
    pathname: 'localhost:3000/example/path'
  })
}));

【讨论】：