React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

jest

In this course we are going to work through properly setting up Enzyme with Jest to test rendered components. This includes the nitty gritty of making our testing environment work with various versions of React. After we get our environment setup ready, we’ll work through the different ways we can render a component within our test pages. With a rendered component we can now test component methods and properties to assert that they are what is intended. 

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. 

Course Overview: Testing React Components with Enzyme and Jest

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. 

Install Enzyme and Configure Jest

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. 

Test Against Different React Releases with Enzyme

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. 

Shallow Render a React Component with Enzyme

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. 

Find Nodes from a Shallow Rendered Component

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.

Understand the Different Accepted Selectors in Enzyme

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. 

Test Enzyme Rendered Components with Jest Snapshots

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. 

Test React Component Props with Enzyme and Jest

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. 

Fully Render React Components with Enzyme

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. 

Test Simulated Event Handlers with Enzyme

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. 

Test New Component State with setState in Enzyme

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. 

Test React Component Lifecycle Methods with Enzyme

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. 

Test React Component Methods with Enzyme

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.  

Test Redux Connect Components with Enzyme

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. 

Test React Components with Enzyme and Jest

Tyler Clark

Course Content

You might also like these resources:

Introduction to Cloudflare Workers

Create an eCommerce Store with Next.js and Stripe Checkout

Practical Git for Everyday Professional Use