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

## Solution
As you recall, we wrote a test that renders the `TaskInput` component. We also tried entering some text into it. It then validated that an `onSubmit` callback was called.

Firstly, we need somewhere to store the input value. Let's use the state for that:
```javascript
const [value, setValue] = useState('');
```
And the handler function for the input:
```javascript
const handleChange = (event) => setValue(event.target.value);
```
Now, we need to connect these to the input:
```javascript
<input
  type={'text'}
  placeholder={'Enter new task'}
  value={value}
  onChange={handleChange}
/>
```
Almost done! The trick is to capture the "enter button press" to submit. Let's create a handler for that:
```javascript
const handleSubmit = (event) => {
        event.preventDefault();
        onSubmit(value);
    };
```
The `onSubmit` is the prop that you need to unpack in the component definition: `const TaskInput = ({onSubmit})`. We are almost there! But where does the `handleSubmit` plug in? Unfortunately, `input` does not have a default way to capture an "enter press" without excessive complications. To simplify our lives, wrap the `input` in the `form` element:
```javascript
<form onSubmit={handleSubmit}>
  <input
    type={'text'}
    placeholder={'Enter new task'}
    value={value}
    onChange={handleChange}
  />
</form>
```
Here is the completed project (try running the tests now!):

# Solution
As you recall, we wrote a test that renders the `TaskInput` component. We also tried entering some text into it. It then validated that an `onSubmit` callback was called.

Firstly, we need somewhere to store the input value. Let's use the state for that:
```javascript
const [value, setValue] = useState('');
```
And the handler function for the input:
```javascript
const handleChange = (event) => setValue(event.target.value);
```
Now, we need to connect these to the input:
```javascript
<input
  type={'text'}
  placeholder={'Enter new task'}
  value={value}
  onChange={handleChange}
/>
```
Almost done! The trick is to capture the "enter button press" to submit. Let's create a handler for that:
```javascript
const handleSubmit = (event) => {
        event.preventDefault();
        onSubmit(value);
    };
```
The `onSubmit` is the prop that you need to unpack in the component definition: `const TaskInput = ({onSubmit})`. We are almost there! But where does the `handleSubmit` plug in? Unfortunately, `input` does not have a default way to capture an "enter press" without excessive complications. To simplify our lives, wrap the `input` in the `form` element:
```javascript
<form onSubmit={handleSubmit}>
  <input
    type={'text'}
    placeholder={'Enter new task'}
    value={value}
    onChange={handleChange}
  />
</form>
```
Here is the completed project (try running the tests now!):

Learn more about the nuances of testing and fix the failing test from the last lesson.


Solution to the Exercise

Learn more about the nuances of testing and fix the failing test from the last lesson.

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

Solution