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

Change the `render` call to the following:

```jsx
render(
 <BrowserRouter>
 <HomePage />
 </BrowserRouter>
);
```

Change the `render` call to the following:

```jsx
render(
 <MemoryRouter>
 <HomePage />
 </MemoryRouter>
);
```

Remove the `Link` components inside `TopBar` and replace them with `a` elements.

Remove the test. We can’t test components that reference `Link` components.

We have the following test that checks that the `TopBar` component renders a checkout button:

```jsx
test("TopBar renders checkout button", async () => {
 render(<TopBar />);

 expect(screen.getByText("Checkout")).toBeInTheDocument();
});
```

The following error occurs when the test is executed: **“You should not use** `<Link>` **outside a** `<Router>`**.”**

How can this error be resolved?

We have the following test that checks that the <code>TopBar</code> component renders a checkout button:
<pre><code class="language-jsx">test(&quot;TopBar renders checkout button&quot;, async () =&gt; {
 render(&lt;TopBar /&gt;);

 expect(screen.getByText(&quot;Checkout&quot;)).toBeInTheDocument();
});
</code></pre>
The following error occurs when the test is executed: “You should not use <code>&lt;Link&gt;</code> outside a <code>&lt;Router&gt;</code>.”
How can this error be resolved?

```jsx
test("Should render `UnknownPath` component when unknown path", async () => {
 render(
 <MemoryRouter>
 <App />
 </MemoryRouter>
 );
 expect(await screen.findByText(/not found/)).toBeInTheDocument();
});
```

```jsx
test("Should render `UnknownPath` component when unknown path", async () => {
 render(
 <UnknownPath />
 );
 expect(await screen.findByText(/not found/)).toBeInTheDocument();
});
```

```jsx
test("Should render `UnknownPath` component when unknown path", async () => {
 render(
 <MemoryRouter>
 <UnknownPath />
 </MemoryRouter>
 );
 expect(await screen.findByText(/not found/)).toBeInTheDocument();
});
```

```jsx
test("Should render `UnknownPath` component when unknown path", async () => {
 render(
 <MemoryRouter initialEntries={["/unknown"]}>
 <App />
 </MemoryRouter>
 );
 expect(await screen.findByText(/not found/)).toBeInTheDocument();
});
```

How can we test that our app renders an `UnknownPath` component when the user navigates to an unknown path?

How can we test that our app renders an <code>UnknownPath</code> component when the user navigates to an unknown path?

Create a test component that references `useToggle` and use the test component in the test:

```jsx
test("Should return correct value when default passed", async () => {
 function TestComponent() {
 const { value } = useToggle(true);
 return <div>{value}</div>
 }
 render(
 <TestComponent />
 );
 expect(await screen.findByText("true")).toBeInTheDocument();
});
```

Use `renderHook` from the [`@testing-library/react-hooks`](https://react-hooks-testing-library.com/) package as follows:

```jsx
test("Should return correct value when default passed", async () => {
  const { result } = renderHook(() => useToggle(true));
  expect(result.current.value).toBe(true);
});
```

Use `renderHook` from the [`@testing-library/react-hooks`](https://react-hooks-testing-library.com/) package as follows:

```jsx
test("Should return correct value when default passed", async () => {
  const { value } = renderHook(() => useToggle(true));
  expect(value).toBe(true);
});
```

The following test checks that a `useToggle` custom hook returns the correct value when a default is passed to it.

```jsx
test("Should return correct value when default passed", async () => {
  const { value } = useToggle(true);
  expect(value).toBe(true);
});
```

The following error occurs: **“Invalid hook call. Hooks can only be called inside of the body of a function component.”**

How can we resolve this problem?

The following test checks that a <code>useToggle</code> custom hook returns the correct value when a default is passed to it.
<pre><code class="language-jsx">test(&quot;Should return correct value when default passed&quot;, async () =&gt; {
 const { value } = useToggle(true);
 expect(value).toBe(true);
});
</code></pre>
The following error occurs: “Invalid hook call. Hooks can only be called inside of the body of a function component.”
How can we resolve this problem?

```jsx
test("toggle should set correct value", async () => {
  const { value, toggle } = renderHook(() => useToggle(true));
  toggle();
  expect(value).toBe(false);
});
```

```jsx
test("toggle should set correct value", async () => {
  const { result } = renderHook(() => useToggle(true));
  act(() => {
    result.current.toggle();
  });
  expect(result.current.value).toBe(false);
});
```

```jsx
test("toggle should set correct value", async () => {
  const { result } = renderHook(() => useToggle(true));
  result.current.toggle();
  expect(result.current.value).toBe(false);
});
```

```jsx
test("toggle should set correct value", async () => {
  const { result } = renderHook(() => useToggle(true));
  act(() => {
    result.current.toggle();
  });
  expect(result.current.value).toBe(true);
});
```

The `useToggle` custom hook returns a `toggle` function to toggle its value:

What is the best test for the `toggle` function?

The <code>useToggle</code> custom hook returns a <code>toggle</code> function to toggle its value:
What is the best test for the <code>toggle</code> function?

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 Components