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 starter project contains a form that allows a user to enter a person's name and score. The project includes two tests that verify the following:

- When the form is successfully submitted, a success message is rendered.
- When the form is unsuccessfully submitted, an error message is rendered.

The tests haven’t been implemented yet. In this exercise, you’ll fully implement these tests.

The skeleton code is given below:

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*


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


React

Dart

GoJS React

Typescript React

Vue.js

# Mocking fetch

In previous lessons, we have mocked the whole function that interacts with the web API. In this exercise, we'll mock only the fetch function.

The version of JSDOM that Jest uses doesn’t contain the `fetch` function. To work around this, a package called `whatwg-fetch` that includes a `fetch` function has been installed into the project.

For the `fetch` function to be available when code is tested, the following import statement needs to be added to the test file.

```javascript
import "whatwg-fetch";
```

What could we do to avoid having to remember to add this import statement to every test file?

This exercise will allow you to put into practice what you have learned so far in this course.

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

Exercise: Mocking

Starter project