React Testing: Element types with Shallow Rendering

Trevor Miller

React

0.14 - 15

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.

Code

You must be a Member to view code

Access all courses and lessons, track your progress, gain confidence and expertise.

Become a Member
and unlock code for this lesson

orLog In

Discuss

Transcript

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.