Testes em React Native com Jest e Testing Library, Configurando o ambiente

Lailton Batista — Sun, 11 Apr 2021 15:43:47 +0000

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 documentação oficial.

Decida se irá utilizar React Native CLI ou Expo CLI 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.

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

Vamos agora iniciar o projeto com npx, seguindo as recomendações da documentação do React Native.

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.

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.

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 "transformIgnorePatterns", é importante que lá sejam especificados os arquivos que você não deseja que sejam transformados pelo babel. Veja mais sobre na documentação do jest.

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

"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.

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.

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

Vamos agora iniciar o projeto.

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.

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

De início podemos começar com a configuração recomendada na documentação do expo.

"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.

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

Tudo pronto!

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

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.

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

index.test.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!

❯ 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!!

Forem: Lailton Batista

Testes em React Native com Jest e Testing Library, Configurando o ambiente

Introdução

Observações

React Native CLI

01 - Iniciando o projeto

Instalando dependências

package.json

Expo CLI

01 - Iniciando o projeto

Instalando dependências

package.json