Test React Components with Enzyme and Jest

Watch User Created Playlist (15)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Course Overview: Testing React Components with Enzyme and Jest

Install Enzyme and Configure Jest

Test Against Different React Releases with Enzyme

P

Shallow Render a React Component with Enzyme

P

Find Nodes from a Shallow Rendered Component

P

Understand the Different Accepted Selectors in Enzyme

P

Test Enzyme Rendered Components with Jest Snapshots

P

Test React Component Props with Enzyme and Jest

P

Fully Render React Components with Enzyme

P

Test Simulated Event Handlers with Enzyme

P

Test New Component State with setState in Enzyme

P

Test React Component Lifecycle Methods with Enzyme

P

Test React Component Methods with Enzyme

P

Test Redux Connect Components with Enzyme

P

Testing React Forms with Enzyme

P
react tutorial about Course Overview: Testing React Components with Enzyme and Jest

Course Overview: Testing React Components with Enzyme and Jest

1:14 react

This course is designed to give you the power to not only create composable elements but to create predictable React components. We will review most of the concepts required to make intuitive tests based on how our users will interact with the components.

The course begins with basic concepts of setup and installing configurations to work with any release of React. Throughout the course we break down selectors, rendering methods, snapshot testing, and how to replicate user activity. We finish the course with more advanced lessons, the 'putting it all together' tutorials. We test a basic React form and a Redux connected component.

react tutorial about Install Enzyme and Configure Jest

Install Enzyme and Configure Jest

1:12 react

In order to get up and going with Enzyme and Jest, some configurations are required. We will need to install some babel plugins, create a specific package json script, and depending on which version of Jest, add Jest configurations to our package.json.

react tutorial about Test Against Different React Releases with Enzyme

Test Against Different React Releases with Enzyme

1:45 react PRO

Within some of React’s releases there are major breaking changes that require different setups for Enzyme. In this lesson we are going to walk through how to setup your testing environment with some of these releases.

react tutorial about Shallow Render a React Component with Enzyme

Shallow Render a React Component with Enzyme

2:12 react PRO

In this lesson we will shallow render a component and pass through different config options. Shallow rendering is useful to test components as individual units. This helps ensure that tests aren’t indirectly asserting on behavior of child components. We’ll also use the debug method to show how we can easily view our component for debugging purposes.

react tutorial about Find Nodes from a Shallow Rendered Component

Find Nodes from a Shallow Rendered Component

2:33 react PRO

Once we have a shallowed rendered component, we can now test that the expected nodes rendered are correct. We will use Jest’s built in assertions as well as some Enzyme shallow render methods in our tests. The render methods include .find, .exists, .children, .hasClass, and .text.

react tutorial about Understand the Different Accepted Selectors in Enzyme

Understand the Different Accepted Selectors in Enzyme

1:52 react PRO

Many of the methods used in Enzyme’s API accept a selector as an argument. In this lesson we will go over the valid CSS, prop, object property, component displayName, and component constructor selectors that can be used as method arguments.

react tutorial about Test Enzyme Rendered Components with Jest Snapshots

Test Enzyme Rendered Components with Jest Snapshots

2:38 react PRO

In this lesson we will utilize Jest's snapshot testing to make sure our component's rendered output stays consistent. Unit testing the component elements can take us far, however sometimes it is helpful to test the entire component interface.

react tutorial about Test React Component Props with Enzyme and Jest

Test React Component Props with Enzyme and Jest

3:50 react PRO

With our component rendered and our assertions testing our nodes, lets test our component’s props. We will use the shallow render methods .props and .prop to test that our component’s props are being passed through correctly. Next we’ll use .setProps to set new props within our components and test that our component handles them correctly.

react tutorial about Fully Render React Components with Enzyme

Fully Render React Components with Enzyme

1:58 react PRO

Full DOM rendering is ideal for use cases where you have components that interact with DOM APIs, or require React lifecycles. In this lesson we will render components with the mount method from Enzyme. We’ll pass through customized options to render our component differently.

react tutorial about Test Simulated Event Handlers with Enzyme

Test Simulated Event Handlers with Enzyme

3:39 react PRO

Sometimes our components use event handlers to update state. In this lesson we’ll work with a component that uses an onClick and onChange handler and use Enzyme to test that the conditionally rendered text updates subsequently.

react tutorial about Test New Component State with setState in Enzyme

Test New Component State with setState in Enzyme

1:16 react PRO

Sometimes our React components render different outputs depending on their local state. In this lesson we will use Enzyme’s setState method to test that our component’s rendered output is as expected.

react tutorial about Test React Component Lifecycle Methods with Enzyme

Test React Component Lifecycle Methods with Enzyme

3:28 react PRO

There are times when our React components use lifecycle methods like componentDidMount. In this lesson we will make sure that we write tests to make sure that these methods are called. This includes testing that our component utilizes componentWillReceiveProps correctly.

react tutorial about Test React Component Methods with Enzyme

Test React Component Methods with Enzyme

1:56 react PRO

In this lesson we will write tests against a method that lives on our class component. We will access it with the enzyme's instance function and assert that the return values work with the correct arguments.

react tutorial about Test Redux Connect Components with Enzyme

Test Redux Connect Components with Enzyme

4:56 react PRO

Sometimes our components are subscribed to a Redux store. This can make it difficult to test because it requires a mocked Redux store in order to render in our test files. In this lesson we talk about how we can test the core functionality of our component without the headache of mocking out Redux concepts.

react tutorial about Testing React Forms with Enzyme

Testing React Forms with Enzyme

7:29 react PRO

In this lesson we walk through four different sets of tests. We have a built out form that on submit, sends an ajax request with the inputed information. We walk through how we can test default options, simulate user input, actually submitting the form, and saving a snapshot of the form's layout.

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