React Testing Cookbook
React Testing: Element types with Shallow Rendering
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.
[00:00] 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.
[00:15] 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.
[00:31] 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.
[00:55] 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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!