Learn to properly test your React applications, starting from basic unit tests with Jest to automated integration tests using Selenium.

React App Testing

This module will teach you the correct way to test your React applications, starting from basic unit tests with Jest to automated integration tests using Selenium. You will start by learning the basics and will gradually move on to the more advanced concepts. By the end of this module, you should feel confident in shipping your software to customers.

Complete Guide to Testing React Apps with Jest and Selenium

## What is a story?
As mentioned earlier, we will be building a simple task list app to learn how to test. Our first step would be to let users create tasks. Let's call it a **_story_** because that's the term used in Agile environments.

Each story must have an acceptance criteria. The acceptance criteria is a description of a feature that must be implemented to complete the story. In our case, it is described like this: _user must be able to open an app, enter the name of the task, press enter and see his task in the list of tasks_.

Why is it so important to have an acceptance criteria? This is for one very good reason: it is used to write the very first integration test. Based on the integration test, we write the unit tests. After the unit tests are written and fail, we begin writing code to fix the unit tests. Once all unit tests are fixed, the integration test should also pass.



## Writing integration tests
Writing integration tests is actually pretty simple. You should just read off the acceptance criteria (or any English description of the feature), and translate it into JavaScript. To do this, you will need to know a few Selenium functions:
- `driver.get(url):` Open a webpage.
- `driver.wait(condition, timeout):` Wait for something. It's typically used to wait for elements while the page is loading.
- `driver.findElement/driver.findElements:` Find elements on a webpage.

And a few helper functions:
- `By:` This function is used as an argument to find elements. For example: 
  - `By.id("textInput")`
  - `By.className("wrapper")`
  - `By.xpath("//input")`
  - `driver.findElement(By.tag("div"))`
- `until:` - This function is used as an argument for the `wait` function. For example:
  - `until.elementLocated(By.id("submitBtn"))`
  - `until.titleContains("abacaba")`
  - `wait(until.elementLocated(By.name("wrapper")), 1000)`

Now, we are ready to write the test. Rename the file `sample.test.js` to `create-task.test.js` in `integration-tests`. Rename the test to `should create tasks` and delete all lines except the `driver.get("http://localhost:3000")`. Add the new imports that we will be using:
```javascript
import {until, By, Key} from 'selenium-webdriver';
```
Our first step for testing the task creation would be to wait until the task input is rendered. You can do this with this line:
```javascript
await driver.wait(until.elementLocated(By.xpath("//input[@placeholder='Enter new task']")), 1000);
``` 
This instructs the driver to wait for one second (at most) until an input element with the desired placeholder is rendered.
> We are using the XPath syntax to search for elements. If you are not comfortable with XPath, there will be a cheatsheet at the end of the lesson.

After the element is rendered, we want to send some text into it and press enter. It can be achieved with this line: 
```javascript
await driver.findElement(By.xpath("//input[@placeholder='Enter new task']"))
        .sendKeys('new todo!' + Key.ENTER);
```
This line finds the desired element and sends a sequence of keystrokes, followed by Enter. 

After entering a new task, wait until it is rendered:
```javascript
await driver.wait(until.elementLocated(By.xpath("//*[text()='new todo!']")), 1000);
```
This line queries the document for any element which contains text `"new todo!"`.
This is what you should end up with:


# What is a story?
As mentioned earlier, we will be building a simple task list app to learn how to test. Our first step would be to let users create tasks. Let's call it a **_story_** because that's the term used in Agile environments.

Each story must have an acceptance criteria. The acceptance criteria is a description of a feature that must be implemented to complete the story. In our case, it is described like this: _user must be able to open an app, enter the name of the task, press enter and see his task in the list of tasks_.

Why is it so important to have an acceptance criteria? This is for one very good reason: it is used to write the very first integration test. Based on the integration test, we write the unit tests. After the unit tests are written and fail, we begin writing code to fix the unit tests. Once all unit tests are fixed, the integration test should also pass.



# Writing integration tests
Writing integration tests is actually pretty simple. You should just read off the acceptance criteria (or any English description of the feature), and translate it into JavaScript. To do this, you will need to know a few Selenium functions:
- `driver.get(url):` Open a webpage.
- `driver.wait(condition, timeout):` Wait for something. It's typically used to wait for elements while the page is loading.
- `driver.findElement/driver.findElements:` Find elements on a webpage.

And a few helper functions:
- `By:` This function is used as an argument to find elements. For example: 
  - `By.id("textInput")`
  - `By.className("wrapper")`
  - `By.xpath("//input")`
  - `driver.findElement(By.tag("div"))`
- `until:` - This function is used as an argument for the `wait` function. For example:
  - `until.elementLocated(By.id("submitBtn"))`
  - `until.titleContains("abacaba")`
  - `wait(until.elementLocated(By.name("wrapper")), 1000)`

Now, we are ready to write the test. Rename the file `sample.test.js` to `create-task.test.js` in `integration-tests`. Rename the test to `should create tasks` and delete all lines except the `driver.get("http://localhost:3000")`. Add the new imports that we will be using:
```javascript
import {until, By, Key} from 'selenium-webdriver';
```
Our first step for testing the task creation would be to wait until the task input is rendered. You can do this with this line:
```javascript
await driver.wait(until.elementLocated(By.xpath("//input[@placeholder='Enter new task']")), 1000);
``` 
This instructs the driver to wait for one second (at most) until an input element with the desired placeholder is rendered.
> We are using the XPath syntax to search for elements. If you are not comfortable with XPath, there will be a cheatsheet at the end of the lesson.

After the element is rendered, we want to send some text into it and press enter. It can be achieved with this line: 
```javascript
await driver.findElement(By.xpath("//input[@placeholder='Enter new task']"))
        .sendKeys('new todo!' + Key.ENTER);
```
This line finds the desired element and sends a sequence of keystrokes, followed by Enter. 

After entering a new task, wait until it is rendered:
```javascript
await driver.wait(until.elementLocated(By.xpath("//*[text()='new todo!']")), 1000);
```
This line queries the document for any element which contains text `"new todo!"`.
This is what you should end up with:


Start writing your own tests, and learn what makes a test useful. 

Your First Story

Start writing your own tests, and learn what makes a test useful.

Introduction

Write Your First Tests

More Tests

Mocking Modules in Unit Tests

More on Integration Tests

Bonus: Custom Matchers

Conclusion

Your First Story

What is a story?

Writing integration tests