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

## Where we left off
In the last lesson, we wrote the very first test for the `useTasks` hook. This hook is supposed to be a bridge between APIs and the `TaskList` component. Our first test verified that `useTasks` loads the tasks from the API. To do this, we had to mock the API functions. Firstly, we did it manually (using the `jest.mock` function with a generator function). Then, we did it automatically (using the `__mocks__` folder and `jest.mock` function). Now, we will complete the testing and implementation of `useTasks`.

## `it('must create tasks')`
Once we get to the loading tasks, it is time to think about creating new ones. As we agreed before, the API for the `useTasks` will be as follows:
```javascript
const [tasks, {createTask, toggleTask}] = useTasks();
```
In our test, we must:
1. Call the hook and extract the `createTask` function from its return value.
2. Call the function with the new task name.
3. Verify that the underlying API function was called with the correct argument.
4. Verify that the `tasks` result was updated with the new task.

Let's begin with rendering the hook and extracting the function:
```javascript
it('must create tasks', async () => {
    const {result, waitForNextUpdate} = renderHook(() => useTasks());
    await waitForNextUpdate();

    const [_, {createTask}] = result.current;
});
```
> The `waitForNextUpdate()` call is required since `useTasks` is supposed to always load new tasks. Without this call, we would get warnings from React later on.

Then, we will call the `createTask` function that we just extracted. There is a catch, though. This function needs to be wrapped in an `act` function because the `tasks` array updating causes a rerender.  You import this function from `@testing-library/react-hooks` like this:
```javascript
import {renderHook, act} from '@testing-library/react-hooks';
```
And use it like:
```javascript
await act(() => createTask('New task!'));
```
Now, Jest will call this function and wait until the state of `useTasks` is refreshed.
> The `act` function can also be used when testing _components_. However, it is done very rarely.

Now, we can verify that the `tasks` array is refreshed with new tasks:
```javascript
const [tasks] = result.current;
expect(tasks[tasks.length - 1]).toEqual({id: expect.anything(), label: 'New task!', completed: false});
```

The last thing we need to do is verify that the underlying API function was called correctly. To do this, we first must import it:
```javascript
import {getTasks, createTask as apiCreateTask} from '../api';
```
We rename `createTask` to `apiCreateTask` since there is already a `createTask` in scope, which is the one we extracted from `useTasks`. Now, we can assert on it (remember, it is already mocked by `jest.mock` call):
```javascript
expect(apiCreateTask).toHaveBeenCalledWith('New task!');
```
Here is the entire test code if you were lost:
```javascript
it('must create tasks', async () => {
    const {result, waitForNextUpdate} = renderHook(() => useTasks());
    await waitForNextUpdate();

    const [_, {createTask}] = result.current;
    await act(() => createTask('New task!'));

    const [tasks] = result.current;
    expect(tasks[tasks.length - 1]).toEqual({id: expect.anything(), label: 'New task!', completed: false});
    expect(apiCreateTask).toHaveBeenCalledWith('New task!');
});
```

## `it('must update tasks')`
In the last test for this module, we will make sure that `useTasks` gives us the ability to toggle tasks as completed/uncompleted.

This test will be even simpler than the last one, so I am going to skip the explanation. Here is the code:
```javascript
it('must update tasks', async () => {
    const {result, waitForNextUpdate} = renderHook(() => useTasks());
    await waitForNextUpdate();
    const [tasks, {toggleTask}] = result.current;

    await act(() => toggleTask(0));
    expect(updateTask).toHaveBeenCalledWith({...tasks[0], completed: !tasks[0].completed});
});
```
In this test, we extract the `toggleTask` function from `useTasks` hook and try to toggle the task with index `0`. Then we verify that the `updateTask` was correctly called with the flipped `completed` value.

## Implementation
If you try running these tests now, they would fail, since we did not write the `useTasks` hook just yet. However, they tell us all the information that we need to write that implementation. Create a file `useTasks.js`:
```javascript
// /src/hooks/useTasks.js
const useTasks = () => {
}

export default useTasks;
```

We need a way to store the tasks. Also, we agreed that until tasks arrive from the server, they are set to `null`. To store state, we will use the `useState` hook:
```javascript
const useTasks = () => {
  const [tasks, setTasks] = useState(null);
  return [tasks];
}
```
While this does not yet pass the tests, it does get us further. But, how do we request tasks from the server on render? The answer is the `useEffect` hook, of course!
```javascript
const useTasks = () => {
  const [tasks, setTasks] = useState(null);
  const refreshTasks = async () => {
    setTasks(await getTasks());
  };
  
  useEffect(() => {refreshTasks()}, []);
  return [tasks];
}
```
This hook will run on the first render only (hence, the empty dependencies array). In it, we call `refreshTasks`. In turn, it requests new tasks from the API and saves them to state. All saves to state will be propagated and cause the component who uses this hook to re-render.

