Sabemos que as etapas tradicionais do desenvolvimento das funcionalidades de um software são, em primeiro lugar, estudar as regras de negócio, depois levantar uma solução que atenda os requisitos, para, em seguida, implementar o código.

Antes de subir para produção, o(a) desenvolvedor(a) faz os testes manuais para assegurar que tudo está conforme o planejado. Embora isso seja uma boa prática, não é maneira mais segura e rápida de se realizar testes em uma aplicação, afinal, testes manuais estão totalmente atrelados ao julgamento humano, e pessoas podem errar; e dependendo da complexidade de uma funcionalidade, não há espaço para erros, principalmente quando isso pode afetar negativamente o cliente.

Uma forma de garantir segurança as regras de negócio na aplicação é utilizar ferramentas que façam testes automatizados, otimizando ainda mais o tempo e aumentando a velocidade e a confiabilidade no projeto.

Para quem trabalha com as stacks JavaScript, uma ótima ferramenta é o Jest, a qual é altamente recomendada para utilizar com React, mas também é compatível com Angular, Vue, Node e muito mais.

CONFIGURANDO O AMBIENTE

Como este artigo trata-se de utilizar o Jest com o React, o primeiro passo é você já ter instalado na sua máquina o Node e no seu repositório criar uma aplicação React.js, a partir do comando:

npx create-react-app my-app

*Para evitar possíveis bugs, recomendo fortemente que remova o arquivo App.test.js antes de continuar

Agora para instalar o Jest basta colar o trecho abaixo no terminal

npm install --save-dev jest

Entretanto, o Jest sozinho não consegue compreender o React, para isso, ele precisa de um Transcompilador JavaScript, que no caso, será o Babel.js. Utilize o seguinte comando:

npm install --save-dev babel-jest @babel/core @babel/preset-env

E você ainda precisará adicionar um arquivo na pasta raiz do projeto chamado babel.config.js, que deverá conter as linhas de código abaixo:

module.exports =\
    presets: [['@babel/preset-env', {targets: {node: 'current'}}]],\
  };{

Feito tudo isso, você irá precisar de um comando para rodar no terminal sempre que precisar testar a sua aplicação. Então vá para o arquivo package.json, adicione em scripts:

"test": "jest"

a estrutura deve ser semelhante à imagem abaixo

PRIMEIROS PASSOS COM O JEST

Após realizar todas as etapas de configuração para que seu projeto funcione com o Jest, vamos escrever um teste hipotético para uma função de soma de dois números. Portanto, o primeiro passo é você criar um arquivo chamado soma.js, e adicionar a função:

export default function soma(a, b) {\
    return a + b;\
}

Em seguida, basta criar um arquivo que conterá o nosso teste, que chamaremos de soma.test.js e adicionar o trecho abaixo:

import soma from './soma'

test(`Somar dois números`, () => {\
    expect(soma(1,2)).toBe(3);\
})'

No código acima, estamos importando o arquivo soma.js, e logo em seguida iniciamos o teste; o primeiro parâmetro será uma string que resume o objetivo do teste, que no caso é a soma de dois números, logo em seguida abrimos uma função anônima, e utilizamos os métodos expect() e toBe() para testar se 1 + 2 é igual a 3;

Agora para verificar o seu teste, rode o comando npm test no terminal, e o resultado deverá ser esse:

E para saber mais sobre tudo que o Jest consegue testar, vou deixar o link direto para a documentação oficial

Caso você tenha gostado, pretendo postar muitos conteúdos relacionados a testes automatizados, então vejo você no meu próximo artigo!

Veja mais conteúdos como esse no meu Blog: https://giuliaamaral.com.br/?ref=tabnews