Como fazer um Teste Unitário em React Native, utilizando Jest.

Os chamados Testes unitários são uma prática comum na engenharia de software, em que as unidades de código são testadas individualmente para garantir que funcionem corretamente. Em React Native, os testes unitários são usados para testar componentes individuais para garantir que eles funcionem corretamente e sem erros.

Como funcionam os testes unitários em React Native? -

Os testes unitários em React Native são escritos usando uma biblioteca de testes, como o Jest, que é fornecido com o React Native. O Jest é uma biblioteca de testes JavaScript desenvolvida pelo Facebook, que é usada para testar o código do React Native. Para escrever testes unitários em React Native, você precisa criar um arquivo de teste separado para cada componente que deseja testar.

Um exemplo de como os testes unitários podem ser usados em React Native é testando um componente de botão. O teste pode verificar se o botão aparece corretamente na tela, se o texto do botão é exibido corretamente e se o botão funciona corretamente quando é pressionado.

Criando um Teste Unitário na prática

Para escrever um teste, vamos dar outro exemplo: Analisar a nota de uma aplicação que consulta informações sobre filmes.

(A aplicação no caso seria essa, baseada no projeto TVmaze, criado por Lucas Garcez, seu canal para analisar a fundo a criação deste projeto segue por meio deste link: https://www.youtube.com/watch?v=lg0K1UpZKlI)

No caso deste projeto, ele é feito em React Native CLI que tem acesso total as pastas Android e iOS. Nele faremos o nosso primeiro Teste Unitário. Como nesse projeto de criação tanto JEST e React Native Testing já vem instalados em seu projeto. Porém precisamos instalar o React Native Testing Library com seu pacote react native. É necessário que já tenhamos instalado biblioteca(que estará no package.json) react-test-renderer. Com essa biblioteca instalada, damos o comando de instalação via NPM ou YARN:

yarn add --dev @testing-library/react-native

npm install --save-dev @testing-library/react-native

Também faremos o mesmo no caso do JEST:

yarn add --dev @testing-library/jest-native

npm install --save-dev @testing-library/jest-native

Feito a instalação das duas bibliotecas, faremos uma leve configuração no nosso package.jsonpara que assim o projeto funcione corretamente, ele será inserido no "jest" do mesmo.(ele pode estar em um outro arquivo separado):

{
 "present": "react-native",
 "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"]
}

Feito isso iremos finalmente fazer nosso primeiro teste. Na aplicação, temos as séries e suas descrições e também temos a sua nota em estrela. É nela que faremos o Teste unitário.

Ele é um componente que se chama StarRating.tsx, veja a seguir como ele é seu código:

import React from 'react';

import {StyleSheet, Text, View} from 'react-native';
import {Rating} from '../../models/CommonModels';
import {colors} from '../../styles/colors';
import {ImageIcon} from '../ImageIcon/ImageIcon';

const starIcon = require('../../assets/images/star.png');

interface Props {
  rating?: Rating;
}
export function StarRating({rating}: Props) {
  if (!rating?.average) {
    return null;
  }

  return (
    <View style={styles.content}>
      <ImageIcon color={colors.gold} source={starIcon} />
      <Text style={styles.ratingText}> {rating.average}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  content: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  ratingText: {
    color: colors.onBackground,
    fontSize: 20,
  },
});

O componente é simples e recebe a proprieda de rating, sua tipagem seria average do tipo number.

Criaremos nossa pasta e arquivo de testes na mesma pasta onde está guardado o StarRating.tsx. Noss pasta se chamará: __test__(na documentação do JEST, a foram padrão desse framework identificar arquivos de teste unitário é assim).

Dentro desta pasta, criaremos o tão desejado arquivo de teste, que receberá o mesmo nome do componente, mas com adicional .textantes de sua nomeclatura padrão, formando o seguinte arquivo: StarRating.text.tsx (seu ícone irá parecer uma porção.). O padrão de criação de Testes Unitários segue neste mesmo modelo.

Dentro do arquivo de Teste Unitário em sua documentação, é revelado que precisamos chamar o método test para o executar. Começaremos a escrever na linha de código o seguinte:

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

test('component rendered', () => {

 render(<StarRating rating ={{average: 5}} />);
});

Como não queremos rodar todos os testes, mas apenas o criado nesse caso nós vamos abrir o terminal e usar o seguinte comando:

yarn test --testPathPattern= component rendered

O código será executado e irá executar nosso Teste Unitário em apenas um único component criado StarRating:

Concluímos que os testes unitários são uma prática importante para garantir que os componentes funcionem corretamente. Ao escrever testes unitários em React Native, os desenvolvedores podem garantir que os componentes funcionem corretamente e sem erros antes de implantar o código em produção. O uso de testes unitários também pode ajudar a reduzir o tempo necessário para identificar e corrigir bugs no código, o que pode ser especialmente importante em projetos grandes e complexos. Em resumo, os testes unitários são uma parte essencial do desenvolvimento de aplicativos React Native bem-sucedidos e confiáveis para garantir que a execução total de sua aplicação tenha êxito.