React Testing Cookbook
React Testing: className with Shallow Rendering
The React Shallow Renderer test utility lets us inspect the output of a component one level deep. In this lesson, we will examine the rendered output of props, specifically the className prop. We will then use the ES2015 String.includes() method to check that our rendered className includes what we expect.
[00:00] Here we have an app that has a few icon components on the screen. We can see that there's a thumbs-up icon and a trashcan icon. Now we want to write some tests to make sure that these icons are rendering correctly.
[00:13] Here we have a test file where we've imported the React library as well as the React testing library, the Expect assertion library, and the component that we want to test, which is the icon. Let's write a test now. We're going to say that it should render the icon. Now let's set up our shallow renderer.
[00:32] I'll say const renderer = testutils.createrRenderer. Then we'll tell this what to render. We'll say render, and we'll give it the icon component with a name prop. Let's use the Facebook icon. At the end of our test, we're going to assert that the actual value is going to equal the expected value.
[00:57] Our actual value is going to be the renderer. If we get the rendered output of that renderer, we will be getting what was returned from this guy right here. So we're going to get "what is icon name" returned when it's rendered and put it inside of this actual variable.
[01:18] Now let's take a look at what this actual value is going to be. We can see here that the shallow renderer has given us our object representation of our component, so we have this giant object here. But what we're really interested in is this className prop right here.
[01:36] Inside of our root object we have the props object. There's a className which is just a string of classes. Now back in my test file I'm going to remove this log statement. Then, instead of checking the entire object output of my shallow renderer, I'm going to only look at the props and the className prop.
[02:00] Now since we know that the className prop is just a string, we can use the ES2015 string method of includes to check that it includes the className that we're looking for, which is Facebook in this case. The way the includes method works is it will return a Boolean value. If Facebook is found in the className string, it will return true, and, if not, it will return false.
[02:23] So we're going to say that our expected value is going to be true. To review, we created our shallow renderer. We gave it the component we wanted to render. Then we grabbed that rendered output and checked that the className prop included the string that we were looking for. Then we assert that that's the case. That's how we can test className props.