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

`toBeInTheDocument` isn’t the matcher that should be used. We should use the `not.toBeNull` matcher instead.

We shouldn’t use the `toBeInTheDocument` matcher. We should use the `toBeNull` matcher instead.

The `findByText` matcher returns a promise to an element rather than an element. The `getByText` matcher should be used instead.

The `findByText` matcher returns a promise to an element rather than an element. The `queryByText` matcher should be used instead.

We have the following component:

```jsx
export function GoTo({ place, href }) {
 return (
 <a href={href} title={`Go to ${place}`}>
 {place}
 </a>
 );
}
```

The following test verifies that the correct text is rendered when the `place` prop is passed:

```jsx
test("Should render element with correct text when place passed", () => {
 render(<GoTo place="test" href="https://somewhere.com" />);
 expect(screen.findByText("test")).toBeInTheDocument();
});
```

The test is failing unexpectedly. What is the problem, and how could it be resolved?

We have the following component:
<pre><code class="language-jsx">export function GoTo({ place, href }) {
 return (
 &lt;a href={href} title={`Go to ${place}`}&gt;
 {place}
 &lt;/a&gt;
 );
}
</code></pre>
The following test verifies that the correct text is rendered when the <code>place</code> prop is passed:
<pre><code class="language-jsx">test(&quot;Should render element with correct text when place passed&quot;, () =&gt; {
 render(&lt;GoTo place=&quot;test&quot; href=&quot;https://somewhere.com&quot; /&gt;);
 expect(screen.findByText(&quot;test&quot;)).toBeInTheDocument();
});
</code></pre>
The test is failing unexpectedly. What is the problem, and how could it be resolved?

```jsx
test("Should render element with correct title when place passed", () => {
 render(<GoTo place="test" href="https://somewhere.com" />);
 expect(screen.getByTitle("Go to test")).toBeInTheDocument();
});
```

```jsx
test("Should render element with correct title when place passed", () => {
 render(<GoTo place="test" href="https://somewhere.com" />);
 expect(screen.getByTitle(/test/)).toBeInTheDocument();
});
```

```jsx
test("Should render element with correct title when place passed", () => {
 render(<GoTo place="test" href="https://somewhere.com" />);
 expect(screen.getByTitle("test")).toBeInTheDocument();
});
```

```jsx
test("Should render element with correct title when place passed", () => {
 render(<GoTo place="test" href="https://somewhere.com" />);
 expect(screen.queryByText("test")).toBeInTheDocument();
});
```

We have the following component:

```jsx
export function GoTo({ place, href }) {
 return (
 <a href={href} title={`Go to ${place}`}>
 {place}
 </a>
 );
}
```

Which is the best test to verify that the `title` attribute is rendered correctly?

We have the following component:
<pre><code class="language-jsx">export function GoTo({ place, href }) {
 return (
 &lt;a href={href} title={`Go to ${place}`}&gt;
 {place}
 &lt;/a&gt;
 );
}
</code></pre>
Which is the best test to verify that the <code>title</code> attribute is rendered correctly?

```jsx
test("Should render loading text when isLoading is passed", () => {
 render(<Loading isLoading>some content</Loading>);
 expect(screen.getByText(/loading/i)).toBeInTheDocument();
});
```

```jsx
test("Should render loading text when isLoading is passed", () => {
 render(<Loading isLoading>some content</Loading>);
 expect(screen.getByText(/loading .../)).toBeInTheDocument();
});
```

```jsx
test("Should render content when isLoading not passed", () => {
 render(<Loading>some content</Loading>);
 expect(screen.getByText(/some content/)).toBeInTheDocument();
});
```

```jsx
test("Should render content when isLoading not passed", () => {
 render(<Loading>some content</Loading>);
 expect(screen.getByText("some content")).toBeInTheDocument();
});
```

We have the following component:

```jsx
export function Loading({ isLoading, children }) {
 if (isLoading) {
 return Loading ...;
 }
 return children;
}
```

**(Select all that apply.)** Which tests will **pass**?

We have the following component:
<pre><code class="language-jsx">export function Loading({ isLoading, children }) {
 if (isLoading) {
 return &lt;p&gt;Loading ...&lt;/p&gt;;
 }
 return children;
}
</code></pre>
(Select all that apply.) Which tests will pass?

```jsx
test("Should not render loading text when isLoading is not passed", () => {
 render(<Loading>some content</Loading>);
 expect(screen.queryByText("Loading ...")).not.toBeInTheDocument();
});
```

```jsx
test("Should not render loading text when isLoading is not passed", () => {
 render(<Loading>some content</Loading>);
 expect(screen.getByText("Loading ...")).not.toBeInTheDocument();
});
```

```jsx
test("Should not render content when isLoading is passed", () => {
 render(<Loading isLoading>some content</Loading>);
 expect(screen.queryByText("some content")).not.toBeInTheDocument();
});
```

```jsx
test("Should not render content when isLoading is passed", () => {
 render(<Loading isLoading>some content</Loading>);
 expect(screen.getByText("some content")).not.toBeInTheDocument();
});
```

We have the following component:

```jsx
export function Loading({ isLoading, children }) {
 if (isLoading) {
 return Loading ...;
 }
 return children;
}
```

**(Select all that apply.)** Which of the following tests will **fail**?

We have the following component:
<pre><code class="language-jsx">export function Loading({ isLoading, children }) {
 if (isLoading) {
 return &lt;p&gt;Loading ...&lt;/p&gt;;
 }
 return children;
}
</code></pre>
(Select all that apply.) Which of the following tests will fail?

```jsx
test("Field has correct value when defaultValue passed", () => {
 render(<Field name="surname" label="Surname" defaultValue="Smith" />);
 expect(screen.getByLabelText("Surname")).toHaveValue("Smith");
});
```

```jsx
test("Field has correct value when defaultValue passed", () => {
 render(<Field name="surname" label="Surname" defaultValue="Smith" />);
 expect(screen.getByDisplayValue("Smith")).toBeInTheDocument();
});
```

```jsx
test("Field has correct value when defaultValue passed", () => {
 render(<Field name="surname" label="Surname" defaultValue="Smith" />);
 expect(screen.getByTestId("field-input-surname")).toHaveValue("Smith");
});
```

```jsx
test("Field has correct value when defaultValue passed", () => {
 render(<Field name="surname" label="Surname" defaultValue="Smith" />);
 expect(screen.getByRole("input")).toHaveValue("Smith");
});
```

We have the following component:

```jsx
export function Field({ name, label, defaultValue }) {
 return (
 <div>
 {label && <label htmlFor={name}>{label}</label>}
 <input
 type="text"
 id={name}
 defaultValue={defaultValue}
 aria-label={label ? undefined : label}
 data-testid={`field-input-${name}`}
 />
 </div>
 );
}
```

Which test will **fail**?

We have the following component:
<pre><code class="language-jsx">export function Field({ name, label, defaultValue }) {
 return (
 &lt;div&gt;
 {label &amp;&amp; &lt;label htmlFor={name}&gt;{label}&lt;/label&gt;}
 &lt;input
 type=&quot;text&quot;
 id={name}
 defaultValue={defaultValue}
 aria-label={label ? undefined : label}
 data-testid={`field-input-${name}`}
 /&gt;
 &lt;/div&gt;
 );
}
</code></pre>
Which test will fail?

```jsx
test("Should reach 0", () => {
 render(<CountDown />);
 expect(screen.findByText("0")).toBeInTheDocument();
});
```

```jsx
test("Should reach 0", async () => {
 render(<CountDown />);
 expect(await screen.findByText("0")).toBeInTheDocument();
});
```

```jsx
test("Should reach 0", async () => {
 render(<CountDown />);
 expect(
 await screen.findByText("0", undefined, { timeout: 10 })
 ).toBeInTheDocument();
});
```

```jsx
test("Should reach 0", async () => {
 render(<CountDown />);
 expect(
 await screen.findByText("0", undefined, { timeout: 10000 })
 ).toBeInTheDocument();
});
```

We have the following component:

```jsx
export function CountDown({ start = 5 }) {
 const [count, setCount] = React.useState(start);
 React.useEffect(() => {
 const timer = setInterval(() => {
 setCount((c) => {
 if (c === 0) {
 clearInterval(timer);
 return 0;
 } else {
 return c - 1;
 }
 });
 }, 1000);
 return () => {
 clearInterval(timer);
 };
 }, []);
 return {count};
}
```
Which test will **pass**?

We have the following component:
<pre><code class="language-jsx">export function CountDown({ start = 5 }) {
 const [count, setCount] = React.useState(start);
 React.useEffect(() =&gt; {
 const timer = setInterval(() =&gt; {
 setCount((c) =&gt; {
 if (c === 0) {
 clearInterval(timer);
 return 0;
 } else {
 return c - 1;
 }
 });
 }, 1000);
 return () =&gt; {
 clearInterval(timer);
 };
 }, []);
 return &lt;span&gt;{count}&lt;/span&gt;;
}
</code></pre>
Which test will pass?

```jsx
test("Should render correct items", async () => {
 render(<List items={[1, 2, 3]} />);
 expect(screen.getAllByRole("list")).toEqual(["1", "2", "3"]);
});
```

```jsx
test("Should render correct items", async () => {
 render(<List items={[1, 2, 3]} />);
 expect(screen.getAllByRole("listitem")).toEqual(["1", "2", "3"]);
});
```

```jsx
test("Should render correct items", async () => {
 render(<List items={[1, 2, 3]} />);
 expect(screen.getAllByRole("listitem").map((li) => li.textContent)).toEqual([
 "1",
 "2",
 "3",
 ]);
});
```

```jsx
test("Should render correct items", async () => {
 render(<List items={[1, 2, 3]} />);
 expect(screen.getAllByRole("listitem").map((li) => li.textContent)).toEqual([
 1,
 2,
 3,
 ]);
});
```

We have the following component:

```jsx
export function List({ items }) {
 return (
 <ul>
 {items.map((item) => (
 <li>{item}</li>
 ))}
 </ul>
 );
}
```

Which test will **pass**?

We have the following component:
<pre><code class="language-jsx">export function List({ items }) {
 return (
 &lt;ul&gt;
 {items.map((item) =&gt; (
 &lt;li&gt;{item}&lt;/li&gt;
 ))}
 &lt;/ul&gt;
 );
}
</code></pre>
Which test will pass?

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 RTL Queries