We saw in part 1 of this post on how to test a route component in react using the object containing key as pathname of route and value as the component name. We will look into another way of testing the same component using the memory router. We will be using MemoryRouter from react-router and passing the initialEntries to it.

Let see the component we are going to test. This is the same component we saw in part 1 of the post.

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

export class Home extends Component{
    render(){
        return(
            <div>Home Page</div>
        )
    }
}

export const News = (props)=>{
    const {location} = props;
    return <div>News Feed {location.pathname}</div>
}

export class NoMatch extends Component{
    render(){
        return(
            <div>404 page</div>
        )
    }
}

class Routes extends Component{

  render(){
    return(
      <div>
        <Router>
          <div>
            <Route exact path="/" component={Home}/>
            <Route exact path="/news" component={News}/>
            <Route exact path="/news/techdomain" component={News}/>
            <Route component={NoMatch} />
            <Link to="/" >Home page</Link><br/>
            <Link to="/news">News page</Link><br/>
            <Link to="/news/techdomain">News page for techdomain </Link>

          </div>
        </Router>
      </div>
    )
  }
}

export default Routes;

Testing the component using the memory router

Testing the component with memory router is really simple. We just have to wrap the Routes component with the MemoryRouter and pass some initial entries as the path we want to test. So if we want to test if the News component is loaded for the /news route, pass the prop value as ['/news'] to the MemoryRouter component.

Here is the test file

routes.test.js

import React from 'react';
import { shallow, mount } from 'enzyme';
import Routes, { Home, News, NoMatch } from './Routes';
import { MemoryRouter
} from 'react-router'
import { Route } from 'react-router-dom';

describe('routes using memory router', () => {
  it('should show Home component for / router (using memory router)', () => {
    const component = mount( <MemoryRouter initialEntries = {['/']} >
        <Routes/>
      </MemoryRouter>
    );
    expect(component.find(Home)).toHaveLength(1);
  })
  it('should show No match component for route not defined', () => {
    const component = mount( <MemoryRouter initialEntries = {['/unknown']} >
        <Routes/>
      </MemoryRouter>
    );
    expect(component.find(NoMatch)).toHaveLength(1);
  })
})

So we pass the initial entry as ['/'], and assert it in following way

expect(component.find(Home)).toHaveLength(1);

One advantage is that we can test the 404 route easily by passing a pathname in initial entry array which is not handled by any component, and assert that the NoMatch is present.

const component = mount( <MemoryRouter initialEntries = {['/unknown']} >
        <Routes/>
      </MemoryRouter>
);
expect(component.find(NoMatch)).toHaveLength(1);

So we saw both the ways to test the routes in react using jest - mapping the routes and creating the object, or using the memory router.