React: testando os seus componentes

Bem começado, metade feito! - Apresentação

Boas-vindas a esse curso de testes com React. Se você ainda não está familiarizado com o React e você precisa entender melhor como funciona os conceitos de componente, de gestão de estado, de roteamento, fique tranquilo, eu coloquei aqui os pré-requisitos que você precisa ter para poder conseguir tirar o maior proveito desse curso.

E se você já está mais tranquilo, se você já sabe o que é React, se você já consegue controlar o estado da sua aplicação e já sabe controlar o roteamento das páginas da sua aplicação, você está no lugar certo. Aqui você vai aprender como desenvolver testes, vamos ter uma visão bem legal de várias opções e alternativas de testes que podemos ter durante o desenvolvimento de uma aplicação.

Esse aqui é o Figma da aplicação que vamos desenvolver, ou seja, a designer planejou esse layout, essa usabilidade e vamos implementá-la. Porém, fique atento ao seguinte: o foco do curso é testes, durante os vídeos vamos desenvolver todos os testes e os comportamentos dos componentes, e a parte de layout fica como se fossem os seus desafios. Ao final de cada aula tem um desafio propondo qual é o layout naquele momento do projeto.

Você vai fazendo e no final você vai ter o projeto com testes que são estilizados. E tem aqui um desafio maior: não vamos ver esse projeto rodando até o final do curso. No decorrer das aulas o que mais vamos ver é npm test, o que vamos ver são testes passando. Vamos começar com a aplicação só com o teste que vem por padrão em projetos React e vai desenvolver todos os outros.

Aqui nesse cenário temos seis casas de testes e treze testes já desenvolvidos e todos passando. Vamos passar por testes de comportamento, testes de função pura, vamos fazer testes de Snapshot, vamos interagir com elementos, tem muita coisa legal para vermos.

Espero que você esteja tão animado quanto teu para testar essa aplicação que é sorteador de amigo secreto.

Bem começado, metade feito! - Olá mundo dos testes!

Vamos iniciar esse mergulho no mundo de testes com React e TypeScript nessa aplicação que vai ser um sorteador de amigo secreto. O link para download vai estar disponível para você, eu já baixei aqui na minha máquina.

Eu vou direto para o terminal, estou aqui na área de trabalho cd Desktop, aqui eu tenho a pasta onde eu baixei o projeto que é o cd sorteador-de-amigo-secreto e vou pedir para ele baixar, instalar aqui as dependências. Deixei-o baixando as dependências e vamos dar uma olhada no Figma desse projeto.

Ele já está aberto aqui na versão mobile, esse link para o Figma vai estar disponível para você na atividade dessa aula e basicamente temos que fazer essas duas páginas. A primeira delas é onde vamos configurar a nossa brincadeira, ou seja, vamos cadastrar a lista dos participantes, tomando aquele cuidado para não cadastrar nomes repetidos.

Depois que terminamos de cadastrar todo mundo, iniciamos a brincadeira e vamos para a segunda página que é a página onde o sorteio de fato é feito. Todos os participantes vão estar disponíveis aqui nesse select como opção, eu vou selecionar o meu nome, vou sortear, vou ver qual é o meu amigo secreto e vou poder ver o resultado do sorteio só por alguns segundos. É essa aplicação que vamos desenvolver.

Vou dar um zoom aqui para fora e ele tem uma versão diferente se quisermos usar no Desktop. No final a nossa aplicação vai ficar assim, bonita, com essa paleta mega bonita, enfim, é isso que vamos desenvolver no decorrer dessas aulas todas.

Vou voltar lá no terminal, vamos ver se ele já acabou de baixar as dependências e para a minha sorte ele já baixou. E o que eu quero fazer aqui é o que normalmente fazemos quando iniciamos um projeto ou quando baixamos um projeto novo. Vamos aqui e rodamos o npm start que vai fazer o projeto subir e vamos no navegador e acessamos ele na porta 3000 por padrão.

Só que esse curso aqui é diferente, é um curso de testes. Por isso não vamos startar a aplicação, vamos fazer um npm test. Deixei ele rodar, e ele já disse para mim que desde o meu último commit ele não achou nada para ser testado. Não tem problema, ele me dá um menu de opções e eu vou pedir para ele rodar todos os testes novamente. E está ali, está verde.

Ele rodou todos os testes, já vem um teste padrão. Quando criamos uma aplicação do React esse teste já vem escrito por padrão, se você não remover, ele vai lá e vai rodar. Vamos ao VS Code, vamos dar uma olhada nesse teste, aqui em "src" ele tem aqui um "App.test.tsx". É esse teste aqui que ele está rodando.

O que ele está fazendo aqui? Vamos passar a grosso modo, de alguma forma ele disse o que esse teste vai fazer, ele renderiza o componente, ele de alguma forma encontra o link lá dentro e espera que esse link que ele encontrou esteja no documento, ele está procurando por um termo. Esse aqui, learn.react, é uma expressão regular, é um Regex, se eu mudar isso aqui para o meu nome, por exemplo, se eu pedir para ele procurar por vinicios eu vou voltar lá no terminal, vamos lá na pasta do teste e repare, agora falhou.

Procuramos por um elemento que contenha Vinicios, isso não existe no documento e por isso o teste está falhando. Isso aqui já está ok, já tenhamos o terreno o bem preparado para começar a desenvolver as aplicações, mas com os nossos testes.

Antes de seguirmos e começar a escrever o nosso primeiro teste eu tenho uma observação para fazer: vamos estar focados durante o decorrer de todo o curso em criar testes. Basicamente em nossas aulas vamos ver o VS Code e vamos ver essa tela preta do terminal. Vou fazer o "Ctrl + Z" para o teste passar, agora sim, e é isso aqui que vamos ver na maior parte do tempo que é teste e resultado de teste.

