Entendendo Jest e como utilizar essa biblioteca no React Native

Imagine que você acaba de finalizar seu código, e irá executar seu programa. Mas infelizmente, ele avisa sobre um erro que passou despercebido no seu desenvolvimento, e mesmo que tente encontrar, são muitos arquivos com diversos componentes separados trabalhando para que a aplicação consiga rodar e infelizmente ela falha. Como você encontraria este erro em meio a tantas linhas de código? Para que não seja uma enorme dor de cabeça, achar esses erros num nível tão avançado de desenvolvimento, foi criado diversos tipos de testes para analisar e acusar erros no decorrer de seu código. E existem ferramentas criadas exclusivamente para isso, como é o caso do Jest. vamos aprender um pouco mais sobre ele e entender como o utilizar.

O que é Jest? -

A um certo tempo, falamos sobre testes unitários no React, e a biblioteca Jest nada mais é que algo focado exclusivamente para testes sejam: testes unitários, testes de integração e testes de snapshot (ou seja, testes que verificam se a saída de uma determinada unidade de código permanece consistente ao longo do tempo).

O Jest é capaz de testar diversas partes de uma aplicação React, como: componentes, funções, hooks e fluxos de dados. Ele oferece uma sintaxe simples e intuitiva para escrever testes, além de uma série de ferramentas para facilitar a escrita e execução dos mesmos.

Usando Jest no React Native -

A partir da versão 0.38 de react-native, uma instalação Jest é incluída por padrão, ao executar react-native init. A seguinte configuração deve ser automaticamente adicionada ao seu arquivo package.json:

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "preset": "react-native"
  }
}

Porém, caso não tenha nada parecido, pode instalar manualmente o Jest da seguinte maneira:

npm install --save-dev jest

Vamos criar um arquivo de configuração para o Jest. Você pode criar um arquivo jest.config.js na raiz do seu projeto. Aqui está um exemplo básico de configuração:

module.exports = {
  preset: 'react-native',
  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
};

Este exemplo configura o Jest para usar o preset react-native e estender os recursos de teste da biblioteca @testing-library/jest-native.

Após isso seguimos os passos a seguir:

• Crie os arquivos de teste. Crie arquivos com nomes terminados em .test.js ou .spec.js em um diretório tests ou junto com o código fonte que está sendo testado.

Por exemplo, se você quiser testar um componente chamado MyComponent, crie um arquivo chamado MyComponent.test.js em um diretório tests ou junto com o arquivo MyComponent.js.

• Escreva seus testes. Use as funções de teste fornecidas pelo Jest, como test e expect, para escrever seus testes. Veja um exemplo básico de teste para um componente:

import React from 'react';
import { render } from '@testing-library/react-native';
import MyComponent from './MyComponent';

test('renders correctly', () => {
  const { getByText } = render(<MyComponent />);
  const textElement = getByText('Hello, world!');
  expect(textElement).toBeDefined();
});

Este exemplo renderiza o componente MyComponent e verifica se um elemento de texto com o conteúdo 'Hello, world!' está presente na saída.

Vimos claramente como a usabilidade do Jest está na capacidade de ajudar a garantir a qualidade e o bom funcionamento de aplicações React, através da execução de testes automatizados.Alé destes testes, como citado anteriormente, temos outros diversos disponíveis.Além disso, o uso do Jest pode ajudar a reduzir custos de manutenção e melhorar a produtividade da equipe de desenvolvimento.