Testing React Components

What’s the Difference Between a Test Runner and a React Component Testing Tool?

Get the Right Node and NPM Version

Create a New Directory for Your Project

Create a package.json File

Install React and ReactDOM

Configure Your Test Environment

Specify Jest as Your App’s Test Runner Tool

Initialize ESLint’s Configuration

Install ESLint’s Test Plugins

JavaScript Guide to Test React Components

Integrate ESLint with the test plugins

Import jest-dom’s matchers

Install the code compiler

Configure Babel to compile your code

Configure Jest to set up jest-dom before running tests

Configure Jest’s testing environment

Create the app’s test script

Write your test case

Develop a React component

Run the test

Create the entry script

Create the web page

Install the app’s module bundler

Configure Parcel to ignore Babel

Run your application

Refactor the test code

Refactor your React component

Rerun the test

TypeScript Guide to Test React Components

Integrate ESLint with the test plugins

Import jest-dom’s matchers

Install TypeScript and type definitions

Configure the TypeScript compiler

Install the Jest transformer

Configure Jest to compile TypeScript files

Configure Jest to set up jest-dom before running tests

Configure Jest to read TypeScript configuration files

Configure Jest’s testing environment

Create the app’s test script

Write your test case

Develop a React component

Run the test

Create the entry script

Create the web page

Install the app’s module bundler

Optional: Configure Parcel to use the TypeScript compiler

Run your application

Refactor the test code

Refactor your React component

Rerun the test

And that’s it!

Useful Resources