This code will get us through the first test (try running it yourself). Now, to get the rest of them, we need to expose the `createTask` and `toggleTask` functions:
```javascript
// rest of the hook above
const toggleTask = async (index) => {
    const newTask = {...tasks[index], completed: !tasks[index].completed};
    await updateTask(newTask);
    setTasks(await getTasks());
};

const createTask = async (taskName) => {
    const newTask = await _createTask(taskName);
    setTasks(tasks ? [...tasks, newTask] : [newTask]);
};

return [tasks, {toggleTask, createTask}];
```
Do not forget to add imports for API helpers and `useState/useEffect` hooks as we go. With all of this code in place, the tests should pass. Here is the whole file if you were got lost:
```javascript
import {useEffect, useState} from 'react';
import {createTask as _createTask, getTasks, updateTask} from '../api';

const useTasks = () => {
    const [tasks, setTasks] = useState(null);

    const refreshTasks = async () => {
        setTasks(await getTasks());
    };

    const toggleTask = async (index) => {
        const newTask = {...tasks[index], completed: !tasks[index].completed};
        await updateTask(newTask);
        setTasks(await getTasks());
    };

    const createTask = async (taskName) => {
        const newTask = await _createTask(taskName);
        setTasks(tasks ? [...tasks, newTask] : [newTask]);
    };

    useEffect(() => {
        refreshTasks();
    }, []);

    return [tasks, {toggleTask, createTask}]
};

export default useTasks;
```

