DEV Community

loading...

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

lailtonb profile image Lailton Batista ・5 min read

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
❯ 
Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

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 
❯ 
Enter fullscreen mode Exit fullscreen mode

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 
❯ 
Enter fullscreen mode Exit fullscreen mode

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/.*)"
  ]
}

Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode



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
❯ 
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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 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/.*)"
  ]
}

Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 />);
});
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode



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

Discussion (0)

pic
Editor guide