Test React components and dom using Enzyme

Instructor: [00:00] We start off by installing Jest, the types for Jest, the ts preprocessor for Jest, Enzyme, the types for Enzyme, the Enzyme adapter for our React version, and we save them to our dev dependencies in our simple example React TypeScript application.

[00:24] Jest is configured using jest.config.js file. We'll go ahead to the root of our project and create this file. Within this file, we will go ahead and specify our root directory to be the source folder. We will tell Jest to use ts-jest for ts and tsx files.

[00:47] We'll go ahead and specify how Jest should look for test files, for example, if we look for .test.tsx files and consider them as tests. We will specify the module extensions, ts and tsx, along with the defaults so that Jest can look up TypeScript files.

[01:06] Finally, we will go ahead and create a setup script target for Enzyme. Of course, now we should go ahead and create this setup script file. We will go to our first folder and create a file called setupEnzyme.ts.

[01:26] Within the file, it's fairly boilerplate. We go ahead and get configure from Enzyme. We load the Enzyme adapter for React 16. Finally, we configure Enzyme to use this React 16 adapter for our project.

[01:43] That's pretty much it for setting up Jest and Enzyme. It's simply a matter of installing a few packages, creating a jest.config.js, and setting up the Enzyme configuration.

[01:55] Let's look at a simple checkbox with a label component. You will bring in the usual suspects. You will bring in React. You'll create a new class, checkbox.label that extends react.component. It takes a few props, a label-on string, a label-off string, and then it has local state. It's checked Boolean. It will manage based on user interaction.

[02:19] We go ahead and initialize the state in the constructor, then in onChange, we will toggle the isCheckState. Finally, within the render, we will go ahead and return an input wrapped in a label. The input's checkState will be managed by the state. Its onChange will pipe to our onChange function. Finally, we will use the isCheckState to show the label-on or the label-off prop.

[02:56] Let's go ahead and understand this component a bit better by demonstrating it in a real application. We will jump to our application entry point, app.tsx. Within that file, we will go ahead and bring in this component and use ReactDom to render this component with on and off props to the document root.

[03:29] We can start this application with npm start from the terminal. With the application running, I can go over to my browser and interact with the component to demonstrate that it works as expected.

[03:46] Components with internal state and DOM-based interactions are exactly what Enzyme is designed to test. We will go ahead and create a checkbox with label.testfile. We will bring in shallow from Enzyme. We will bring in our component, and we'll go ahead and create a basic Jest test.

[04:11] Within the test body, we will use Enzyme to do a shallow rendering of the checkbox with label component. We can use this checkbox. We're able to do DOM interactions with the component. For example, we can get its text, make sure it's equal to a particular value.

[04:30] We can find a particular DOM element, for example, input inside of it, trigger a change, and then we can expect the new value to change based on that interaction.

[04:42] There are quite a few ways you can configure Jest run, but if you have Jest installed into your package, you can use npm's new command called npx by running Jest from your root folder, and it will go ahead and run all the test files.

[04:58] Here, we only have one test file, and you can see that it works as expected. The test passed because the text of the component changes based on user interaction.