Reputation: 25
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
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