React Testing Cookbook
React Testing: Children with Shallow Rendering
When testing React components, we often want to make sure the rendered output of the component matches what we expect. With the React Shallow Renderer, we can check the entire rendered output of a component, the children prop, or a subset of the children prop. We can also use 3rd party libraries to check that this element tree includes a specific piece. In this lesson we will walk through examples of each.
[00:00] We're working on an app that lets you add your favorite quotes to a collection, and then like and unlike those quotes. We'd like to test that this string of the number with the likes gets rendered correctly depending on the likes that get passed to the component. Here I've set up a test file for component that imports React as well as the React add-ons for testing, the expectAssertion library, and the component itself.
[00:27] I've also set up the describe block and It block boilerplate, as well as the shallow-renderer boilerplate, and we are sending in a likeCounter component with a count of five. Now what we want to do is we have this assertion here to check that some output of our shallow-renderer is going to be what we expect. So what we want to do is write a test to make sure that our likeCounter is rendering the string correctly that will say five likes. Let's take a look at what our shallow-renderer holds right now.
[00:59] So I'm going to say render.getRenderOutput, and we're going to log that out and take a look at it. Here we have what React calls their element tree which is an object description of our component. We can see there's a whole bunch of properties here.
[01:15] The key ones to take a look at are the type and props, are the two key pieces of an element tree. Inside of props we have the children. So going back to my test file, I'm going to add on props and children so we can dive deeper and see what we're getting.
[01:35] Now if we look at the output of the children we can see that it's almost exactly the same as the root itself, it has the same type and props with its own children, and this is because we're rendering a component that has multiple layers. So going back to our test file we could continue to add .props.children until we get to the end of our children inside of our component. But that's kind of messy, it doesn't scale very well if we want to change the structure of our component.
[02:03] I found that in my tests typically I don't want to test the entire structure of the component output because I want to be able to change that without the test breaking. I usually just want to test something very specific, like in this case where we want to make sure that it's outputting the string five likes, and I don't care where those five likes are in the component tree.
[02:22] Currently the React test utils don't have a method for letting us test in this way, that's not specific to the structure of our object description, but there are some libraries that have been built that will let us do just that. So I'm going to go up to my imports and I'm going to add a new import called ExpectJSX, which I've NPM installed, and now I'm going to extend my assertion library with this JSX extension. Now I can go back down to my test and let's refactor this to give us our root element again.
[02:58] Now we can say that our expected value is going to be the string five likes, then in our assertion we're using this to include JSX method which is provided by this library. So to review, when we want to test our children props we could test the entire output of the element structure, but it's often helpful to just test a specific piece of that children output. There are many different libraries available to do that.