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

The `toBe` matcher will check that the objects’ references are equivalent, which won’t be the case. The `toStrictEqual` or `toEqual` functions could be used instead.

The expected object’s properties are ordered incorrectly. The `productId` needs to be placed before `success`.

The `toBe` function can’t be used to check objects, so `toBeObj` should be used instead.

A test uses the `toBe` matcher to test the result of a function call. However, the test is unexpectedly failing. What do you think the problem is, and how can it be resolved?

```javascript
expect(response).toBe({
  success: true,
  productId: 1,
});
```

A test uses the <code>toBe</code> matcher to test the result of a function call. However, the test is unexpectedly failing. What do you think the problem is, and how can it be resolved?
<pre><code class="language-javascript">expect(response).toBe({
 success: true,
 productId: 1,
});
</code></pre>

The following matcher checks a validation error message. How could we make the check looser so that it just checks for the word "invalid"? The check should be case insensitive.

```javascript
expect(email).toBe("Sorry, this email is invalid");
```

The following matcher checks a validation error message. How could we make the check looser so that it just checks for the word “invalid”? The check should be case insensitive.
<pre><code class="language-javascript">expect(email).toBe(&quot;Sorry, this email is invalid&quot;);
</code></pre>

The `toBe` function can’t be used to check arrays, so `toBeArr` should be used instead.

The `toBe` function will check that the arrays’ references are equivalent, which won’t be the case. `toStrictEqual` or `toEqual` should be used instead.

A test uses the `toBe` matcher to test the result of a function call. However, the test is unexpectedly failing. What is the problem and how can it be resolved?

```javascript
expect(response).toBe([1, 3, 5]);
```

A test uses the <code>toBe</code> matcher to test the result of a function call. However, the test is unexpectedly failing. What is the problem and how can it be resolved?
<pre><code class="language-javascript">expect(response).toBe([1, 3, 5]);
</code></pre>

`expect({ name: "Fred" }).toEqual({ name: "Fred", age: undefined });`

`expect({ name: "Fred" }).toStrictEqual({ name: "Fred", age: undefined });`

`expect({ name: "Fred" }).toBe({ name: "Fred", age: undefined });`

Which of the following expectations will pass?

Which of the following expectations will pass?

Yes, array ordering does not matter with the `toEqual` matcher.

No, array ordering matters with the `toEqual` matcher.

Will the following test pass?

```javascript
expect([1, 2, 3]).toEqual([3, 2, 1]);
```

Will the following test pass?
<pre><code class="language-javascript">expect([1, 2, 3]).toEqual([3, 2, 1]);
</code></pre>

An expected error message needs to be passed into the `toThrow` matcher.

The test needs to wait for the promise to be rejected:

```javascript
expect(async () => {
  await get(1);
}).rejects.toThrow();
```

The `toThrow` matcher is an invalid matcher. It should read as `toThrowException`.

A test is checking that an asynchronous function raises an exception. However, the test is unexpectedly failing. What is the problem and how can it be resolved?

```javascript
expect(async () => {
  await get(1);
}).toThrow();
```

A test is checking that an asynchronous function raises an exception. However, the test is unexpectedly failing. What is the problem and how can it be resolved?
<pre><code class="language-javascript">expect(async () =&gt; {
 await get(1);
}).toThrow();
</code></pre>

Just run `npm test -- -u` to update the snapshot.

Check the function that is being tested. Has something changed that has introduced a bug? 

A snapshot test is unexpectedly failing. What should we do?

A snapshot test is unexpectedly failing. What should we do?

This quiz will test what you have learned in this chapter.

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

Quiz Yourself on Matchers