Testing your React app with Jest
Tags: testing, javascript, react, jest
Published: 2020-06-29 12:28:57

Writing code is always a wonderful feeling! But what about when the front end we build doesn't work the way it should? Several things come to mind: Is my logic right? Did I program it correctly?

Many of us programmers suffer from the much-feared code anxiety, and we want to get to the tools before thinking about the solution. And there are interface tests for that. With them, we can easily propose a logic for our page even before it was built. And that we call **TDD** (
Test Driven Development) and this can make our code extremely more functional and performance.

In this article, we will take the first steps of a TDD using the **Jest** tool, well known among Javascript programmers.

###**The React programmer routine**

Let's start by creating our project from the famous create-react-app, it will help us speed things up with the ready configuration of Webpack and Babel, in addition to having Jest already included in its package. Open your terminal and start a project with create-react-app with the name tdd:

```console

# With npm
npm i -G create-react-app
npx create-react-app tdd


# With yarn
yarn global add create-react-app
yarn create react-app tdd

```

We will use the standard structure and thus create a folder inside the src called __tests__ that will keep our tests. Create-react-app already has a test file but you can delete it as we will build it from the beginning as well. Our structure will look like this:

![Project Structure](https://dev-to-uploads.s3.amazonaws.com/i/agisannsx6jrjciqzxb8.png)


###**Creating our first test and understanding Jest**

In the tests folder, we will create our first test. By convention, the tests must have the same name as the component to be tested, and have the extension .test.js, that is, we will create a file called **App.test.js** and in it, we will import 3 modules that follow below.

```javascript
import React from "react";
import { render } from "@testing-library/react";
import App from "../App";
```

We import React, our App component and the render method from the *react-testin-library*, an implementation of react to render components in an isolated environment and will basically work like the common render of the application.

####**Test format**

The construction of a test file is based on two premises, a test suite and the tests related to it. The test suite refers to the functional set of activities for that component and the tests would be its unitary functionality. The code structure that differs the two is as follows:

```javascript

// Describe is a test suite
describe("Testing app functionalities", () => {

// It is an individual test
  it("renders learn react link", () => {

  });
});
```

The separation of both helps to inform, in cases of several test files, which set of your application is failing, facilitating the correction if necessary.

####**Rendering and testing**

The first thing to add to our file is the render method to fetch our component. This can be done by calling the method, and for that, we can search for elements in several possible ways. The most widely used of these is **getByText** which automatically searches for inserted text. We also have **getByTextId** that looks for the **data-testid** attribute that we can insert into elements in our own component:

```javascript
    const { getByText } = render(<App />);
    // Search in component the 'Learn React' text
    const learReact = getByText("Learn React");
```

####**Understanding the expect**

Jest provides us with a tool called *expect()* that would be conditional for our test to pass or not. The [official documentation](https://jestjs.io/docs/en/expect) of jest has several parameters that can be used with expect. We will use one of them, .toBeVisible(). Our App.test.js code will look like this:

```javascript
import React from "react";
import { render } from "@testing-library/react";
import App from "../App";

describe("App working", () => {
  it("renders learn react link", () => {
    const { getByText } = render(<App />);
    const learnReact = getByText("Learn React");
    expect(getByText("Learn React")).toBeVisible();
  });
});
```

Okay, our first test is complete! To run the tests we use the command **npm run** test or **yarn test** in another terminal, and it must execute the test file, which in this case will pass, because the element is visible.

![test pass](https://dev-to-uploads.s3.amazonaws.com/i/g9dzn7rejr1la6txp9fk.png)

There, we tested our first functionality. Now let's add a test that will fail on purpose. For that, we can copy the test we did above and use the expect parameter .not.

```javascript
import React from "react";
import { render } from "@testing-library/react";
import App from "../App";

describe("App working", () => {
  it("renders learn react link", () => {
    const { getByText } = render(<App />);
    const learnReact = getByText("Learn React");
    expect(getByText("Learn React")).toBeVisible();
  });

  it("renders learn react link that will fail", () => {
    const { getByText } = render(<App />);
    const learnReact = getByText("Learn React");
    expect(getByText("Learn React")).not.toBeVisible();
  });
});

```

![test fail](https://dev-to-uploads.s3.amazonaws.com/i/voo8igb45kd7infz3wbj.png)

Realize that the test suite completely fails when one of the tests in it fails.

We come to the end of the article with a basic structure for using Jest. In the next articles, we will understand more complex ways to use expect and understand what is mock and how we can use it in our tests.

**Thanks for reading!**