How to solve an Enzyme/Jest error "Cannot find module 'react' from 'react-router.js'" in a React project

Question

I've been attempting to learn Jest and Enzyme and have done OK on a few very simple tests. Now I'm trying to really peer into the dom and really check functionality. Unfortunately, my latest test fails with Cannot find module 'react' from 'react-router.js'. I've read well over twenty related articles here and found no solutions that help my problem. I have tried deleting the node_modules directory and reinstalling everything with npm install. I'm really not sure what else to try at this point. My test file and some config files and snippets are below:

My test file (NavigationItems.test.js

import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import NavigationItems from './NavigationItems';
import NavigationItem from './NavigationItem/NavigationItem';

configure({adapter: new Adapter()});

describe('<NavigationItems />', () => {
    let wrapper;
    beforeEach(() => {
        wrapper = shallow(<NavigationItems />);
    });

    it('should render two <NavigationItem /> elements if not authenticated', () => {
        expect(wrapper.find(NavigationItem)).toHaveLength(2);
    });

    it('should render three <NavigationItem /> elements if authenticated', () => {
        wrapper.setProps({isAuthenticated: true});
        expect(wrapper.find(NavigationItem)).toHaveLength(3);
    });    

    it('should contain <NavigationItem link="/logout"> if authenticated', () => {
        wrapper.setProps({isAuthenticated: true});
        expect(wrapper.contains(<NavigationItem link="/logout">Logout</NavigationItem>)).toEqual(true);
    });

    it('should contain <NavigationItem link="/campaigns"> if authenticatated and props.privileges includes APP_USER', () => {
        wrapper.setProps({isAuthenticated: true, privileges: [ 'APP_USER' ]});
        expect(wrapper.contains(<NavigationItem link="/campaigns">Campaigns</NavigationItem>)).toEqual(true);
    });

    it('should contain <NavigationItem link="/notes"> and <NavigationItem link="/characters">Characters</NavigationItem> if authenticatated and selectedCampaign exists', () => {
        wrapper.setProps({isAuthenticated: true, selectedCampaign: 'Generic'});
        expect(wrapper.contains(<NavigationItem link="/notes">Notes</NavigationItem>)).toEqual(true);
        expect(wrapper.contains(<NavigationItem link="/characters">Characters</NavigationItem>)).toEqual(true);
    });
});

A snippet from package.json showing I have react and react-router installed

{
  "name": "sw_notes",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.0.2",
    "@testing-library/user-event": "^12.1.3",
    "axios": "^0.20.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-test-renderer": "^16.13.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "suneditor-react": "^2.14.2",
    "websocket-extensions": "^0.1.4"
  },

I have a jest.config.js file (and there is no jest config info in package.json)

module.exports = {
    resolver: require.resolve(`jest-pnp-resolver`),
    testEnvironment: `node`,
    verbose: true,
};

Victor Santiago Manzanilla Victor Santiago Manzanilla · Accepted Answer · 2021-05-26T16:42:49

When i tried to run my jest test, I had this error:

Cannot find module 'react' from '../node_modules/react-router/cjs/react-router.js'

The solution was to install the react-router-dom package:

npm install react-router-dom --save

How to solve an Enzyme/Jest error "Cannot find module 'react' from 'react-router.js'" in a React project

1 Answers