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

# Our first unit test
Once we have our first integration test failing, it is time to write our first _unit_ tests.
> Unit tests are designed to test system components in isolation.

To make isolation of system components possible, we will create multiple components: `TaskInput` to input new tasks and `TaskList` to display a list of tasks. 

Create a folder called `components` in `src` and create a file called `TaskInput.test.js`. This file will hold tests for the `TaskInput` component, which we have yet have to create.

Now, we will learn some more Jest functions. If you recall, we defined our integration tests with the `test` function. This is also possible for unit tests. But we are going to learn one more approach, and then you can decide whichever approach you can prefer.

Another way of organizing tests is by using the `describe` and `it` functions. `describe` is a function to group multiple tests together, and `it` is the same as the `test` function. Here is how they could be used:
```javascript
describe('<SomeComponent />', () => {
  it('renders', () => {...});
  it('shows label', () => {...});
  it('handles input', () => {...});
});
```
The big advantage of this approach is readability. This snippet is very clear and easy to read. And when any of these tests fail, Jest will provide a helpful message, letting you know exactly what went wrong.

Now, you can write the structure for your first test. First, we will test that `TaskInput` renders an input element:
```javascript
describe('<TaskInput />', () => {
    it('renders an input', () => {

    });
});
```
Now, how do we actually test that input is rendered? For this, `@testing-library` is used.

# `@testing-library`
This is a family of libraries used to unit test web apps. The React version of it is called `@testing-library/react`. This is included by default in apps created with `create-react-app`, so there is no additional setup necessary.

This library exports many things, but we are interested mostly in `render` and `screen`.
- `render` is a function that renders. You use it like this: `render(<div />)`.
- `screen` is an object that represents a browser screen. Whatever you render with `render` is made available from `screen`. You can query stuff from it like this: `screen.queryByText(...)`.

To use these, you must import them. We will also import React as it is needed for the JSX syntax:
```javascript
import React from 'react'

import TaskInput from './TaskInput';
import {render, screen} from '@testing-library/react'
```

Now we can fill in the test body:
```javascript
describe('<TaskInput />', () => {
    it('renders an input', () => {
        render(<TaskInput />);
        expect(screen.queryByPlaceholderText('Enter new task')).toBeInTheDocument();
    });
});
```
First, we render the component. It does not have props so far, so do not worry about them. Next, we try to query `ByPlaceholderText` to get the input element. Lastly, we assert that it is `inTheDocument`. Here is the entire project so far:


Continue writing tests, and begin fixing them with production code.

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

TDD Lifecycle Revisited

Our first unit test