Testes em React Native com Jest e Testing Library, Configurando o ambiente
Tags: reactnative, jest, testinglibrary, testdev
Published: 2021-04-11 15:43:47

# Introdução

Olá, dev

Recentemente iniciei meus estudos em testes automatizados no React Native e a primeira coisa que notei foi a falta de conteúdo, até mesmo em inglês.

Pensando em ajudar aqueles que também estão iniciando resolvi escrever uma série de artigos sobre o assunto.

# Observações

É importante salientar que para iniciar uma aplicação React Native em sua máquina algumas dependências são necessárias. Você pode encontrar todas as informações na <a href="https://reactnative.dev/docs/environment-setup" target="blank">documentação oficial</a>.

Decida se irá utilizar <b>React Native CLI</b> ou <b>Expo CLI</b> e vamos começar!

---
---
---

# React Native CLI

## 01 - Iniciando o projeto

Abra o seu terminal e navegue até o diretório que deseja iniciar o seu projeto.

```bash
lailton in ~ 
❯ cd Documents/programming
lailton in ~/Documents/programming
❯ 
```

Vamos agora iniciar o projeto com npx, seguindo as recomendações da <a href="https://reactnative.dev/docs/environment-setup" target="blank">documentação do React Native</a>.

```bash
lailton in ~/Documents/programming
❯ npx react-native init testing_with_rn       
Need to install the following packages:
  react-native
Ok to proceed? (y)

```

Confirme a instalação e aperte enter.

```bash
lailton in ~/Documents/programming
❯ npx react-native init testing_with_rn       
Need to install the following packages:
  react-native
Ok to proceed? (y) y

               ######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ##  
 ##             ###     ##########     ###             ## 
  ##           ####      ########      ####           ##  
   ###         ## ###      ####      ### ##         ###   
      ###     ##    ##              ##    ##     ###      
          ######    ###            ###    ######          
             ##  ########################  ##             
            ##         ###      ###         ##            
            ##           ##    ##           ##            
            ##             ####             ##            
            ##             ####             ##            
            ##          ###    ###          ##            
             ###     ####        ####     ###             
               ######                ######    

Welcome to React Native!
Learn once, write anywhere

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "/home/lailton/Documents/programming/testing_with_rn" && npx react-native run-android

lailton in ~/Documents/programming took 56s 
❯ 
```

Após instalado começaremos a configurar.


## Instalando dependências

Precisamos instalar a testing-library como dependência de desenvolvimento antes de tudo. 

Para isso, navegue até o projeto que acabamos de instalar e utilize o package manager de sua preferência, eu estarei utilizando yarn.

```bash
lailton in ~/Documents/programming 
❯ cd testing_with_rn
lailton in Documents/programming/testing_with_rn 
❯ yarn add @testing-library/react-native -D 

...
...

Done in 3.81s.
lailton in Documents/programming/testing_with_rn took 4s 
❯ 
```

## package.json

Em seu package.json é possível configurar algumas coisas no jest, sendo uma delas o <b>"transformIgnorePatterns"</b>, é importante que lá sejam especificados os arquivos que você não deseja que sejam transformados pelo babel. Veja mais sobre na <a href="https://jestjs.io/pt-BR/docs/tutorial-react-native#personaliza%C3%A7%C3%A3o-de-transformignorepatterns">documentação do jest</a>.

De início podemos começar com a seguinte configuração:

```json
"jest": {
  "preset": "react-native",
  "transformIgnorePatterns": [
    "node_modules/(?!(jest-)?@react-native|react-native|react-clone-referenced-element|@react-native-community|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|native-base|@sentry/.*)"
  ]
}

```

Tudo pronto!

Agora é só abrir o seu terminal e executar o script de test que se encontra em package.json. O jest irá automaticamente procurar pelo arquivo App-test.js, que já vem criado dentro do diretório __tests__ durante a instalação do React Native CLI.

```bash
lailton in Documents/programming/testing_with_rn 
❯ yarn test

yarn run v1.22.5
warning ../../../package.json: No license field
$ jest
 PASS  __tests__/App-test.js (6.046 s)
  ✓ renders correctly (4103 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        6.079 s
Ran all test suites.
Done in 6.52s.
```

---
---
---

# Expo CLI

## 01 - Iniciando o projeto

Abra o seu terminal e navegue até o diretório que deseja iniciar o seu projeto.

```bash
lailton in ~ 
❯ cd Documents/programming
lailton in ~/Documents/programming
❯ 
```

Vamos agora iniciar o projeto.

```bash
lailton in ~/Documents/programming
❯ expo init testing_with_rn

? Choose a template: › - Use arrow-keys. Return to submit.
    ----- Managed workflow -----
❯   blank                 a minimal app as clean as an empty canvas
    blank (TypeScript)    same as blank but with TypeScript configuration
    tabs (TypeScript)     several example screens and tabs using react-navigation and TypeScript
    ----- Bare workflow -----
    minimal               bare and minimal, just the essentials to get you started
    minimal (TypeScript)  same as minimal but with TypeScript configuration

```

O expo nos oferece diferentes templates, você pode pesquisar e conhecer um pouco mais sobre cada um deles. Para o nosso objetivo o "blank" é mais do que o suficiente, então ficarei com ele. Escolha o seu e aperte enter.

Após instalado começaremos a configurar.


## Instalando dependências

Precisamos instalar o jest, a testing-library, o react-test-renderer e o jest-expo como dependências de desenvolvimento antes de tudo. 

O jest-expo será utilizado como preset na configuração do jest.

Para instalar, navegue até o projeto que acabamos de instalar e utilize o package manager de sua preferência, eu estarei utilizando yarn.

```bash
lailton in ~/Documents/programming 
❯ cd testing_with_rn
lailton in Documents/programming/testing_with_rn 
❯ yarn add jest @testing-library/react-native react-test-renderer jest-expo -D 
```

## package.json

Em seu package.json é possível configurar algumas coisas no jest, sendo uma delas o <b>"transformIgnorePatterns"</b>, é importante que lá sejam especificados os arquivos que você não deseja que sejam transformados pelo babel. Veja mais sobre na <a href="https://jestjs.io/pt-BR/docs/tutorial-react-native#personaliza%C3%A7%C3%A3o-de-transformignorepatterns">documentação do jest</a>.

De início podemos começar com a configuração recomendada na <a href="https://docs.expo.io/guides/testing-with-jest/#jest-configuration">documentação do expo</a>.

```json
"jest": {
  "preset": "jest-expo",
  "transformIgnorePatterns": [
    "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
  ]
}

```

Vamos aproveitar e escrever um script para a inicialização do Jest. Isso é importante, porque se você possuir o Jest instalado globalmente em seu computador e chamá-lo, você pode ter alguns problemas caso a versão do seu Jest seja diferente do Jest utilizado no projeto.

```json
"scripts": {
  ...
  ...
  "test": "jest"
}
```

Tudo pronto!

Agora é só abrir o seu terminal e executar o script de test que acabamos de criar.

```bash
lailton in testing_with_rn on  master [!] 
❯ yarn test

yarn run v1.22.5
warning ../../../package.json: No license field
$ jest
No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
In /home/lailton/Documents/programming/testing_with_rn
  4 files checked.
  testMatch: **/__tests__/**/*.[jt]s?(x), **/?(*.)+(spec|test).[tj]s?(x) - 0 matches
  testPathIgnorePatterns: /node_modules/ - 4 matches
  testRegex:  - 0 matches
Pattern:  - 0 matches
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

Oops, parece que nos deparamos com um erro.
Não se assuste, o Jest está funcionando perfeitamente, porém diferente do React Native CLI o Expo CLI não vêm com um arquivo de teste pronto, nós precisamos criar.

```bash
lailton in testing_with_rn on  master [!] 
❯ touch index.test.js
```

<b><i>index.test.js</i></b>

```js
/**
 * @format
 */

/* Vamos escrever um simples teste */

import 'react-native';
import React from 'react';
import App from './App';

// Nota: test renderer precisa ser importado depois do react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  renderer.create(<App />);
});
```

Salve o arquivo e rode o teste novamente!

```bash
❯ yarn test
yarn run v1.22.5
warning ../../../package.json: No license field
$ jest
 PASS  ./index.test.js
  ✓ renders correctly (2579ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.533s
Ran all test suites.
Done in 5.06s.
```

---
---
---

Parabéns, o seu projeto está configurado para rodar testes!!