Executando verificação de segurança...
1

[DÚVIDA] Testes no Front End

Olá pessoas, recentemente venho estudando testes no Front end, pra ser mais específico venho utilizando Jest + Testing Library + React Testing Library (Meu projeto é feito utilizando Vite, TS e React) e venho tendo dúvidas em "O que testar?"

Lendo a documentação do Testing Library, eu teria que testar de forma como se fosse um usuário vendo e mexendo no site, eu consegui captar essa idéia, porem venho tendo alguns conflitos.

Exemplo

Por exemplo, eu tenho um select (combobox) com 3 itens:
expect(screen.getByRole('combobox', {name: 'Estado'})).toBeInTheDocument();
expect(screen.getByRole('option', {name: 'Selecione uma opção'})).toBeInTheDocument();
expect(screen.getByRole('option', {name: 'Ativo'})).toBeInTheDocument();
expect(screen.getByRole('option', {name: 'Desativo'})).toBeInTheDocument();
expect(screen.getAllByRole('option')).toHaveLength(3)

Nesse teste eu verifico se o select e os itens estão em tela, e se há somente 3 opções, porque é somente esses itens que eu quero nesse select. Bem esse seria um teste válido, certo? (O mais básico é ver se os itens estão em tela)

Dúvida

O que mais eu poderia estar testando, por exemplo:

  • Se ao trocar de valor, a seleção é feita corretamente
  • Se o default value é o que espero que seja

É que são tantas possibilidades de teste que me deixa confuso sobre o que realmente vale a pena testar e o que não vale, se puderem me indicar vídeos, blogs, livros que me ajudem a tirar essa dúvida, agradeço muito.

Carregando publicação patrocinada...
2

Olá @gablucas, Testes no frontend não é algo trivial de se fazer, só é preciso entender o que são testes e como desenvolver isso com a ferramenta.

No teu caso, você está trabalhando num ambiente com testing-library e ele é muito bom, e também adota o seguinte padrão dito no site:

"Quanto mais seus testes se assemelharem à maneira como seu software é usado,
mais confiança eles podem lhe dar."

Então dessa forma, seus testes, para serem mais assertivos, devem seguir esse paradigma, até porque não é necessário testar todos os componentes e sim funcionalidades do teu sistema.

No teste do select (combobox), o que seria ideal, seria testar se a lista está sendo renderizada, após isso, o usuário clicando no select, selecionando a opção e clicando no botão para enviar essa informação. Com isso você já tem o caminho que o usuário está fazendo para prosseguir nesse formulário.

Com isso em mente, você pode testar cenários do usuário tentar salvar a informação sem selecionar o select, se o formulário tem alguma tratativa que mostre uma mensagem de erro falando pro usuário que não pode salvar sem selecionar alguma opção e por ai vai.

Espero ter ajudado um pouco a entender como pensar em testes, e o restante vai vindo com a experiência e dia a dia fazendo.

Sobre conteúdo, indico sempre a Alura na qual eu já estudei lá e o conteúdo é muito bom, e free eu indico o Willian Justen, ele tem conteúdo sobre testes e vai ser de muita ajuda.

1

Valeu amigo, então pelo que entendi, eu também deva simular um fluxo de ação no caso, o que me 'buga' um pouco a mente, é no sentido como posso estruturar o teste, no exemplo que você deu o usuário clicando no select, selecionando a opção e clicando no botão para enviar essa informação

Eu teria de testar dois comportamentos?

  1. O usuário clicando no select, selecionando a opção (O usuário pode trocar de opção e não clicar no botão para enviar, e tambem para garantir que a troca na seleção seja efetuada corretamente)

  2. O usuário clicando no select, selecionando a opção e clicando no botão para enviar essa informação (Testar o fluxo completo)

Eu acho que estou entendo os testes de maneira errada, me falta esse clique, na minha concepção, eu devo testar um fluxo completo e também esse fluxo de forma separada.

Obrigado pela dica de conteúdo, abraço.