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

## Unit tests are passing. Now what?
When we wrote the integration test in the beginning, we wanted our app to input tasks and display them. We then wrote tests to check that tasks are being saved and displayed. However, if you try running the integration test right now, it will fail:
```shell
TimeoutError: Waiting for element to be located By(xpath, //input[@placeholder='Enter new task'])
    Wait timed out after 1042ms
```
Now, try to recall the difference between _unit_ and _integration_ tests. _Unit_ tests check the system components in isolation. They should be working perfectly fine on their own. _Integration_ tests check the system as a whole. But the reason they are failing is because we did not never tie our components together in a system. We did not even render them!

Let's fix that. Delete the file `App.test.js`, as we won't be needing it. Then, in `App.js`, we will delete all the existing HTML code and render our components instead:
```javascript
function App() {
  return (
    <div>
      <TaskInput />
      <TaskList />
    </div>
}
```
However, the tests are still failing. If you open the project in a browser, you will find out why:![](/api/collection/6681755141537792/5450848082591744/page/5566466250768384/image/4966480370728960)

We did not pass anything to the `TaskList`. To fix that, we should:
```javascript
<TaskList tasks={[]} />
```
Now we get a different error:
```shell
TimeoutError: Waiting for element to be located By(xpath, //*[text()='new todo!'])
Wait timed out after 1055ms
```
Selenium now successfully finds our input and submits it, but there is not a created task. Now, we have to implement some logic for that. Let's use state:
```javascript
const [tasks, setTasks] = useState([]);
```
And create a handler function for `TaskInput`:
```javascript
const handleNewTask = (task) => setTasks([...tasks, task]);
```
Now, we can plug these into our components:
```javascript
<TaskInput onSubmit={handleNewTask}/>
<TaskList tasks={tasks} />
```
After adding this, the integration test should pass. You can see the code here:




# Unit tests are passing. Now what?
When we wrote the integration test in the beginning, we wanted our app to input tasks and display them. We then wrote tests to check that tasks are being saved and displayed. However, if you try running the integration test right now, it will fail:
```shell
TimeoutError: Waiting for element to be located By(xpath, //input[@placeholder='Enter new task'])
    Wait timed out after 1042ms
```
Now, try to recall the difference between _unit_ and _integration_ tests. _Unit_ tests check the system components in isolation. They should be working perfectly fine on their own. _Integration_ tests check the system as a whole. But the reason they are failing is because we did not never tie our components together in a system. We did not even render them!

Let's fix that. Delete the file `App.test.js`, as we won't be needing it. Then, in `App.js`, we will delete all the existing HTML code and render our components instead:
```javascript
function App() {
  return (
    <div>
      <TaskInput />
      <TaskList />
    </div>
}
```
However, the tests are still failing. If you open the project in a browser, you will find out why:![](/api/collection/6681755141537792/5450848082591744/page/5566466250768384/image/4966480370728960)

We did not pass anything to the `TaskList`. To fix that, we should:
```javascript
<TaskList tasks={[]} />
```
Now we get a different error:
```shell
TimeoutError: Waiting for element to be located By(xpath, //*[text()='new todo!'])
Wait timed out after 1055ms
```
Selenium now successfully finds our input and submits it, but there is not a created task. Now, we have to implement some logic for that. Let's use state:
```javascript
const [tasks, setTasks] = useState([]);
```
And create a handler function for `TaskInput`:
```javascript
const handleNewTask = (task) => setTasks([...tasks, task]);
```
Now, we can plug these into our components:
```javascript
<TaskInput onSubmit={handleNewTask}/>
<TaskList tasks={tasks} />
```
After adding this, the integration test should pass. You can see the code here:




Learn to get your integration test passing and reflect on the experience so far.

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

More on Integration Tests

Unit tests are passing. Now what?