Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How do I create a smoke test for a React app?

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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?

>Solution :

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

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading