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

Question

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

Please, update the question with the exact error message instead of vague it doesn't work statement, it may help users who have a similar problem. — Estus Flask
– Estus Flask, Commented Sep 24, 2020 at 7:37
@EstusFlask This is the error I get Error: Uncaught [Error: useLocation() may be used only in the context of a <Router> component.], did you read the question?! I've moved it to make it clearer — user2971065
– user2971065, Commented Sep 25, 2020 at 14:34
Thanks. It wasn't clear that the error refers to the scenario where you used __mocks__ rather than no mocks at all. — Estus Flask
– Estus Flask, Commented Sep 25, 2020 at 15:10

Estus Flask · Accepted Answer · 2020-09-24 07:34:27Z

4

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

answered Sep 24, 2020 at 7:34

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Estus Flask Over a year ago

This was the only problem in the code you posted. As for the error, the mock is not picked up. Jest originally expects it alongside node_modules, like you did. If you use create-react-app project, move __mocks__ to src, see github.com/facebook/create-react-app/issues/7539

user2971065 Over a year ago

Thanks! this was the other half of the problem, Once I moved it into src it worked and as you stated it doesn't work with export default, thanks some much you are awesome

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related