How to test React router without errors?

255 Views Asked by At

I've implemented an App component which contains a Route using React and React router:

import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';

import createHeader from './components/header/header';
import createLandingPage from './components/landing-page/landing-page';
import createFooter from './components/footer/footer';

export default React => () => {
  const Header = createHeader(React);
  const LandingPage = createLandingPage(React);
  const Footer = createFooter(React);

return (
    <section id="sectionId">
      <Header />
      <Router>
        <Route exact path="/" component={LandingPage} />
      </Router>
      <Footer />
    </section>
  );
};

The app itself renders and works properly, as I can go to my browser and see everything as expected.

The problem arises when I try to implement proper testing, which runs in Node.js without a browser:

import test from 'tape';
import dom from 'cheerio';
import React from 'react';
import reactDom from 'react-dom/server';
import { MemoryRouter } from 'react-router';

import createApp from './app';

const render = reactDom.renderToStaticMarkup;

test('App init & render', assert => {
  const message = 'It sohuld initialize and render the app.';

  const App = createApp(React);
  const $ = dom.load(render(
    <MemoryRouter>
      <App />
    </MemoryRouter>
  ));
  const output = $('#jptv').length;

  const actual = output > 0;
  const expected = true;

  assert.equal(actual, expected, message);
  assert.end();
});

I used MemoryRouter to wrap my app as indicated in React docs to avoid errors, but with or without it, I have the same error when running the test in the console:

Invariant Violation: Browser history needs a DOM

My guess is that I cannot run a component using BrowserRouter out of the browser, yet I don't understand what would be the proper way to test it, as I don't want to force myself to manipulate the code as to fit the test environment shortcomings.

I've searched the web and look into similar issues, but I cannot find an answer, and the docs offer little if no useful information to deal with this.

Any help will be most appreciated. Thanks!

0

There are 0 best solutions below