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

# Starter project

The project for this lesson is similar to the project in the last lesson. The difference is that the `Hello` component renders the user's role and name. A second web API call is made to get the user's role.

The project contains a test to verify that the user’s name is rendered. The test should fail at the moment because the web API calls aren’t yet mocked.

A copy of the project is in the code widget below. Clicking the **“Run”** button executes the tests.

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    ["@babel/preset-react", { runtime: "automatic" }],
  ],
};


React

Dart

GoJS React

Typescript React

Vue.js

In this lesson, we will mock out both functions in `data.js`.

# Understanding Jest's `mock` function

A whole module can be mocked using [`Jest.mock`](https://jestjs.io/docs/jest-object#jestmockmodulename-factory-options). The syntax is:

```javascript
jest.mock(modulePath);
```

To mock `data.js` in our project, we can use `jest.mock("./data")`. Note that `jest.mock` won’t work as expected if placed inside a `test` function.

```javascript
test("Should include users name when rendered", async () => {
  jest.mock("./data"); // ❌
  render(<Hello id={1} />); // 😞 - the mock `data` module won't be used here
});
```

Note also that `jest.mock` needs to be called before any import statements so that Jest can import the mock module rather than the real module. This means that calling `jest.mock` inside a test would be too late for this action. So, we’ll usually place `jest.mock` outside the `test` function as follows:

`jest.mock` is usually placed outside the `test` function as follows:

```javascript
import ...

jest.mock("./data"); // ✔️
test("Should include users name when rendered", async () => {
  render(<Hello id={1} />); // 😊 - the mock `data` module will be used here
});
```

The above test passes even though the call to `jest.mock` is written after the import statements. This is because the `babel-jest` transform hoists `jest.mock` to the top of the block scope. In this case, this refers to the top of the file.

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

Mocking a Module

Starter project

Understanding Jest’s `mock` function

Mocking a Module

Starter project

Understanding Jest’s mock function

Understanding Jest’s `mock` function