UI testes com puppeteer e jest.

Crie seus testes caixa preta, de forma simples com puppeteer e jest.

Introdução

Nesse artigo, iremos integrar o puppeteer, uma lib da google para headless browser, com o jest, um framework de testes do facebook para automatizar testes.

A grosso modo, com o puppeteer, conseguimos simular um usuário comum, navegando em um site.
Com isso, podemos realizar web scraping, web crawling, tirar screenshot e até mesmo automatizar testes.

Simulando um usuário navegando no site, podemos testar se nossa aplicação, independente das linguagens e tecnologias utilizada, se comporta da forma que esperamos.

Como exemplo, utilizaremos um React App, com um formulário e 2 campos que retornam a soma desses valores.

Formulário de exemplo

Neste post, não irei abordar como funciona o puppteer, react, testes automatizados nem nada disso.
Iremos apenas entender, como podemos integrar essas ferramentas, para automatizar nossos testes.

Para uma documentação mais completa de como você pode configurar o puppeteer em seu projeto, acesse:
https://github.com/smooth-code/jest-puppeteer
Puppteer api:
https://pptr.dev/#?product=Puppeteer&version=v1.19.0&show=outline
Documentação do jest:
https://jestjs.io/docs/en/getting-started

Configurando e executando nossos testes

Após criar seu React App, precisamos instalar as dependencias:

yarn add — dev jest-puppeteer puppeteer jest

Em nosso arquivo de configuração do jest, iremos adicionar o preset do puppeteer:

preset: "jest-puppeteer",

Para rodar o jest, podemos ainda, instalar globalmente em nossa maquina:

npm install jest --global

Iremos testar o seguinte component react:

Para testar esse componente, foi criado o arquivo test.js dentro da pasta __tests__ o seguinte arquivo:

Agora, basta rodar o comando “jest”, no nosso terminal e ver a mágica acontecer.

Teste com sucesso!

Caso alguém, altere nosso código, gerando algum bug, rodando o jest, podemos ver o que quebrou.
Por exemplo, vamos alterar o “handleSubmit”, para multiplicar nossos valores:

this.setState({ value: parseInt(this.state.firstValue) * parseInt(this.state.secondValue) });

O resultado seria:

Teste com falha =/

Sabemos assim, que o resultado esperado, era 3 e recebemos 2.

Melhorando os testes.

Para utilizar os testes no nosso dia à dia, devemos remover o slowMo e setar o headless para true.
Com o headless setado, não iremos mais abrir o chromium.
Sem o slowMo, as ações acontecem sem a pausa, a pausa ajuda a ver melhor as ações mas após escrito os testes, não tem utilidade

Desta forma o resultado seria:

Reduzimos o tempo do teste de 7.6 segundos para 2.6 segundos.

Conclusão

Podemos de forma simples testar qualquer aplicação web, simulando diferentes dispositivos, breakpoints, e etec.

Duvidas e sugestões, deixem nos comentários.