Teste de Software com Front-end

Introdução:

No passado escrever testes era algo desejável, hoje é algo obrigatório. E porque eu afirmo isso? Porque as exigências de um software de qualidade estão cada vez mais altas, um software com defeito irá apresentar falhas e down-time. E acredite, isso pode custar muito para a empresa em que você trabalha.

Testes de software são fundamentais para garantir a qualidade e a estabilidade das aplicações. No mundo do desenvolvimento front-end, onde a interatividade e a experiência do usuário são essenciais, ter uma estratégia de testes bem definida é ainda mais crucial.

Por que testar o meu software?

Escrever testes é muito importante para o bom funcionamento e principalmente para evitar dores de cabeça com seu software, abaixo listei alguns exemplos de porque devemos testar os nossos softwares.

Garantir Qualidade: Testes são uma forma sistemática de garantir que o software se comporte como esperado e que atenda aos requisitos especificados.
Identificar Bugs e Defeitos: Os testes ajudam a identificar problemas e falhas no software.
Reduzir custos: Corrigir defeitos após o lançamento do software é muito mais caro e demorado do que corrigi-los durante a fase de testes.
Melhorar a Manutenibilidade: Um conjunto sólido de testes ajuda a criar uma base de código mais robusta e sustentável. À medida que o software evolui, os testes fornecem uma rede de segurança para garantir que as alterações não afetem negativamente as funcionalidades existentes.
Aumentar a Confiança: Ter testes bem sucedidos dá aos desenvolvedores a confiança de que o software está funcionando conforme o esperado.
Suporte à Refatoração: Refatorar o código é uma prática importante para manter a qualidade do software. Testes garantem que as alterações de refatoração não fazem outras partes do software deixarem de funcionar.

O que é o Vitest?

Testes são códigos de programação que vão testar a sua aplicação de forma automatizada, portanto existem várias ferramentas para realizar esses testes, tais como:

Vitest
Jest
React Testing Library
Enzyme
Cypress
Mocha
Etc.

Nesse post nós focaremos em alguns exemplos de como usar o Vitest para testar as suas aplicações.

Vantagens do Vitest:

Fácil Configuração: O Vitest é projetado para ser de fácil integração com projetos ReactJS existentes, permitindo que os desenvolvedores comecem a escrever testes com rapidez.
Testes Abstraídos: Com o Vitest, você pode abstrair a complexidade de lidar diretamente com o DOM e se concentrar em testar a lógica do seu componente, tornando os testes mais limpos e legíveis.
Velocidade de Execução: O Vitest é otimizado para executar testes de forma rápida e eficiente, o que é essencial quando temos muitos testes para executar regularmente.
Integração com Ferramentas de Teste: O Vitest se integra facilmente com outras ferramentas populares de teste, como Jest e React Testing Library, ampliando ainda mais suas capacidades de testes.

Como Configurar o Vitest em um Projeto ReactJS:

1- NPM e Node: Você precisa ter o npm e o node instalado no seu computador.

2- Criar um projeto ReactJS: Para começar, vamos criar um novo projeto com o Create Vite, para isso execute o comando npx create vite

3- Agora vamos instalar o Vitest: Para instalar o vitest no seu projeto, use o comando npm install vitest @testing-library/jest-dom @testing-library/react @testing-library/user-event jsdom -D

4- Na raiz do projeto criaremos agora um arquivo chamado vitest.config.ts e adicionaremos o seguinte conteúdo dentro desse arquivo:

5- Agora, dentro da pasta src, criaremos uma pasta chamada test e dentro dessa pasta colocaremos um arquivo chamado setup.ts, adicionaremos o seguinte conteúdo dentro dela:

6- Agora dentro do arquivo package.json vamos adicionar um script para executar os nossos testes, o script será: “test”:”vitest”

7- Para finalizar as configurações, vamos no arquivo tsconfig.json, dentro de compilerOptions.json colocamos mais uma linha "types": ["vitest/globals"],

8- O arquivo App.tsx contém o seguinte código:

9- Agora vamos criar com o nome App.spec.tsx, lembre-se que esse arquivo deve ficar no mesmo diretório do arquivo App.tsx, e dentro desse arquivo vamos adicionar o seguinte conteúdo:

10- Nesse arquivo de testes temos alguns comandos e características:

Describe: É uma função que descreve um conjunto de testes que serão realizados, o primeiro parâmetro é uma frase descritiva e a segunda é um callback com um conjunto de testes que serão executados.
Test: É o teste propriamente dito. É uma função com o primeiro parâmetro descrevendo o teste que deve ocorrer, o segundo parâmetro é uma função callback que retorna o conteúdo do teste.
Render: Renderiza o component que estamos testando.
Screen: Contém um conjunto de funções para encontrarmos os elementos da DOM.
FindByRole: Uma função usada que busca um elemento baseado em uma regra, no caso do primeiro teste um heading (h1, h2, h3…) com o texto “VITE + REACT”. No segundo teste, busca um botão que tem um texto que atende a uma expressão regular que busca /cout is/.
FindByText: Busca um elemento na DOM baseado no texto entre aspas.
UserEvent: Nos proporciona simular eventos que o usuário faz, tais como: click, type, cut, doubleClick, hover, paste, etc.
Expect: É o que o teste espera receber de valor.
toBeInTheDocument: Verifica se o elemento está na DOM.
toBeTruthy: Verifica se o elemento testado retorna um valor true.

11- Agora vamos até o terminal e executamos o comando npm run test:

12- Caso um teste falhe o retorno será:

Conclusão:

Os testes de software front-end são fundamentais para garantir que nossas aplicações sejam confiáveis, estáveis e com alta qualidade. Ao utilizar o Vitest em conjunto com o ReactJS, você pode melhorar sua estratégia de testes, tornando-a mais eficiente e abrangente. Comece a escrever testes para seus componentes React hoje mesmo e colha os benefícios de um código mais robusto e uma melhor experiência do usuário.

Espero que este post ajude você a entender a importância dos testes front-end e como o Vitest pode ser uma ótima ferramenta para alcançar seus objetivos de teste. Se você tiver alguma dúvida ou quiser compartilhar sua experiência com testes front-end, não hesite em deixar um comentário abaixo. Boa codificação e testes!

Perguntas Frequentes (FAQs)

1. Quais são os benefícios dos testes de UI?

Os testes de UI garantem que a interface do usuário seja intuitiva, responsiva e livre de erros, proporcionando uma experiência positiva aos usuários.

2. Qual é a importância dos testes em diferentes navegadores?

Testar em diferentes navegadores ajuda a identificar discrepâncias de exibição e funcionalidade, garantindo que o front-end funcione corretamente para todos os usuários.

3. Como a automação de testes beneficia o processo de teste de front-end?

A automação de testes agiliza a execução de testes repetitivos, economizando tempo e garantindo uma abordagem consistente para testar o front-end.

4. Que tipos de testes estão incluídos nos testes de front-end?

Os testes de front-end incluem testes unitários, testes de integração e testes de interface do usuário (UI), entre outros.

5. O que é integração contínua e como ela se relaciona com os testes de front-end?

A integração contínua envolve a integração frequente de alterações de código no repositório principal, acompanhada de testes automatizados, incluindo os testes de front-end, para identificar problemas precocemente.