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

```javascript
expect(mock).toBeCalled();
```

```javascript
expect(mock).toBeCalledTimes(1);
```

```javascript
expect(mock).toBeCalledTimes(2);
```

```javascript
expect(mock).toBeCalledWith(1);
```

```javascript
expect(mock).toBeCalledWith(2);
```

**(Select all that apply.)** What expectations pass after the following code is executed?
```javascript
const mock = jest.fn();
mock(1);
mock(2);
```

(Select all that apply.) What expectations pass after the following code is executed?
<pre><code class="language-javascript">const mock = jest.fn();
mock(1);
mock(2);
</code></pre>

**(Select all that apply.)** What expectations pass after the following code is executed? 

```javascript
const mock = jest.fn();
mock(1);
mock.mockClear();
mock(2);
```

(Select all that apply.) What expectations pass after the following code is executed?
<pre><code class="language-javascript">const mock = jest.fn();
mock(1);
mock.mockClear();
mock(2);
</code></pre>

**(Select all that apply.)** What expectations pass after the following code is executed? 

```javascript
const mock = jest.fn();
mock(1);
mock.mockReset();
mock(2);
```

(Select all that apply.) What expectations pass after the following code is executed?
<pre><code class="language-javascript">const mock = jest.fn();
mock(1);
mock.mockReset();
mock(2);
</code></pre>

Will the following expectations pass?

```javascript
const mock = jest.fn();
mock.mockReturnValue(1);
const result1 = mock(1);
const result2 = mock(2);

expect(result1).toBe(1);
expect(result2).toBe(1);
```

Will the following expectations pass?
<pre><code class="language-javascript">const mock = jest.fn();
mock.mockReturnValue(1);
const result1 = mock(1);
const result2 = mock(2);

expect(result1).toBe(1);
expect(result2).toBe(1);
</code></pre>

Will the following expectations pass?

```javascript
const mock = jest.fn();
mock.mockReturnValue(1);
const result1 = mock(1);
mock.mockReset();
const result2 = mock(2);

expect(result1).toBe(1);
expect(result2).toBe(1);
```

Will the following expectations pass?
<pre><code class="language-javascript">const mock = jest.fn();
mock.mockReturnValue(1);
const result1 = mock(1);
mock.mockReset();
const result2 = mock(2);

expect(result1).toBe(1);
expect(result2).toBe(1);
</code></pre>

Use `jest.spyOn` instead of `jest.fn` as follows:

```javascript
import { getPerson } from "../data";
test("Should include persons email when rendered", async () => {
 getPerson = jest.spyOn("getPerson").mockResolvedValue({
 id: 1,
 email: "bob@somewhere.com",
 });
 render(<PersonCard id={1} />);

 expect(await screen.findByText(/bob@somewhere.com/)).toBeInTheDocument();
});
```

Change the import statement to the following:

```javascript
import * as data from "../data";
```

Change the code to the following:

```javascript
import * as data from "../data";
test("Should include persons email when rendered", async () => {
 data.getPerson = jest.fn().mockResolvedValue({
 id: 1,
 email: "bob@somewhere.com",
 });
 render(<PersonCard id={1} />);

 expect(await screen.findByText(/bob@somewhere.com/)).toBeInTheDocument();
});
```

Change the code to the following:

```javascript
import * as data from "../data";
test("Should include persons email when rendered", async () => {
 jest.spyOn(data, "getPerson").mockResolvedValue({
 id: 1,
 email: "bob@somewhere.com",
 });
 render(<PersonCard id={1} />);

 expect(await screen.findByText(/bob@somewhere.com/)).toBeInTheDocument();
 data.getPerson.mockRestore();
});
```

The following test raises the error reading **“ “getPerson” is read-only.**” How can this be resolved?

```javascript
import { getPerson } from "../data";
test("Should include persons email when rendered", async () => {
 getPerson = jest.fn().mockResolvedValue({
 id: 1,
 email: "bob@somewhere.com",
 });
 render(<PersonCard id={1} />);

 expect(await screen.findByText(/bob@somewhere.com/)).toBeInTheDocument();
});
```

The following test raises the error reading “ “getPerson” is read-only.” How can this be resolved?
<pre><code class="language-javascript">import { getPerson } from &quot;../data&quot;;
test(&quot;Should include persons email when rendered&quot;, async () =&gt; {
 getPerson = jest.fn().mockResolvedValue({
 id: 1,
 email: &quot;bob@somewhere.com&quot;,
 });
 render(&lt;PersonCard id={1} /&gt;);

 expect(await screen.findByText(/bob@somewhere.com/)).toBeInTheDocument();
});
</code></pre>

The mock needs to be cleared as follows before the return value is defined:

```javascript
test("Should include persons email when rendered", async () => {
 jest.mock("../data");
 data.getPerson.mockRestore();
 data.getPerson.mockResolvedValue({
 id: 1,
 email: "bob@somewhere.com",
 });
 render(<PersonCard id={1} />);

 expect(await screen.findByText(/bob@somewhere.com/)).toBeInTheDocument();
});
```

