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

## Exercise recap
In the last lesson, we tested and implemented the `getTasks` and `updateTask` functions. This was possible thanks to the `jest-fetch-mock` library, which mocked out the `fetch` function for us. Your task was to do the same for the `createTask` function.

## Solution
Here is the test code:
```javascript
describe('#createTask', () => {
    it('must create tasks', async () => {
        fetch.mockResponseOnce(JSON.stringify({id: 1, label: 'Do this', completed: false}));

        const result = await createTask('Do this');

        expect(result).toEqual({id: 1, label: 'Do this', completed: false});
        expect(fetch).toHaveBeenCalledWith(expect.stringMatching(/tasks/), {
            method: 'POST',
            body: JSON.stringify({label: 'Do this', completed: false})
        });
    });
});
```
As you can see, there are no surprises. Firstly, we set the return value for `fetch` to a "newly created" task. Then, we call the `createTask` function with the same task name. We expect it to return the same data returned by `fetch` and call `fetch` with a POST request to `/tasks`. Here is the code for the function itself:
```javascript
export const createTask = async (taskName) => {
    const newTask = {
        label: taskName,
        completed: false
    };
    const result = await fetch(ROOT, {
        method: 'POST',
        body: JSON.stringify(newTask),
    });
    return result.json();
};
```


# Exercise recap
In the last lesson, we tested and implemented the `getTasks` and `updateTask` functions. This was possible thanks to the `jest-fetch-mock` library, which mocked out the `fetch` function for us. Your task was to do the same for the `createTask` function.

# Solution
Here is the test code:
```javascript
describe('#createTask', () => {
    it('must create tasks', async () => {
        fetch.mockResponseOnce(JSON.stringify({id: 1, label: 'Do this', completed: false}));

        const result = await createTask('Do this');

        expect(result).toEqual({id: 1, label: 'Do this', completed: false});
        expect(fetch).toHaveBeenCalledWith(expect.stringMatching(/tasks/), {
            method: 'POST',
            body: JSON.stringify({label: 'Do this', completed: false})
        });
    });
});
```
As you can see, there are no surprises. Firstly, we set the return value for `fetch` to a "newly created" task. Then, we call the `createTask` function with the same task name. We expect it to return the same data returned by `fetch` and call `fetch` with a POST request to `/tasks`. Here is the code for the function itself:
```javascript
export const createTask = async (taskName) => {
    const newTask = {
        label: taskName,
        completed: false
    };
    const result = await fetch(ROOT, {
        method: 'POST',
        body: JSON.stringify(newTask),
    });
    return result.json();
};
```


Understand one of the possible solutions to the last exercise.

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

Solution to the Exercise

Exercise recap