Gain insights into testing React apps effectively. Learn about unit tests with Jest and automated integration tests using Selenium to ensure robust, customer-ready software.

Complete Guide to Testing React Apps with Jest and Selenium.jpg

jest.tar.gz

start_and_test

test

This course will teach you to properly test your React applications, starting from basic unit tests with Jest to automated integration tests using Selenium. You will learn everything from the ground up to the most advanced concepts that will give you confidence in shipping your software to customers.

Complete Guide to Testing React Apps with Jest and Selenium

## Test for `TaskList`

Let's start by planning out the architecture of the component. Since it is going to be responsible for displaying the tasks, `TaskList` definitely needs access to those. We will use a `tasks` prop to pass them down.

The only feature requested from this component right now is to display whichever tasks that we pass in through the `tasks` prop. We will not assume which components are used to render the tasks themselves. We will only test whether the text of all the tasks is present on the page.

> For now, I will skip imports and test definitions, since I covered them already. If you want to revisit it, read over some of the old lessons or take a look at the full code.

Our first test is called `it('must render tasks')`. In it, define a tasks array:
```javascript
const tasks = ['Do this', 'Do that', 'Do nothing'];
```
This array will be passed to the `TaskList`:
```javascript
render(<TaskList tasks={tasks} />);
```
Now, we want to check that every element of `tasks` is present on the webpage. This can be achieved using the `getByText` function:
```javascript
screen.getByText('Do this');
```
If there is not an element with such text rendered, this line will throw an exception, failing the test. To check all three tasks, you can use a for-loop or a `.forEach` statement:
```javascript
tasks.forEach(task => screen.getByText(task));

// or

for (const task of tasks) {
    screen.getByText(task);
}
```
That is it. The test is done! You can run it right here, in the integrated environment:

# Test for `TaskList`

Let's start by planning out the architecture of the component. Since it is going to be responsible for displaying the tasks, `TaskList` definitely needs access to those. We will use a `tasks` prop to pass them down.

The only feature requested from this component right now is to display whichever tasks that we pass in through the `tasks` prop. We will not assume which components are used to render the tasks themselves. We will only test whether the text of all the tasks is present on the page.

> For now, I will skip imports and test definitions, since I covered them already. If you want to revisit it, read over some of the old lessons or take a look at the full code.

Our first test is called `it('must render tasks')`. In it, define a tasks array:
```javascript
const tasks = ['Do this', 'Do that', 'Do nothing'];
```
This array will be passed to the `TaskList`:
```javascript
render(<TaskList tasks={tasks} />);
```
Now, we want to check that every element of `tasks` is present on the webpage. This can be achieved using the `getByText` function:
```javascript
screen.getByText('Do this');
```
If there is not an element with such text rendered, this line will throw an exception, failing the test. To check all three tasks, you can use a for-loop or a `.forEach` statement:
```javascript
tasks.forEach(task => screen.getByText(task));

// or

for (const task of tasks) {
    screen.getByText(task);
}
```
That is it. The test is done! You can run it right here, in the integrated environment:

Continue practicing unit testing. In this lesson, test the "TaskList" component, which renders a list of tasks in your app.

Introduction

Introductory Quiz

Write Your First Tests

Basic Testing Exercises

More Tests

Mocking Modules in Unit Tests

Mocking Exercises

More on Integration Tests

Bonus: Custom Matchers

Testing the TaskList Component

Test for `TaskList`

Introductory Quiz

Basic Testing Exercises

Mocking Exercises

Testing the TaskList Component

Test for TaskList

Test for `TaskList`