Durante os nossos vídeos não vamos codar essa parte de estilo de CSS e tudo mais, mas ao final de cada aula vai ter um desafio para você e codar o estilo do jeito que você achar mais legal, mas sempre tem o gabarito, não se preocupe que você vai conseguir dar uma olhada para chegar lá no final, quando de fato formos rodar a aplicação e publicá-la termos ela completa com todos os estilos que ela precisa.

Mais uma vez, durante o curso vamos ficar até o final olhando a tela preta, passando teste, falhando teste e codando componentes e lá no final, aí sim, vamos ver projeto rodando certo. Vamos lá que está na hora de escrever testes, eu já estou falando há um tempo, vamos colocar a mão na massa e escrever o nosso primeiro teste. Espero você no próximo vídeo.

Bem começado, metade feito! - Buscando elementos na tela

Como combinamos no último vídeo, vamos direto escrever o nosso primeiro teste. Na nossa aplicação, vamos dar uma olhada no Figma, e ele tem aqui um input e um botão para configurar o nosso sorteio. Vamos começar testando esse formulário de edição.

No Vs Code vou pedir um novo arquivo dentro da pasta chamada "Componentes" , vou criar o “formulario.test.tsx”. Precisamos de um React, import react, e vamos chamar aqui uma função de uma biblioteca chamada Jest que é a função test (' ', () => {}, e está aqui a nossa função que vai receber dois argumentos. O primeiro argumento é o que eu quero testar, é o nome, a descrição deste teste, o que este teste testa. E o segundo argumento é a implementação do teste em si.

Aqui eu quero testar que: test('quando o input está vazio, novos participantes não podem ser adicionados', () => { }. É isso que eu quero testar, eu quero ter um formulário com um input e um botão lá dentro e se eu estiver com o input vazio eu não posso adicionar outros participantes.

Para fazer esse teste, de alguma forma precisamos // encontrar no DOM o input,// encontrar o botão, // garantir que o input esteja no documento e // garantir que o botão esteja desabilitado. É isso que vamos fazer. E para traduzir esse texto em português para comandos e interações para que o Jest entenda, a primeira coisa que temos que fazer é renderizar esse componente, vou chamar uma função render.

Repare que o VS Code já sugere importar o render para do React Testing Library, ele vai fazer a importação para mim. Aqui eu quero renderizar um componente chamado formulário render(< Formulario/>). Eu quero também encontrar o input , vamos fazer assim: const input = screen que vai receber, eu preciso de alguma forma ter acesso a tela para rodar queries e encontrar coisas. Essa mesma biblioteca, o React Testing Library, nos ajuda nesse sentido, ele consegue nos entregar um objeto chamado screen.

Note que o VS Code já sugere importarmos o screen do Testing Library. Esse screen nada mais é do que a tela, vou lá na tela e eu quero encontrar esse input lá dentro. Inicialmente eu quero buscar pelo place holder, eu vou chamar aqui uma função que é: const input = screen.getbyplaceholderText(), que é o texto que fica no input, com o input vazio ele mostra o placeholder

Esse placeholder vai ser: ('Insira o nome dos participantes'), é isso que eu vou ter lá no placeholder. Eu sei disso porque está no Figma, está no plural (‘insira os nomes dos participantes’). E é isso que eu quero fazer, eu quero encontrar esse input lá dentro.

Nós também precisamos de um botão, const botao = screen.. Dessa vez eu não quero buscar pelo placeholder, eu quero que ele encontre o botão pela responsabilidade que o botão tem dentro do formulário que é de submeter, eu vou usar dessa vez um const botao = screen.getbyRole('button'), que eu quero que ele seja encontrado pela responsabilidade do elemento. A role do botão no HTML é a mesma de button, eu consigo identificar isso no HTML quando ele está semântico, está direito.

Agora precisamos garantir que esse input esteja no documento, esperamos que o input esteja no documento: expect(input).toBeInTheDocument(), é isso que esperamos. Dado o formulário, renderizei ele, fui na tela, procurei um input pelo placeholder e garanti que ele existe lá no documento HTML. E garantir que o botão esteja desabilitado, eu espero: expect(botao).toBeDisabled().

Repare que aqui temos um conjunto de bibliotecas nos ajudando. Temos dois cenários: primeiro temos o testing-library e segundo temos o Jest. Quando estamos manipulando a tela e fazendo coisas, por exemplo, como screen.getByPlaceholderText é o testing-library que está nos ajudando. Quando fazemos asserções desse tipo é o Jest ou Jest DOM que nos garantem que possamos fazer esses testes.

Esperamos alguma coisa, esperamos que o input exista no documento, esperamos que o botão esteja desabilitado.

Vou voltar ao terminal e vamos ver como isso aqui se passou. O terminal já está dizendo: você tem um teste que falhou, você está fazendo o import de formulário e formulário not defined. Ou seja, de onde é esse formulário, cadê ele? Eu não o conheço. Você está chamando esse componente e eu não o conheço, onde ele está?

Se eu olhar aqui até no VS Code repare que até o typescript já está reclamando que não consegue encontrar o nome formulario. Agora, que já sabemos o que precisamos está na hora de implementar o componente para fazer o teste passar.

Nós já temos o teste inicial, agora precisamos fazê-lo passar, ou seja, ele está vermelho e agora precisamos fazê-lo ficar verde, fazê-lo passar. Vamos para essa implementação do formulário para fazer esse teste passar, só que será só no próximo vídeo.

Sobre o curso React: testando os seus componentes

O curso React: testando os seus componentes possui 160 minutos de vídeos, em um total de 52 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Bem começado, metade feito!
• Testando comportamentos
• Finalizando a configuração
• Sorteando amigos secretos
• Da sua máquina para o mundo