Gain insights into writing automated tests for React apps with Jest and React Testing Library. Learn about simulating user interactions and testing asynchronous parts to enhance app reliability.

Testing React Apps with Jest and React Testing Library_468 x 60 copy 3.png

file.tar.gz

Jest - lesson 2

Jest with run command

Jest verbose

Jest coverage

Jest snapshot update

Jest react

Jest react-npm start

Jest react-copy

Jest react-C4

Jest react-C6

Jest react start c6

Jest - lesson 2-copy

Jest sandbox

Jest coverage-copy

Jest react-C4-start

Jest react-C4-start-5000

Jest react-npm start-5000

Jest react start c6-5000

Jest react-C8

The skills acquired from this course will allow you to write automated tests on your React app using Jest and React Testing Library, which are the de-facto testing tools for React. These tests will allow you to ship new versions of your app with confidence. The tests will also allow you to increase your release frequency, allowing you to get features to your customers quicker.

You will learn how to write robust tests that are resilient to breaking when code is improved and refactored, reducing maintenance costs.
The course will teach you how to simulate a user interacting with the app. Beyond that, it will also teach you how to robustly test asynchronous parts of the app.

Regular quizzes and exercises will reinforce knowledge throughout the course.

Testing React Apps with Jest and React Testing Library

# Installing and configuring TypeScript

The starter project for this lesson contains source code and tests written in TypeScript in the `src` folder. We’ll recognize the `validEmailDomain` function from previous lessons.

TypeScript can be installed by running the following in a terminal:

```shell
npm install --save-dev typescript
```

TypeScript is configured by a file called `tsconfig.json`. Create this file in the root of the project with the following content:

```json
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}
```

TypeScript will be used in this project for type checking and not transpilation. We will use Babel for transpilation.

Here’s an explanation of the settings we have used in `tsconfig.config`:

- `lib`: The standard typing included in the type checking process. For our purposes, we’re using types for the browser’s DOM and the latest version of ECMAScript.

- `allowJs`: Allows JavaScript files to be compiled.

- `allowSyntheticDefaultImports`: Allows default imports from modules with no default export in the type checking process.

- `skipLibCheck`: Determines whether to skip the type checking of the type declaration files (`*.d.ts`).

- `esModuleInterop`: Enables compatibility with Babel.

- `strict`: Sets the type checking to a high level. When the level is `true`, the project runs in strict mode.

- `forceConsistentCasingInFileNames`: Ensures that the casing of referenced file names is consistent during the type checking process.

- `moduleResolution`: Controls how module dependencies get resolved. Our project uses “node.” 

- `resolveJsonModule`: Allows modules to be contained in `.json` files, which are useful for configuration files.

- `noEmit`: Determines whether to suppress TypeScript generating code during the compilation process. This is `true` in our project because Babel will be generating the JavaScript code.


- `jsx`: Determines whether to support JSX in `.tsx` files.

- `include`: The files and folders checked by TypeScript. In our project, we have specified all the files in the `src` folder.

# Configuring Babel

Babel is already installed and configured to transpile JavaScript. To get Babel to transpile TypeScript, we need to install a preset and tell Babel to use this preset.

Run the following command in a terminal:

```shell
npm install --save-dev @babel/preset-typescript
```

We can now update the Babel configuration file to use this preset. Add the following preset to `babel.config.js`:

```javascript
module.exports = {
  presets: [
    ...,
    "@babel/preset-typescript",
  ],
};
```

# Running tests

Jest is now capable of running tests on TypeScript code. Run the following command in a terminal:

```shell
npm test
```

Note that all the tests pass successfully:


Learn how to test TypeScript source code and write test code in TypeScript in this lesson.

Using TypeScript with Jest

Introduction

Getting Started with Jest

Using Matchers

Getting Started with React Testing Library

React Testing Library Queries

Firing Events

Mocking

Testing Different Types of Components

Appendix

Using TypeScript with Jest

Installing and configuring TypeScript