CODEWITHSUNDEEP
reactjsunit-testingreact-routerjestjs
user2971065
user2971065

Reputation: 25

How do I mock react-router-dom using jest from a __mocks__ directory

I have a test that is testing a provider, which is using react-router 6 useLocation

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

It works fine when I mock in the file

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>
      );
  });
});

but when I try to put this a __mocks__ directory, This is the error I get

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()
}

The mock file is in the root directory with node_modules

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

What I would like to do is only mock from the __mocks__ directory because this mock is used in multiple tests

Upvotes: 2

Views: 3555

Answers (1)

Estus Flask
Estus Flask

Reputation: 223318

The mock incorrectly exports module contents as default instead of *. There is no way to define * export dynamically with ES module export syntax. CommonJS export needs to be used instead, it works the same way as jest.mock return, __esModule: true makes it work like * ESM export:

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

Upvotes: 4

Related Questions