This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Testing: Utility modules

2:19 React lesson by

When writing tests for our React code, it is helpful to pull out any functionality that doesn't have to do with our UI components into separate modules, so that they can be tested separately. In this lesson, we will take a look at a React component and how we can pull out some of its generic utility logic into a separate module. We will then write some tests for that module.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

When writing tests for our React code, it is helpful to pull out any functionality that doesn't have to do with our UI components into separate modules, so that they can be tested separately. In this lesson, we will take a look at a React component and how we can pull out some of its generic utility logic into a separate module. We will then write some tests for that module.

Avatar
Martin Bayly

It would be useful if the sample code for this video series was broken down into separate branches or tags in the git repo to match each lesson to make it easier to follow along by coding and then refreshing to get the sample solution.

Avatar
Joe

I totally agree. It would make following along with the lesson so much easier.

In reply to Martin Bayly
Avatar
Trevor

Thanks for the feedback Martin and Joe

In reply to Joe
Avatar
Adam Cardenas

yeah, kinda sucks that we cannot follow along

In reply to Joe
Avatar
Simon

I've done a bunch of Egghead lessons about react and redux in the previous weeks and they were really nice.
This one is weird : git repo is not tagged for each lesson, so I just clone master, run npm install (twice because it fails on the first time because... npm I guess).
I run npm run test it fails for some tests because of some TypeError... ok...
I run npm run dev or run serve it fails because of some react-color-picket asset... ok...

Anyway I start the video, not even 1 minute to say what we are dealing with. So good luck for me to understand what could be the react-color-picker error above, or the TypeError.
Of course files I got from master branch are not the one displayed in the video. In fact, I guess only reading the code without watching video would do the same trick. Or just go to read documentation about expect, mocha and friends.

It kind of sucks because it seems there are lot of things to be learnt from your lessons, but the way it was built really does not help.

In reply to egghead.io

Here we have an app that lets you add your favorite quotes to a collection. We're going to be testing that when these quotes get added that they have a unique ID. As you can see here from this quote component, there's an ID property that has a string, a unique number, and then the first part of the description of the quote.

Currently the function that creates this unique ID is a method inside of the "add quote" React component. Because this function doesn't have anything to do with our React component, we can pull it out into its own module that we can test separately, so I'm going to cut this function from this component and create its own module file. I'll paste it in there.

Then I'm going to export it as the default function from this file. Now, if we go back to our React component that was using it, we can go down to where it's creating the ID. Instead of using the this.createID I'm going to import our new module. Now we're ready to write a test for this module separate from the React component.

To write our test I'm going to import Expect from Expect. Then I'm going to also import the module that we just create called createID. For our describe block we'll say createID. Then for our test we'll say that it should convert a description into a unique ID. I'm going to expect the actual value to equal the expected value.

Now our actual value is going to be the result of using the createID module with a unique number and a description. We will expect that result to be the unique number concatenated with the first two words of the description all together in kebab-case without spaces. Now if we run our test we can see that it's passing.

As we've done in this lesson, I've found it really helpful to take functions that are unrelated to your React components and to pull them out into their own modules like this. That way it's easier to test them and to reuse them.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?