Testando aplicativos com a biblioteca de testes Jest e React

Construindo um teste de unidade

Os testes de unidade testam unidades ou componentes individuais do software isoladamente. Uma unidade pode ser uma função, rotina, método, módulo ou objeto, e o objetivo do teste é determinar se a unidade produz os resultados esperados para uma determinada entrada.

Um módulo de teste compreende uma série de métodos fornecidos por Jest para descrever a estrutura dos testes. Podemos usar métodos como descrever ou testar da seguinte maneira:

 describe ('minha função ou componente', ()=> { test ('faz o seguinte', ()=> { //Magia acontece aqui });
});

O describe-block é o conjunto de testes, e o test-block (ou simplesmente teste) é o caso de teste. Um conjunto de testes pode ter vários casos de teste, e um caso de teste não precisa estar em um conjunto de testes, embora seja uma prática comum fazer isso.

Dentro de um caso de teste, escrevemos afirmações (por exemplo, esperar em Jest) que validam bem-sucedidas (verde) ou errôneas (vermelho). Cada caso de teste pode ter várias afirmações.

Aqui está um exemplo um tanto trivial de afirmações que resultam com sucesso:

 describe ('verdadeiro é verdadeiro e falso é falso', ()=> { test ('true is truthy', ()=> { esperar (verdadeiro).toBe (verdadeiro); }); test ('falso é falso', ()=> { esperar (falso).toBe (falso); });
});

A seguir, vamos escrever nosso primeiro caso de teste visando a função formatUserName do módulo utils .

Precisamos criar um novo arquivo: utils.test.js . Observe que todos os arquivos de teste usam o padrão {arquivo}.test.js onde {arquivo} é o nome do arquivo de módulo a ser testado.

Nossa função em questão recebe uma string como entrada e produz a mesma string adicionando um @ em seu início. Nossa função de teste pode afirmar que dada uma string, por exemplo, “jc”, a função produzirá “@jc”.

Aqui está o código para o arquivo de teste:

 importar {formatUserName} de"./utils"; descrever ('utils', ()=> { test ('formatUserName adiciona @ no início do nome de usuário', ()=> { expect (formatUserName ('jc')). toBe ('@ jc'); });
});

Descrevemos de forma útil o que é o módulo e para que serve o caso de teste, para que, se eles falharem, tenhamos uma ideia clara do que pode ter dado errado.

Agora que nosso primeiro teste está pronto, podemos executá-lo e ver o que sai. O CRA facilita a execução de todos os testes usando um comando simples npm .

 npm run test

Por enquanto, vamos nos concentrar na execução de um único teste usando:

 npm run test--t'utils'

Fazemos isso porque temos outros testes já criados pelo CRA que precisamos ignorar por enquanto.

Se tudo correr bem, você verá uma saída semelhante a:

Observe que um teste foi ignorado (queríamos assim) e que o outro foi aprovado com sucesso.

Mas o que aconteceria se algo desse errado? Vamos adicionar um novo teste ao conjunto de testes utils para descobrir.

 test ('formatUserName não adiciona @ quando já foi fornecido', ()=> { expect (formatUserName ('@ jc')). toBe ('@ jc'); });

Agora a situação é diferente; se o nome de usuário já contém um símbolo @ no início da string, esperamos que a função retorne o nome de usuário conforme fornecido, sem adicionar um segundo símbolo.

Vamos executar:

Conforme previsto, o teste falhou e recebemos informações especificamente sobre qual chamada esperada falhou, o valor esperado e o resultado real. Como detectamos um problema com nossa função original, podemos corrigi-lo.

 export function formatUserName (username) { return username.startsWith ('@')? nome de usuário:'@'+ nome de usuário;
}

E execute nossos testes mais uma vez:

Fizemos grandes progressos até agora. Escrevemos dois casos de teste para nosso aplicativo, detectamos um bug graças a esses casos de teste e pudemos corrigi-lo antes de lançá-lo.

Testando componentes com Jest

Testar componentes não é muito diferente de testar funções. A ideia e os conceitos são os mesmos. A diferença está em como escrevemos as afirmações.

Testaremos nosso componente App criando alguns casos de teste e, em cada caso de teste, apresentaremos coisas diferentes que podemos fazer para validar os componentes React.

Nosso primeiro teste será elementar. Isso só validará os renderizadores do componente.

Vá para o arquivo App.test.js (gerado automaticamente pelo CRA) e substitua seu conteúdo por:

 import {render} from'@ testing-library/react';
importar App de'./App'; descrever ('componente do aplicativo', ()=> { test ('renderiza', ()=> { render (); });
})

Semelhante ao anterior, temos um bloco de descrição e um bloco de teste, mas desta vez, usamos a montagem da função render e renderizamos um componente individual isoladamente. Este teste só falhará se houver um erro de compilação ou um erro no componente da função que impeça sua renderização. Embora válido, não é um teste completo porque não executa nenhuma afirmação.

Para consertar, poderíamos fazer a correspondência de conteúdos no componente e ver se eles estão presentes, por exemplo:

 import {render, screen} from'@ testing-library/react';
importar App de'./App'; descrever ('componente do aplicativo', ()=> { test ('renderiza', ()=> { render (); expect (screen.getByText ('Users:')). toBeInTheDocument (); });
})

Nosso novo teste é melhor. Ele valida que o componente pode renderizar, mas também procura um elemento presente no DOM com o texto “Usuários:” , que é, em nosso caso, é, e, portanto, o teste passou com sucesso.

O objeto screen é essencial na Biblioteca de teste do React, como ele fornece métodos auxiliares para interagir com os componentes e seus elementos.

Esperando por operações assíncronas

A seguir, queremos validar se a lista de usuários é renderizada com itens após a conclusão da API. Para isso, podemos escrever um caso de teste da seguinte maneira:

 import {render, screen, waitFor} de'@ testing-library/react';
importar App de'./App'; descrever ('componente do aplicativo', ()=> { test ('exibe uma lista de usuários', async ()=> { render (); expect (screen.getByTestId ('lista de usuários')). toBeInTheDocument (); });
});

No entanto, quando executamos os testes, ele falha com a seguinte mensagem:

O motivo da falha é simples: a operação assíncrona (busca) ainda está pendente quando avaliamos a tela, então a mensagem “Carregando usuários…” é exibida em vez da lista de usuários.

A solução é esperar:

 import {render, screen, waitFor} de'@ testing-library/react';
importar App de'./App'; descrever ('componente do aplicativo', ()=> { test ('exibe uma lista de usuários', async ()=> { render (); const userList=await waitFor (()=> screen.getByTestId ('lista de usuários')); expect (userList).toBeInTheDocument (); });
});

E agora os testes estão passando com sucesso.

Zombando com React e Jest

Nossa próxima etapa é validar como o componente reagirá aos dados coletados da API. Mas como podemos testar os dados se não temos certeza de qual seria a resposta da API? A solução para este problema é zombar.

O objetivo da simulação é isolar o código que está sendo testado de dependências externas, como chamadas de API. Isso é conseguido substituindo dependências por objetos controlados que simulam essas dependências.

A simulação é um processo de três etapas:

1. Importar as dependências

    importar axios de'axios';
   

2. Zombe da dependência

    jest.mock ('axios');
   

3. Falsifique as saídas da função

    axios.get.mockResolvedValue ({data: fakeUsers});
   

Vamos vê-los em ação agora:

 importar axios de'axios';
import {render, screen, waitFor} de'@ testing-library/react';
importar aplicativo de'./App'; jest.mock ('axios'); const fakeUsers=[{ "id": 1, "nome":"Usuário de teste 1", "username":"testuser1", }, { "id": 2, "nome":"Usuário de teste 2", "username":"testuser2", }]; descrever ('componente do aplicativo', ()=> { test ('exibe uma linha para cada usuário', async ()=> { axios.get.mockResolvedValue ({dados: fakeUsers}); render (); const userList=await waitFor (()=> screen.findAllByTestId ('item de usuário')); expect (userList).toHaveLength (2); });
});

Uma última observação. Como simulamos axios , cada caso de teste que usa a biblioteca retornará indefinido , a menos que um valor simulado seja passado. Portanto, para recapitular nosso teste de componente completo:

 importar axios de'axios';
import {render, screen, waitFor} de'@ testing-library/react';
importar App de'./App'; jest.mock ('axios'); const fakeUsers=[{ "id": 1, "nome":"Usuário de teste 1", "username":"testuser1", }, { "id": 2, "nome":"Usuário de teste 2", "username":"testuser2", }]; descrever ('componente do aplicativo', ()=> { test ('renderiza', async ()=> { axios.get.mockResolvedValue ({dados: fakeUsers}); render (); expect (screen.getByText ('Users:')). toBeInTheDocument (); }); test ('exibe uma lista de usuários', async ()=> { axios.get.mockResolvedValue ({dados: fakeUsers}); render (); const userList=await waitFor (()=> screen.getByTestId ('lista de usuários')); expect (userList).toBeInTheDocument (); }); test ('exibe uma linha para cada usuário', async ()=> { axios.get.mockResolvedValue ({dados: fakeUsers}); render (); const userList=await waitFor (()=> screen.findAllByTestId ('item de usuário')); expect (userList).toHaveLength (2); });
});

Vamos fazer todos os testes e ver os resultados:

Conclusão

Testar seu aplicativo React é a chave para produzir aplicativos de alta qualidade e, graças ao React, Jest e à Biblioteca de testes React, é mais fácil do que nunca testar nossos componentes e aplicativos.

Todo o código do aplicativo e testes estão disponíveis em GitHub .

Obrigado por ler!

A postagem Teste de aplicativos com teste Jest and React A biblioteca apareceu primeiro no LogRocket Blog .

Source link