I want to create a smoke test for my first Create React App. I want something that just checks it can render without crashing.

My index.js is this:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

import App from "./App";
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <BrowserRouter basename="/branch/api/route/">
      <App />
    </BrowserRouter>,
  document.getElementById("root")
);

reportWebVitals();

My App.js looks like this:

import React from "react";
import { useLocation, Switch, Route, Redirect } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "@fortawesome/fontawesome-free/css/all.css";
import "@fortawesome/fontawesome-free/js/all.js";
import "./App.css";
import Version from '../Version/Version';
import DesignInputList from "../DesignInputList/DesignInputList";
import { Home } from "../Home/Home"
import Nav from "../Nav/Nav";
import NotFound from "../NotFoundPage/NotFoundPage";


function App() {
  const { pathname } = useLocation();
  return (
      <div className="App">
        <Nav/>
        <Switch>
          <Redirect from="/:url*(/ )" to={pathname.slice(0, -1)} />
          <Route exact path="/" component={Home} />
          <Route exact path="/search" component={DesignInputList} />
          <Route exact path="/about" component={Version} />
          <Route component={NotFound} />
        </Switch>
      </div>
  );
}

export default App;

And my test is supposed to "mount a component and make sure that it didn’t throw during rendering":

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

But every time I'm getting the following error:

TypeError: Cannot read property 'location' of undefined

Do I have to mock that dependency on react-router-dom?

CodePudding user response：

There was a question that was already asked that may solve your issue.

How do you mock useLocation() pathname using shallow test enzyme Reactjs?