如何使用 __mocks__ 目录中的 jest 模拟 react-router-dom

Question

我有一个正在测试提供程序的测试，它使用 react-router 6 useLocation

"react-router-dom": "^6.0.0-beta.0",

当我在文件中模拟时它工作正常

import React from 'react';
import { render } from '@testing-library/react';
import Categories from './Categories';
import mockCategories from '../../__mocks__/mockCategories';
import ExpenditureProvider from '../../domains/Expenditure/ExpenditureProvider';

jest.mock('react-router-dom', () => {
  const originalModule = jest.requireActual('react-router-dom');

  return {
    __esModule: true,
    ...originalModule,
    useNavigate: jest.fn(),
    useLocation: jest.fn().mockReturnValue({ pathname: '/'}),
  };
});

describe('Categories', () => {
  test('should render Categories component', () => {
    const categories = render(
      <ExpenditureProvider>
        <Categories categories={mockCategories}/>
      </ExpenditureProvider>
      );
  });
});

但是当我尝试将其放入__mocks__ 目录时，这是我得到的错误

Error: Uncaught [Error: useLocation() may be used only in the context of a <Router> component.]

// __mocks__/react-router-dom.js

const originalModule = jest.requireActual('react-router-dom');
export default {
  __esModule: true,
  ...originalModule,
  useLocation: jest.fn().mockReturnValue({ pathname: '/'}),
  useNavigate: jest.fn()
}

mock 文件在 node_modules 的根目录下

├── __mocks__
│   └── react-router-dom.js
├── node_modules
├── src
│ 

我想做的只是从__mocks__ 目录模拟，因为这个模拟用于多个测试

Answer 1

mock 错误地将模块内容导出为default 而不是*。无法使用 ES 模块 export 语法动态定义 * 导出。需要使用 CommonJS 导出，它的工作方式与 jest.mock 返回相同，__esModule: true 使其工作方式类似于 * ESM 导出：

const originalModule = jest.requireActual('react-router-dom');
module.exports = {
  __esModule: true,
  ...originalModule,
  useLocation: jest.fn().mockReturnValue({ pathname: '/'}),
  useNavigate: jest.fn()
}