Блог

У меня есть тест, который проверяет провайдера, который использует 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()
}

  

Макет файла находится в корневом каталоге с node_modules

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

То, что я хотел бы сделать, это только макет из __mocks__ каталога, потому что этот макет используется в нескольких тестах

Макет неправильно экспортирует содержимое модуля как default вместо * . Невозможно * динамически определять экспорт с export помощью синтаксиса модуля ES. Вместо этого необходимо использовать CommonJS export, он работает так же, как jest.mock return, __esModule: true и работает как * ESM export:

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