Prevent any routing misfortune in your React app

Laurent Ros
Jan 8, 2019 · 2 min read

A few weeks ago, my team suffered a regression: one developer decided to re-order all the routes alphabetically and one page was not rendered anymore.

We are currently using react-router-dom v4.3.1 and before the regression, our code basically looked like:

On the React Router documentation, you can read: Switch renders the first child <Route> or <Redirect> that matches the location.

The second path="/posts" is here more generic and goes first alphabetically. Therefore, after re-ordering the routes, the component rendered on a route like posts/post/8 was AllPosts, instead of SpecificPost. Hence our regression.

We could have used exact on <Route exact path="/posts" component={AllPosts} /> but that would mean that routes like posts/blablabla would not be matched: the AllPosts component would not be our fallback on those routes anymore.

Should we test this?

Indeed, testing it brings multiple benefits:

  • it raises the alarm in case of regressions
  • it saves us time by not having to test all the cases manually every time (less frustrating and time effective)
  • it documents the components rendered by the routes and their edge cases for new developers coming in

I however looked it up, and found no official nor clear way to test this.

How do we test this?

  • Robust: We are testing the behavior and not the implementation. It should not care about what’s inside the rendered component (I don’t want to have to mock all of react-intl, redux states … for each component. And the test results should not be impacted by those)
  • Useful: raise an error when the rendered component is not the one expected
  • Fast

Therefore, we didn’t want to render the real pages in the test (they require a lot of data and are quite long to render).
So we jest.mock’ed all of our pages imports, replacing them with simple <div id="myPageName" /> that we’ll use to test.
Here is our solution for the testing of our <Switch> component:

That’s it! Tell me what you think about it ;)

PS: If you don’t want to test this component and make it entirely declarative, you can for instance have a default fallback component, like a 404 page, and set all the other routes as exact .

Sipios

Sipios conceives and develops tailored products in record…

Laurent Ros

Written by

@lros_8 • Lean Full Stack Developer & Software Architect @Sipios_Fintech • PWA passionate • Climbing addict!

Sipios

Sipios

Sipios conceives and develops tailored products in record time that shape tomorrow’s financial industry. We take on our clients’ most exciting technical and business challenges which we share in our publications.

Laurent Ros

Written by

@lros_8 • Lean Full Stack Developer & Software Architect @Sipios_Fintech • PWA passionate • Climbing addict!

Sipios

Sipios

Sipios conceives and develops tailored products in record time that shape tomorrow’s financial industry. We take on our clients’ most exciting technical and business challenges which we share in our publications.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store