This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Testing: Element types with Shallow Rendering

1:09 React lesson by

When you render a component with the Shallow Renderer, you have access to the underlying object. We can write lots of useful tests to check that our components are working as expected. In this lesson, we will use the type property on the shallow rendered component to make sure that the root element is what we expect it to be.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

When you render a component with the Shallow Renderer, you have access to the underlying object. We can write lots of useful tests to check that our components are working as expected. In this lesson, we will use the type property on the shallow rendered component to make sure that the root element is what we expect it to be.

Here we have an app that lets us add quotes, with their author, to a list of our favorite quotes, and then we can "like" and "unlike" those quotes. We'd like to write a test to make sure that this component that toggles "like" count is a link.

Here, I've imported my React and TextUtils libraries. I've imported my assertion library and the component that I want to test. I've also set up the basic structure for the test, as well as the shallow render boilerplate.

To write my test, I'm going to expect that the actual value is going to equal the expected value. My actual value is going to be my renderer.get render output. Because this test is to check that the root element is a link or an anchor tag, we can use the type.

Now our expected value is just going to be an anchor tag. If we run our test, we can see that it's now passing, and that's how you can assert the element type of the root element of your components.

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