Como configurar o Jest para testar o React?

À medida que mais e mais desenvolvedores adotam o React como sua estrutura de front-end preferida, torna-se cada vez mais importante garantir que o código que escrevemos seja da mais alta qualidade. Um aspecto importante da garantia de qualidade é o teste, e o Jest é uma estrutura de teste popular que é frequentemente usada com o React.

Jest é uma estrutura de teste de código aberto desenvolvida pelo Facebook e projetada para tornar o teste do seu código JavaScript o mais fácil e eficiente possível. É rápido, tem uma API fácil de usar e vem com vários recursos integrados que facilitam os testes.

Neste artigo, iremos guiá-lo através do processo de configuração do teste Jest for React. Cobriremos tudo o que você precisa saber para começar, desde a instalação do Jest até a criação do seu primeiro caso de teste.

Brincadeira para teste de reação

Jest é uma estrutura de teste popular usada para testar aplicativos React. Ele é criado pelo Facebook e é conhecido por sua facilidade de uso e tempo de configuração rápido. O Jest foi projetado para funcionar com o React pronto para uso e fornece muitos recursos para facilitar os testes.

Aqui estão alguns dos recursos que tornam o Jest uma escolha popular para testar aplicativos React:

i) Teste de instantâneo: Jest fornece um recurso de teste de instantâneo que permite comparar a saída atual de um componente com um instantâneo armazenado anteriormente. Isso torna mais fácil verificar se alguma alteração não intencional foi feita na saída do componente.

ii) Mocking: Jest fornece recursos de mocking embutidos que permitem que você crie funções e módulos de mock. Isso é útil quando você precisa simular o comportamento de uma função ou módulo que não está prontamente disponível ou é difícil de testar.

iii) Cobertura de código: Jest fornece um relatório de cobertura de código que mostra a porcentagem de código coberta por seus testes. Isso é útil para identificar áreas do seu código que não foram testadas e podem precisar de atenção adicional.

iv) Teste assíncrono: o Jest facilita o teste de código assíncrono, fornecendo utilitários para gerenciar o código assíncrono. Isso permite que você escreva testes que aguardam promessas ou outro código assíncrono para resolver antes de fazer asserções.

v) Configuração fácil: Jest é fácil de instalar e configurar para seu aplicativo React. Ele vem com uma configuração padrão que funciona imediatamente, mas pode ser personalizada para atender às suas necessidades específicas.

No geral, o Jest é uma estrutura de teste poderosa e flexível que facilita o teste de aplicativos React. Seus muitos recursos e fácil configuração o tornam uma escolha popular para desenvolvedores que desejam escrever testes confiáveis ​​para seus componentes React.

Configurando o Jest para testes de reação

Existem algumas etapas que você precisa seguir para configurar o teste Jest for React em 2023.

1) Instale o Jest

Jest pode ser instalado em seu projeto usando npm ou yarn. Aqui estão as etapas para instalar o Jest usando o npm:

i) Abra seu terminal ou prompt de comando e navegue até o diretório do seu projeto.

ii) Execute o seguinte comando para instalar o Jest como uma dependência de desenvolvimento em seu projeto:

npm install –save-dev jest

Este comando instalará o Jest e o adicionará ao arquivo package.json do seu projeto na seção devDependencies.

Assim que a instalação estiver concluída, você pode começar a escrever seus testes usando o Jest. Você pode executar seus testes usando o comando npm test. Por padrão, o Jest procura arquivos de teste nomeados com a extensão .test.js ou .spec.js . No entanto, você pode configurar o Jest para procurar testes com outras extensões modificando a propriedade testMatch em seu arquivo de configuração do Jest.

É isso! Agora você tem o Jest instalado em seu projeto e pode começar a escrever testes para seu aplicativo.

2) Crie um arquivo de configuração

Para criar um arquivo de configuração para o Jest, você pode criar um arquivo chamado jest.config.js no diretório raiz do seu projeto. Este arquivo conterá as opções de configuração que o Jest deve usar ao executar os testes.

Aqui está um exemplo de arquivo de configuração:

module.exports = {

// Indica quais tipos de arquivo devem ser considerados como arquivos de teste.

testeMatch: [

'**/__tests__/**/*.js?(x)',

'**/?(*.)+(spec|teste).js?(x)'

],

// Uma lista de caminhos para diretórios que o Jest deve usar para procurar arquivos.

raízes: ['<rootDir>/src'],

// Um ​​mapa de expressões regulares para caminhos para transformadores.

transformar: {

'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'

},

// Os padrões glob que Jest usa para detectar arquivos de teste.

testPathIgnorePatterns: [

'<rootDir>/node_modules/',

'<rootDir>/build/'

],

// Uma lista de nomes de repórteres que o Jest usa ao escrever relatórios de cobertura.

coverageReporters: ['json', 'text', 'html'],

// Uma matriz de extensões de arquivo que seus módulos usam.

moduleFileExtensions: ['js', 'json', 'jsx']

};

Este arquivo de configuração de exemplo especifica as seguintes opções:

a) testMatch: Especifica o padrão usado para identificar arquivos de teste.

b) raízes: Especifica os diretórios nos quais o Jest deve procurar os arquivos.

c) transform: Especifica as transformações que o Jest deve aplicar aos arquivos antes de executar os testes.

d) testPathIgnorePatterns: Especifica os padrões a serem ignorados ao pesquisar arquivos de teste.

e) coverageReporters: Especifica os reporters que o Jest deve utilizar para gerar relatórios de cobertura.

f) moduleFileExtensions: Especifica as extensões de arquivo que o Jest deve procurar ao procurar por arquivos.

Você pode modificar este arquivo de configuração para atender às necessidades do seu projeto. Depois de criar seu arquivo de configuração, o Jest o usará automaticamente ao executar testes em seu projeto.

3) Escreva seus testes

Depois de instalar o Jest e configurar seu arquivo de configuração, você pode começar a escrever testes para seu aplicativo React. Aqui estão as etapas para criar um arquivo de teste e escrever um teste:

i) Crie um novo arquivo com a extensão .test.js ou .spec.js . Este será o seu arquivo de teste.

ii) No arquivo de teste, importe o componente ou função que deseja testar:

import { soma } de './myFunctions';

iii) Escreva seu teste. Um teste é uma função que usa a API Jest para verificar se o componente ou função se comporta conforme o esperado:

descreva('soma', () => {

test('soma 1 + 2 para igualar 3', () => {

espera(soma(1, 2)).toBe(3);

});

});

Neste exemplo, estamos testando uma função de soma simples que adiciona dois números. A função de descrição agrupa testes relacionados, enquanto a função de teste especifica um único caso de teste. A função expect verifica se a função sum retorna o valor esperado.

iv) Execute seus testes executando o comando npm test no diretório do seu projeto. O Jest procurará arquivos de teste em seu projeto e executará todos os testes que encontrar.

Você pode adicionar quantos testes precisar para cobrir toda a funcionalidade do seu componente ou função. O Jest fornece uma ampla variedade de correspondências e outros utilitários que você pode usar para criar testes mais complexos.

Ao escrever testes para seu aplicativo React, você pode garantir que seu código funcione conforme o esperado e evitar a introdução de regressões ao fazer alterações em sua base de código.

4) Execute seus testes

Para executar seus testes usando o Jest, você pode usar o comando npm test no diretório do seu projeto. O Jest detectará e executará automaticamente qualquer arquivo de teste em seu projeto que corresponda ao padrão especificado em seu arquivo de configuração Jest.

Quando você executa o teste npm, o Jest exibe os resultados de seus testes no console. Se todos os testes forem aprovados, o Jest exibirá um resumo dos resultados do teste:

PASS src/components/Example.test.js

✓ renderiza sem travar (21ms)

Conjuntos de teste: 1 passou, 1 total

Testes: 1 passou, 1 total

Instantâneos: 0 total

Tempo: 3.204s, estimado 4s

Executei todos os conjuntos de teste.

Se algum teste falhar, o Jest exibirá uma mensagem de erro que descreve a falha e a localização do teste com falha:

FAIL src/components/Example.test.js

• Componente de exemplo › renderiza sem travar

TypeError: Não é possível ler a propriedade 'mapa' de indefinido

10 | render() {

11 | const { itens } = this.props;

> 12 | return items.map(item => <div key={item.id}>{item.name}</div>);

| ^

13 | }

14 | }

15 |

em Example.render (src/components/Example.js:12:17)

em ReactTestRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)

em Object.<anonymous> (src/components/Example.test.js:9:16)

Conjuntos de teste: 1 falhou, 1 total

Testes: 1 falhou, 1 total

Instantâneos: 0 total

Tempo: 3.537s, estimado 4s

Executei todos os conjuntos de teste.

O Jest também fornece uma variedade de opções que você pode usar para personalizar o comportamento de seus testes, como executar testes no modo de observação, gerar relatórios de cobertura de código e muito mais. Você pode encontrar mais informações sobre essas opções na documentação do Jest.

Empacotando

O LambdaTest é uma poderosa plataforma de teste baseada em nuvem que pode ser usada em conjunto com o Jest para testar aplicativos React. Aproveitando a escalabilidade da infraestrutura baseada em nuvem do LambdaTest, você pode executar seus testes Jest de forma rápida e eficiente em uma ampla variedade de navegadores e dispositivos, garantindo que seu aplicativo funcione conforme o esperado em diferentes ambientes.

Neste blog, abordamos as etapas necessárias para configurar o Jest para testar aplicativos React. Também aprendemos como configurar o Jest para usar o LambdaTest como um ambiente de teste, escrever testes usando o Jest e executar testes na infraestrutura baseada em nuvem do LambdaTest.

Usar LambdaTest e Jest juntos fornece uma solução de teste robusta para desenvolvedores React que pode ajudá-los a detectar regressões e bugs no início do ciclo de desenvolvimento, melhorando a qualidade geral de seus aplicativos.

Portanto, se você deseja simplificar seu fluxo de trabalho de teste React, considere usar LambdaTest e Jest juntos para obter testes abrangentes, escaláveis ​​e eficientes para seus aplicativos React.