React Testing: Setting up dependencies

React Testing: Running tests

React Testing: Utility modules

React Testing: Intro to Shallow Rendering

React Testing: JSX error diffs

React Testing: Element types with Shallow Rendering

React Testing: className with Shallow Rendering

React Testing: Conditional className with Shallow Rendering

React Testing: Reusing test boilerplate

React Testing: Children with Shallow Rendering

React Testing: The Redux Store - Multiple Actions

React Testing: The Redux Store - Initial State

React Testing: Redux Reducers

React Testing Cookbook

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.

Course

React Testing Cookbook

React Testing: Element types with Shallow Rendering

Share this video with your friends