React Testing: Utility modules

Trevor Miller
InstructorTrevor Miller

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

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.

[00:00] 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.

[00:20] 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.

[00:42] 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.

[01:04] 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.

[01:38] 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.

[02:06] 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.

Martin Bayly
Martin Bayly
~ 6 years ago

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.

Joe
Joe
~ 6 years ago

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

Trevor Miller
Trevor Millerinstructor
~ 6 years ago

Thanks for the feedback Martin and Joe

Adam Cardenas
Adam Cardenas
~ 6 years ago

yeah, kinda sucks that we cannot follow along

Andres
Andres
~ 4 years ago

code with 2017-2018 dependencies:

https://github.com/andfelzapata/react-testing-book