Executando verificação de segurança...
1
imacedoo
1 min de leitura ·

[COMO-VOCÊS-FARIAM] - Teste de integração com React, TS e Cypress?

Salve!

Contexto do desenvolvedor(Eu): Tenho pouca expêriencia com testes, estou começando a escrever os meus primeiros.
Contexto da dúvida: Um gerador de Qr Code, cujo input é o CPF de uma pessoa pré cadastrada em uma base de dados e o output é um uma imagem png do Qr Code.

Irei escrever um teste de integração para um fluxo de geração de Qr Code e ao escrever o teste para o caso em que da certo, fiquei com algumas dúvidas...

O que seria o caso em que da certo?
Input de um CPF válido -> Request para API -> Recebo imagem png e renderizo.

  • Vocês interceptariam a request para API e devolveriam uma resposta positiva considerando o contrato do endpoint ou deixariam "bater" a request na API mesmo?
  • No caso de interceptar a request, eu estaria confiando na resposta da API e testando apenas o frontend, sendo de responsabilidade da API ter os próprios testes para garantir a devolução de acordo com contrato, certo?
  • No caso de deixar "bater" na API, como eu poderia gerenciar um CPF mockado válido? Uma vez que esse CPF poderia deixar de existir na base de dados, logo não seria mais um CPF válido e eu teria que trocar o mock, além disso teria que deixar um dado pessoal lá no teste.

Enfim, como vocês fariam?

Carregando publicação patrocinada...
2
jvfelix

Olá! Vou tentar te ajudar aqui.

Primeiro irei responder às suas perguntas e em sequência responder como eu faria.

  • Sim, na grande maioria dos casos você vai querer interceptar a request. Em um cenário que você precisa rodar testes constantemente, seja manualmente, seja em um workflow de CI/CD, ou seja com husky e lint-staged em um pre-commit, por exemplo, não é ideal que sempre haja request para a API, além de ser ruim para a API que irá receber requests em grande quantidade, seu teste se torna dependente da API;
  • Você mencionou React e TypeScript, isso é Front-end. Você tem responsabilidade sobre o queé enviado para a API e o que usuário vê em tela, e não os dados que são processados ou recebidos, sua função é garantir que o QR code apareceu em tela, e somente;
  • Neste caso você pode utilizar algo como o faker-br para gerar um CPF, por exemplo. Se funcionaria eu não sei, nunca utilizei algo deste tipo, portanto não posso falar nada, cabe a você testar.

Agora, vamos ao que eu faria.

Em primeiro lugar, eu não utilizaria o Cypress, Jest/Vitest com o React Testing Library é suficiente pra isso. Você mencionou que é retornado uma imagem png, essa imagem será renderizada em algum componente. Portanto, utilizaria uma tag img com alt ou aria-label (o alt é mais comum para imagens), obteria o elemento utilizando o getByRole ou getByAltText e verificaria se ele está na DOM.

OBS: Não deixaria o teste batendo na API real, utilizaria o msw para mockar a chamada à API e retornar os dados mockados.

Espero ter sanado sua dúvida!

1