The mock needs to be cleared as follows before the return value is defined:

```javascript
test("Should include persons email when rendered", async () => {
 jest.mock("../data");
 data.getPerson.mockClear();
 data.getPerson.mockResolvedValue({
 id: 1,
 email: "bob@somewhere.com",
 });
 render(<PersonCard id={1} />);

 expect(await screen.findByText(/bob@somewhere.com/)).toBeInTheDocument();
});
```

The mock needs to be cleared as follows before the return value is defined:

```javascript
test("Should include persons email when rendered", async () => {
 jest.mock("../data");
 data.getPerson.mockReset();
 data.getPerson.mockResolvedValue({
 id: 1,
 email: "bob@somewhere.com",
 });
 render(<PersonCard id={1} />);

 expect(await screen.findByText(/bob@somewhere.com/)).toBeInTheDocument();
});
```

The module mock needs to be defined in the root of the test file as follows:

```javascript
jest.mock("../data");
test("Should include persons email when rendered", async () => {
 data.getPerson.mockResolvedValue({
 id: 1,
 email: "bob@somewhere.com",
 });
 render(<PersonCard id={1} />);

 expect(await screen.findByText(/bob@somewhere.com/)).toBeInTheDocument();
});
```

The following test raises the error reading “**TypeError: data.getPerson.mockResolvedValue is not a function.**” How can we resolve the error?

```javascript
test("Should include persons email when rendered", async () => {
 jest.mock("../data");
 data.getPerson.mockResolvedValue({
 id: 1,
 email: "bob@somewhere.com",
 });
 render(<PersonCard id={1} />);

 expect(await screen.findByText(/bob@somewhere.com/)).toBeInTheDocument();
});
```

The following test raises the error reading “TypeError: data.getPerson.mockResolvedValue is not a function.” How can we resolve the error?
<pre><code class="language-javascript">test(&quot;Should include persons email when rendered&quot;, async () =&gt; {
 jest.mock(&quot;../data&quot;);
 data.getPerson.mockResolvedValue({
 id: 1,
 email: &quot;bob@somewhere.com&quot;,
 });
 render(&lt;PersonCard id={1} /&gt;);

 expect(await screen.findByText(/bob@somewhere.com/)).toBeInTheDocument();
});
</code></pre>

The `__mocks__` folder is in the wrong location. It needs to be adjacent to the `src` folder.

The manual mock for `getPerson` doesn't include a `mockRestore` method.

The `jest.mock` function needs to be called within the test.

The `jest.mock` function shouldn't be called for a manual mock.

The following test raises the error reading “**TypeError: data.getPerson.mockRestore is not a function.**”

```javascript
jest.mock("../data");
test("Should include persons email when rendered", async () => {
 render(<PersonCard id={1} />);

 expect(await screen.findByText(/bob@somewhere.com/)).toBeInTheDocument();
 data.getPerson.mockRestore();
});
```

We have the following file structure:

```
src
├───__mocks__
│ ├───data.js
├───PersonCard.js
├───PersonCard.test.js
├───data.js
```

The `PersonCard` function references a `getPerson` function inside `data.js`.

The real `data.js` contains the following function:

```javascript
export async function getPerson(id) {
 const response = await fetch(`https://some-server/people/${id}`);
 const data = await response.json();
 return data;
}
```

The mock `data.js` contains the following function:

```javascript
export async function getPerson(id) {
 return new Promise((resolve) =>
 resolve({
 id,
 email: "bob@somewhere.com",
 })
 );
}
```

What is the problem with the code segments given above?

The following test raises the error reading “TypeError: data.getPerson.mockRestore is not a function.”
<pre><code class="language-javascript">jest.mock(&quot;../data&quot;);
test(&quot;Should include persons email when rendered&quot;, async () =&gt; {
 render(&lt;PersonCard id={1} /&gt;);

 expect(await screen.findByText(/bob@somewhere.com/)).toBeInTheDocument();
 data.getPerson.mockRestore();
});
</code></pre>
We have the following file structure:
<pre><code>src
├───__mocks__
│ ├───data.js
├───PersonCard.js
├───PersonCard.test.js
├───data.js
</code></pre>
The <code>PersonCard</code> function references a <code>getPerson</code> function inside <code>data.js</code>.
The real <code>data.js</code> contains the following function:
<pre><code class="language-javascript">export async function getPerson(id) {
 const response = await fetch(`https://some-server/people/${id}`);
 const data = await response.json();
 return data;
}
</code></pre>
The mock <code>data.js</code> contains the following function:
<pre><code class="language-javascript">export async function getPerson(id) {
 return new Promise((resolve) =&gt;
 resolve({
 id,
 email: &quot;bob@somewhere.com&quot;,
 })
 );
}
</code></pre>
What is the problem with the code segments given above?

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 Mocking