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.