Testando sua aplicação React com Jest
Tags: testing, javascript, react, jest
Published: 2020-06-29 12:18:52

Escreve código é sempre uma sensação maravilhosa! Mas, e quando o front-end que construímos não funciona da forma que deveria? Varias coisas vem a nossa cabeça: Minha lógica está certa? Programei da forma correta? 

Muitos de nós programadores sofremos com a tão temida ansiedade de código, e queremos partir para as ferramentas, antes de pensar na solução. E para isso existem os testes de interface. Com eles, conseguimos facilmente propor uma lógica para nossa página antes mesmo de ela ser construída. E isso chamamos de **TDD** (
Test Driven Development) e isso pode tornar nosso código extremamente mais funcional e performático.

Nesse artigo, daremos os primeiros passos de um TDD utilizando a ferramenta **Jest**, muito conhecida entre os programadores Javascript.

###**A rotina do programador React**

Vamos começar criando nosso projeto a partir do famoso create-react-app, ele vai nos ajudar a acelerar as coisas com a configuração pronta do Webpack e Babel, além de já ter o Jest incluso em seu pacote. Abra seu terminal e inicialize um projeto com o create-react-app com o nome tdd:

```console

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


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

```

Utilizaremos a estrutura padrão e criaremos assim uma pasta dentro da src chamada __tests__ que guardará nossos testes. O create-react-app já possui um arquivo de teste mas pode apagá-lo pois contruiremos ele do inicio também. Nossa estrutura ficará assim: 

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

###**Criando nosso primeiro teste e entendendo o Jest**

Na pasta tests, vamos criar nosso primeiro teste. Por convenção, os testes devem possuir o mesmo nome do componente a ser testado, e ter a extensão .test.js, ou seja, criaremos um arquivo chamado **App.test.js** e nele, importaremos 3 módulos que seguem abaixo. 

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

Importamos o React, nosso componente App e o método render da *react-testin-library*, uma implementação do react para renderizar componentes em ambiente isolado e funcionará basicamente como o render comum da aplicação.

####**Formato de um teste**

A construção de um arquivo de teste se baseia em duas premissas, uma suite de teste e os testes relacionados a ela. A suite de teste se refere ao conjunto funcional de atividades daquele componente e os testes seriam a funcionalidade unitária dele. A estrutura de código que difere os dois é a seguinte: 

```javascript

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

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

  });
});
```

A separação de ambas ajuda a informar, em casos de vários arquivos de teste, que conjunto da sua aplicação está falhando, facilitando a correção se necessário.

####**Renderizando e testando**

A primeira coisa a adicionarmos a nosso arquivo é o método render para buscar nosso componente. Isso pode ser feito através da chamada do método, e para isso, podemos buscar elementos de varias formas possíveis. A mais utilizada delas é o **getByText** que procura automaticamente por um texto inserido. Temos também a **getByTextId** que procura pelo atributo **data-testid** que podemos inserir em elementos no nosso próprio componente: 

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

####**Entendendo o expect**

O jest nos fornece uma ferramenta chamada *expect()* que seria a condicional para o nosso teste passar ou não. A [documentação oficial](https://jestjs.io/docs/en/expect) do jest possui varios parâmetros utilizaveis com o expect. Vamos utilizar um deles, o .toBeVisible(). Nosso código do App.test.js ficará assim:

```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();
  });
});
```

Pronto, nosso primeiro teste está concluido! Para rodar os testes utilizamos o comando **npm run** test ou **yarn test** em outro terminal, e ele deve realizar a execução do arquivo de teste, que nesse caso, passará, pois o elemento está visivel.

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

Pronto, testamos nossa primeira funcionalidade. Vamos adicionar agora um teste que vai falhar propositalmente. Para isso, podemos copiar o teste que fizemos acima e utilizar o parâmetro .not do expect.

```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)

Perceba que a test suite falha por completo quando um dos testes inseridos nela falha.

Chegamos ao fim do artigo com uma estrutura básica de utilização do Jest. Nos próximos artigos, entenderemos formas mais complexas de utilizar o expect e entender o que é mock e como podemos utiliza-lo em nosso testes.

Obrigado pela leitura!