## Quick recap
In this lesson, we finished the testing and implementation for the `useTasks` hook, a vital part for our persistence feature. In the next lesson, we will connect it with the rest of the app to make our integration test pass. Here is the entire project so far for reference (branch `step-20` on [Github](https://github.com/r3dm1ke/educative-todo/tree/step-20-usetasks-completed)):

# Where we left off
In the last lesson, we wrote the very first test for the `useTasks` hook. This hook is supposed to be a bridge between APIs and the `TaskList` component. Our first test verified that `useTasks` loads the tasks from the API. To do this, we had to mock the API functions. Firstly, we did it manually (using the `jest.mock` function with a generator function). Then, we did it automatically (using the `__mocks__` folder and `jest.mock` function). Now, we will complete the testing and implementation of `useTasks`.

# `it('must create tasks')`
Once we get to the loading tasks, it is time to think about creating new ones. As we agreed before, the API for the `useTasks` will be as follows:
```javascript
const [tasks, {createTask, toggleTask}] = useTasks();
```
In our test, we must:
1. Call the hook and extract the `createTask` function from its return value.
2. Call the function with the new task name.
3. Verify that the underlying API function was called with the correct argument.
4. Verify that the `tasks` result was updated with the new task.

Let's begin with rendering the hook and extracting the function:
```javascript
it('must create tasks', async () => {
    const {result, waitForNextUpdate} = renderHook(() => useTasks());
    await waitForNextUpdate();

    const [_, {createTask}] = result.current;
});
```
> The `waitForNextUpdate()` call is required since `useTasks` is supposed to always load new tasks. Without this call, we would get warnings from React later on.

Then, we will call the `createTask` function that we just extracted. There is a catch, though. This function needs to be wrapped in an `act` function because the `tasks` array updating causes a rerender.  You import this function from `@testing-library/react-hooks` like this:
```javascript
import {renderHook, act} from '@testing-library/react-hooks';
```
And use it like:
```javascript
await act(() => createTask('New task!'));
```
Now, Jest will call this function and wait until the state of `useTasks` is refreshed.
> The `act` function can also be used when testing _components_. However, it is done very rarely.

Now, we can verify that the `tasks` array is refreshed with new tasks:
```javascript
const [tasks] = result.current;
expect(tasks[tasks.length - 1]).toEqual({id: expect.anything(), label: 'New task!', completed: false});
```

The last thing we need to do is verify that the underlying API function was called correctly. To do this, we first must import it:
```javascript
import {getTasks, createTask as apiCreateTask} from '../api';
```
We rename `createTask` to `apiCreateTask` since there is already a `createTask` in scope, which is the one we extracted from `useTasks`. Now, we can assert on it (remember, it is already mocked by `jest.mock` call):
```javascript
expect(apiCreateTask).toHaveBeenCalledWith('New task!');
```
Here is the entire test code if you were lost:
```javascript
it('must create tasks', async () => {
    const {result, waitForNextUpdate} = renderHook(() => useTasks());
    await waitForNextUpdate();

    const [_, {createTask}] = result.current;
    await act(() => createTask('New task!'));

    const [tasks] = result.current;
    expect(tasks[tasks.length - 1]).toEqual({id: expect.anything(), label: 'New task!', completed: false});
    expect(apiCreateTask).toHaveBeenCalledWith('New task!');
});
```

# `it('must update tasks')`
In the last test for this module, we will make sure that `useTasks` gives us the ability to toggle tasks as completed/uncompleted.

This test will be even simpler than the last one, so I am going to skip the explanation. Here is the code:
```javascript
it('must update tasks', async () => {
    const {result, waitForNextUpdate} = renderHook(() => useTasks());
    await waitForNextUpdate();
    const [tasks, {toggleTask}] = result.current;

    await act(() => toggleTask(0));
    expect(updateTask).toHaveBeenCalledWith({...tasks[0], completed: !tasks[0].completed});
});
```
In this test, we extract the `toggleTask` function from `useTasks` hook and try to toggle the task with index `0`. Then we verify that the `updateTask` was correctly called with the flipped `completed` value.

# Implementation
If you try running these tests now, they would fail, since we did not write the `useTasks` hook just yet. However, they tell us all the information that we need to write that implementation. Create a file `useTasks.js`:
```javascript
// /src/hooks/useTasks.js
const useTasks = () => {
}

export default useTasks;
```

We need a way to store the tasks. Also, we agreed that until tasks arrive from the server, they are set to `null`. To store state, we will use the `useState` hook:
```javascript
const useTasks = () => {
  const [tasks, setTasks] = useState(null);
  return [tasks];
}
```
While this does not yet pass the tests, it does get us further. But, how do we request tasks from the server on render? The answer is the `useEffect` hook, of course!
```javascript
const useTasks = () => {
  const [tasks, setTasks] = useState(null);
  const refreshTasks = async () => {
    setTasks(await getTasks());
  };
  
  useEffect(() => {refreshTasks()}, []);
  return [tasks];
}
```
This hook will run on the first render only (hence, the empty dependencies array). In it, we call `refreshTasks`. In turn, it requests new tasks from the API and saves them to state. All saves to state will be propagated and cause the component who uses this hook to re-render.

This code will get us through the first test (try running it yourself). Now, to get the rest of them, we need to expose the `createTask` and `toggleTask` functions:
```javascript
// rest of the hook above
const toggleTask = async (index) => {
    const newTask = {...tasks[index], completed: !tasks[index].completed};
    await updateTask(newTask);
    setTasks(await getTasks());
};

const createTask = async (taskName) => {
    const newTask = await _createTask(taskName);
    setTasks(tasks ? [...tasks, newTask] : [newTask]);
};

return [tasks, {toggleTask, createTask}];
```
Do not forget to add imports for API helpers and `useState/useEffect` hooks as we go. With all of this code in place, the tests should pass. Here is the whole file if you were got lost:
```javascript
import {useEffect, useState} from 'react';
import {createTask as _createTask, getTasks, updateTask} from '../api';

const useTasks = () => {
    const [tasks, setTasks] = useState(null);

    const refreshTasks = async () => {
        setTasks(await getTasks());
    };

    const toggleTask = async (index) => {
        const newTask = {...tasks[index], completed: !tasks[index].completed};
        await updateTask(newTask);
        setTasks(await getTasks());
    };

    const createTask = async (taskName) => {
        const newTask = await _createTask(taskName);
        setTasks(tasks ? [...tasks, newTask] : [newTask]);
    };

    useEffect(() => {
        refreshTasks();
    }, []);

    return [tasks, {toggleTask, createTask}]
};

export default useTasks;
```

# Quick recap
In this lesson, we finished the testing and implementation for the `useTasks` hook, a vital part for our persistence feature. In the next lesson, we will connect it with the rest of the app to make our integration test pass. Here is the entire project so far for reference (branch `step-20` on [Github](https://github.com/r3dm1ke/educative-todo/tree/step-20-usetasks-completed)):

Continue the discussion about reusable mocks and testing practices while we further develop the "useTasks" hook.

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

Creating Reusable Mocks: Continued

Where we left off

`it('must create tasks')`