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


# What is a mock?

A **mock** is a type of **test double.** A test double is a replacement for part of a codebase to make testing easier. For instance,  web API calls are often mocked. This is useful for a few reasons:

- To ensure the web API call response is consistent. The data behind the real web API will probably change over time, causing the real web API response to vary.

- To speed up the test. Web API requests are slow.

- To reduce costs if the web API is a third-party paid service.

# Mock vs. stub

Another type of test double is a **stub.** Stubs are prewritten alternative implementations for part of the code. In the example below, `FakeApi` is a stub that we have fully implemented:

```javascript
const api = new FakeApi();
const component = new Component(api);
component.render();
expect(component).toContain("some stuff");
```

The `FakeApi` function is an alternative implementation to the real `Api`.

>**Note:** The example code above isn’t React or Jest. Hopefully, it helps you understand what a stub is.

A mock is slightly different than a stub. A mock consists of prewritten expectations for an alternative implementation part of code. In the example below, `mock` wraps the real `Api` and allows us to define the return value via a `returns` method:

```javascript
const api = mock(Api);
api.returns("some stuff");
const component = new Component(api);
component.render();
expect(component).toContain("some stuff");
```

Again, the example code above isn't React or Jest.

Mocks are usually preferred to stubs because they don't cost as much to create or maintain.

Mocks and stubs are often confused since the Jest API and documentation don’t make a clear distinction. In response, we'll refer to both mocks and stubs as *“mocks”* for the remainder of this course.

Learn about mock and its uses in a test in this lesson.

Understanding Mocking

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

Understanding Mocking

What is a mock?

Mock vs. stub