cannot detect installed react-router-dom package when running unit tests

Question

I want to learn react testing library with react-router-dom. I created the app using npx create-react-app command. The resulting code already has an App.test.js in the parent folder:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

When I run npm test, it passes successfully as expected. I installed React-Router-DOM with npm i react-router-dom and I wrapped the main App.js with the BrowserRouter component.

import { BrowserRouter } from 'react-router-dom'
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </BrowserRouter>
  );
}

export default App;

But now the test failed with the following error:

Cannot find module 'react-router-dom' from 'src/App.js'

screenshot of the failed test message

Why the unit test cannot detect react-router-dom, which has already properly installed?

Github repo of my code so far.

Note: I have already tested wrapped my component using MemoryRouter instead of BrowserRouter, but still the same error.

Rolling back to RRDv6 your code runs without issue. This seems to be more an issue with the way you've bootstrapped your project with Create-React-App, which is effectively deprecated, and how Jest is setup/configured. The RRD maintainers recommend using Vite. I noticed also you are using older versions of React-Testing-Library. A lot has also changed there with newer versions of React. I suspect you'll want to upgrade to modern versions of your testing dependencies. — Drew Reese
– Drew Reese, Commented Dec 6, 2024 at 6:47
FWIW here's a link to a running CodeSandbox demo stood up from scratch with your code copy/pasted in and it all works without issue. I think there's just something odd with the way you have created your project. — Drew Reese
– Drew Reese, Commented Dec 6, 2024 at 7:36

Mannkumar Pandya · Accepted Answer · 2024-12-06 06:12:37Z

-1

Everything seems fine, just update the BrowseRouter import from this in App.js:

import { BrowserRouter } from 'react-router-dom'

to this:

import { BrowserRouter } from 'react-router';

-> Please make sure you have these 3 packages installed:

react-dom
react-router
react-router-dom

Hope this helps..

reference: https://www.npmjs.com/package/react-router-dom

answered Dec 6, 2024 at 6:12

Mannkumar Pandya

354 bronze badges

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

10 Comments

Petrando Richard Over a year ago

Not working, importing BrowserRouter from 'react-router' just changes the error message into ReferenceError: TextEncoder is not defined

bman Over a year ago

@PetrandoRichard, the insutrciton was correct and actually solved your problem. Now you have another problem. You need to find the references to TextEncoder to see which package they are coming from and install that package.

Drew Reese Over a year ago

@bman That is not necessarily true... it could simply be creating a new error that occurs earlier and masks the current error. One also could say to uninstall react-router-dom and delete that import and code and say it "fixed the problem". OP could take your advice and maybe fix this new error and be right back where they are now with the original error still.

Petrando Richard Over a year ago

@bman an actual solution that does not create new problem

Mannkumar Pandya Over a year ago

@DrewReese I copied the code provided by OP into playground and did as I answered, and in my case, code worked without any error, so I posted the answer, if you are sure answer is wrong, I will be super happy to delete the answer, but maybe the OP is actually facing any other error! Atleast try not to be rude.

|

ivanlp4 · Accepted Answer · 2025-02-17 12:48:02Z

-1

I had the same problem and, as one commentator said, I downgraded react router to v6 with npm i react-router-dom@6. It helped me.

answered Feb 17 at 12:48

ivanlp4

12 bronze badges

Collectives™ on Stack Overflow

cannot detect installed react-router-dom package when running unit tests

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related