2

I am running a create-react-app with react-16.8.6, and no modifications except for adding react-router to the mix. Now tests don't work.

After rolling things back, I found that the base test fails as soon as I import ANY part of the "react-router-dom" library. Any ideas whats going wrong?

Below is the App.js and App.test.js when I comment out the line:

import { Switch } from "react-router-dom";

the tests run without issue. When I return the line to the code I get the following error:

Test suite failed to run

Cannot find module 'react' from 'react-router-dom.js'

However, Jest was able to find:

'./App.css'
'./App.js'
'./App.test.js'

App.js

import React from "react";
import { Switch } from "react-router-dom";
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <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>
  );
}

export default App;

app.test.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

it("renders without crashing", () => {
  const div = document.createElement("div");
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});
3
  • I can see that you're importing Switch but not using it anywhere, and although it shouldn't matter I'd suggest that if you're importing it you might as well use it. Commented Jun 8, 2019 at 11:07
  • there is something weird. jest is successfully importing react-router-dom into your test but when react-router-dom.js itself tries to import from 'react' it just fails to find a module. Maybe your jest confirguration(check jest branch in your package.json) may bring additional details. Commented Jun 8, 2019 at 11:07
  • @DorShinar In my full application I am using Switch - the code above is just showing where I got to by removed everything from my application in steps to figure out what was causing the error and what I found was that the even just importing switch caused problems. Commented Jun 8, 2019 at 21:44

2 Answers 2

2

That might be some package manager installation issues. Try to do a fresh install:

rm -rf ./node_modules && rm yarn.lock && yarn

or in case if you're using npm:

rm -rf ./node_modules && rm package-json.lock && npm install

BTW, what is the version of the react-router-dom that you're installing? I've just tried it on the new create-react-app project, installed the latest version of router, but can't reproduce this error (enter image description here)

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

3 Comments

Thanks for the help. I tried removing the node_modules and package-json.lock and re-installing as you suggest, but the problem still continues. My react router dom version is "react-router-dom": "^5.0.1"
@Finglish just to be sure - have you tried yarn? but don't think that's the real cause, I've also tried to npm it, and same result - nothing fails... strange
@Skyrocket . I marked your answer correct, as the issue ended up being with the node modules. Although clearing and reinstalling didn't help. What resolved it in the end was using the depcheck package to check for missing dependencies and installing them. Not sure why the missing dependencies wasn't throwing an error in the main app but now everything is working. Thanks again!
0

Ran into the same issue, and was thinking I could elaborate on the solution for people who run into the same.

It is not resolved by deleting node_modules and yarn.lock/package-lock.json. Instead, as @Finglish mentions in their comment above, you probably have missing dependencies.

To fix the missing deps:

  1. Get the depcheck package.
  2. Run it in your project folder to see which dependencies you're missing.
  3. Install the missing dependencies.
  4. Run tests again to make sure everything is working.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.