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

## The test
The first part of the exercise was to write the test itself. In case you forgot, the test must verify that the `Task` component will call the `onToggle` callback when a user clicks on it. This is one of the tests that suit the description:


it('fires onToggle callback', () => {
    const mockOnToggle = jest.fn();
    render(<Task task={completedTask} onToggle={mockOnToggle} />);
    fireEvent.click(screen.getByText(completedTask.label));
    expect(mockOnToggle).toHaveBeenCalled();
});

Let's go line-by-line. Firstly, we create the mock callback. The purpose of mock callbacks is to assert on them (i.e., check that a function was called). Then we render the `Task` component, and pass in our mock function into the `onToggle` prop. Then, we use the `fireEvent` object to `click` on the HTML element with the task text. Lastly, we check that the callback function was actually called back.

## The implementation
Fixing this test proves to be even easier than writing the test itself. You will need to (1) extract the `onToggle` prop from the props object, and (2) pass it as is into `onClick` prop of the `li` element:


# The test
The first part of the exercise was to write the test itself. In case you forgot, the test must verify that the `Task` component will call the `onToggle` callback when a user clicks on it. This is one of the tests that suit the description:


Let's go line-by-line. Firstly, we create the mock callback. The purpose of mock callbacks is to assert on them (i.e., check that a function was called). Then we render the `Task` component, and pass in our mock function into the `onToggle` prop. Then, we use the `fireEvent` object to `click` on the HTML element with the task text. Lastly, we check that the callback function was actually called back.

# The implementation
Fixing this test proves to be even easier than writing the test itself. You will need to (1) extract the `onToggle` prop from the props object, and (2) pass it as is into `onClick` prop of the `li` element:


Learn the solution to the previous lesson's 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 Exercise

The test