Image by JVMcannon from Pixabay

So your React app, like a lot of modern apps, uses React Router to get users from one page to another. And you, like any thorough tester, want to account for React Router in your testing. This post will help you learn about the syntax to get you started testing React Router with your app.

Our App

Note: you can find the code for this project on GitHub. It will not win any awards for design. 😝

For the purposes of this post, we’ll imagine a restaurant website that looks like this:

Note that the Router is not included in the…


tunnel with layers of ice
tunnel with layers of ice
Photo by Nicolas Häns on Unsplash

My unit testing background has trained me to write short tests, each covering one discrete piece of code. This makes unit tests simple to read and easy to diagnose. So why can’t this approach be applied to functional tests?

Let’s back up a bit here to distinguish between unit and functional tests. Unit tests isolate one piece of code, often a function or React component. By definition, they are tightly associated with the code, which makes them easy to diagnose (they point right to the area in the code that’s causing the failure!) …


unlocked padlock
unlocked padlock
Photo by iMattSmart on Unsplash

People are switching to functional components in React, and class-based components are quickly becoming a thing of the past. However, with class-based components out of the picture, it’s much harder to access a function within your functional component for unit testing. A common question I get these days:

How do I test functions inside my functional component?

The short answer: you can’t. There is no way to access functions defined within a functional component for testing. But… if you’re reading this post, you probably don’t like that answer. Read on to see what your options are. 😊

Option 1: Don’t unit test the functions

Do any or…


Image by Bernd Hildebrandt from Pixabay

React testing is trending toward functional testing: test your app the way a user would use it. The tests go through user flows, and are decoupled from the code (testing behavior over implementation). This is fantastic when it comes time to refactor your code, or update the code without changing the behavior. Since the tests are tied only to the behavior, there’s no need to update the tests. Champagne all around! 🍾

This leaves a question, though: is there any space left in React for unit testing (tests that isolate one unit of code, often a function or component)?

Unit tests can be functional tests

Functional…


Person climbing with a rope
Person climbing with a rope
Image by Shri ram from Pixabay

I’m a big tester. Testing has saved my bacon enough times that I feel uneasy coding without it, like rock climbing without a rope. Even if I’m in a gym and the floor is really springy, a rope (like testing) helps minimize the damage when things inevitably go wrong.

When I started learning React several years ago, Enzyme was all the rage for test rendering and DOM manipulation. I come from an old-school back-end testing background (meticulous unit testing and isolation). Enzyme seemed great! …

Bonnie Schulkin

Teacher, coder and testing enthusiast. Visit me at https://bonnie.dev

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