Vue Snapshot Testing com Jest

Certo dia fui iniciar um novo projeto utilizando a framework Vuetifyjs e me deparei com uma nova possibilidade para realizar meus testes unitários do front-end. Essa nova solução se chama Jest e fiquei impressionado ao descobrir que ela é desenvolvida pelo Facebook.

Pesquisando mais a fundo sobre suas funcionalidades, uma delas em especial me chamou a atenção: Snapshot Testing.

Essa funcionalidade gera uma espécie de cópia do html (snapshot) na primeira vez em que o teste é executado. Esse snapshot é usado como referência na comparação com o resultado das execuções posteriores, garantindo nenhuma alteração acidental.

Fiquei me perguntando se era possível usar esse recurso para testar meus componentes Vue, pois na documentação do Jest o exemplo usa React.

Para o experimento criei um novo projeto usando o seguinte template:

vue init vuetifyjs/webpack

Quando solicitado, respondi que desejava adicionar testes unitários no projeto e escolhi a opção “jest” como test runner.

Em seguida editei meu componente HelloWorld.vue da seguinte forma:

Componente HelloWorld.vue

E meu arquivo de teste da seguinte forma:

Arquivo HelloWorld.spec.js

Rodei os testes com o comando npm run unit, o resultado foi o seguinte:

Na primeira vez que o teste é executado ele irá gerar um arquivo de snapshot dentro das pastas do projeto.

Localização do arquivo de snapshot dentro do projeto

conteudo do arquivo de snapshot

Quando executar novamente o teste, ele irá comparar com o arquivo de snapshot e ver se alguma coisa mudou.

segunda execução do teste

Agora irei modificar meu componente Vue e ver o que acontece.

terceira execução do teste

Como esperado o teste falhou, e foi exibido exatamente a diferença em relação ao snapshot gerado anteriormente. Nesse caso, foi uma alteração proposital, portanto eu devo atualizar meu snapshot.

Para atualizar o snapshot adicionei no meu package.json um novo comando:

nova linha no arquivo package.json

Rodando o comando npm run update-snapshot:

snapshot atualizado com sucesso

Conclusão

O Snapshot Test parece ser bem útil para testar um componente por completo, ao invés de fazer várias asserções, apenas comparar com o snapshot talvez seja suficiente em cenários em que toda execução deve gerar os mesmo resultados.

Talvez tenhamos problemas quando o componente tiver um valor dinâmico, como um relógio, pois o valor gravado no snapshot dificilmente serão os mesmos no momento da execução do teste, mas essa história fica para outro dia.