Principais Stacks no mercado para testes unitários em Vue.js

Apesar de algo antigo os testes unitários tem sido enfatizado cada vez mais pelos amantes da programação, ainda há uma certa resistência por parte de alguns desenvolvedores em implementá-los, porque bons testes são difíceis de ser escritos e podem até requerer uma refatoração do código. Por esse motivo esta prática pode parecer contra-produtivo e isso pode minar o objetivo de se desenvolver um bom programa de testes em seus projetos. Pensando nisso vamos desenvolver uma série de dois artigos voltados a testes unitários para Vue.js. Neste primeiro vamos passar por conceitos gerais e no segundo lançaremos alguns testes, discutindo a idéia geral por trás deles. Nosso objetivo não é exaurir o tema, o que seria muito impossível, mas gerar interesse e engajamento nesse tema. Ao término você será capaz de criar seus testes e saberá um caminho para trilhar.

Em termos de desenvolvimento ágil de software existem duas abordagem, o desenvolvimento orientado a testes e o desenvolvimento orientado ao comportamento. 

O desenvolvimento orientado a testes busca criar testes antes de escrever o código, assim os testes inicialmente devem falhar para que o programador reescreva o código até que o teste passe. Esse ciclo é conhecido como Red-Green-Refactor. A validação do código nesse caso ficaria para os testes, o que gerou uma crítica e promoveu o surgimento do desenvolvimento orientado ao comportamento do usuário. Nessa abordagem busca-se validar através do comportamento do usuário.

A grande vantagem não é simplesmente o desenvolvimento de testes, mas o fato de forçar o programador a pensar em design, regras de negócio e qualidade de código antes de sair escrevendo. Ainda se tem a garantia de que qualquer alteração no código não vá quebrar o código já escrito.

Escolha abordagem mais apropriada

Definida a abordagem utilizada no desenvolvimento deve-se buscar misturar testes unitários, de integração e de interface de usuário. Neste pool de testes a grande maioria será unitário, que são testes voltados para pequenas porções de código. Teste de integração devem ser o segundo mais comum e de interface de usuário os menos comuns. Isso acontece devido ao custo associado a cada tipo de testes. Testes unitários são baratos e rápido de se executar enquanto testes de interface de usuário são caros e lentos.

Todos estes princípios também são válidos quando falamos de frameworks, como Vue.js, React, Angular, entre outros. É totalmente possível testar componentes de forma unitária, integrada ou diretamente na interface. Nesse artigo focaremos especificamente no framework do Vue.js.

O Vue.js possui uma biblioteca padrão de testes, o Vue Test Utils. Com ele é possível escolher o suas bibliotecas de test runner, assertion e doubles. De forma breve, um test runner é o que vai ler seus arquivos de teste e executá-los. Bibliotecas de assertion são responsáveis por criar estados específicos para seus testes e doubles são usados quando precisamos substituir uma parte/objeto do software em produção por outro, estas partes muitas vezes são coisas de terceiros, como módulos, e a responsabilidade de testá-los não é nossa.

Há alguns conceitos que devemos saber antes de iniciar no mundo de testes, vamos a eles antes de escrever o código propriamente dito de forma simples e dinâmica, citando exemplos nos diversos frameworks.

Conceitos principais

Runners

Test runners são bibliotecas que pegarão seus testes, de acordo com a configuração definida por você, e os executaram. A saída (relatório) dos testes também é sua responsabilidade. São exemplos de Test Runners: Jest, Karma, Mocha, ADA, Cypress, entre outros.

Assertion

Bibliotecas de assertion são responsáveis por verificar se os estados criados pelos seus testes estão de acordo com o esperado. Um exemplo clássico de biblioteca de assertion em JavasScript é o ChaiJs, ele oferece as funções expect, should e assert. O NodeJs também possui um assert nativo.

Os dublês – test fakes, spies, stubs e mocks

Fakes e spies são funções que recebem argumentos, retornam valores, this e lançam exceções. Fakes tem implementações reais diferentes do código em produção, spies chamam as implementações reais que estão em produção. Stubs são funções (spies) com um comportamento pré-programado. Mocks são métodos falsos com comportamentos e retornos pré-programados.

Frameworks/Test Runners

Nessa seção passaremos pelos principais test runners, bibliotecas de assertion e doubles. Para tanto considere o seguinte componente como exemplo.

Jasmine [https://jasmine.github.io/]

Segundo a documentação Jasmine é um framework de desenvolvimento orientado ao comportamento para testes em Javascript (BDD). Vem com tudo que é necessário para testes, não requerendo nenhum pacote adicional.

AVA [https://github.com/avajs/ava]

AVA é um test runner para Node JS com uma API concisa, com intuito de se ter uma curva de aprendizagem pequena, e saída de erros detalhada. Tem uma proposta interessante, pois nasceu com a ideia de rodar testes de forma concorrente. Abraça novas features da linguagem e isolamento de processo.

Mocha JS [https://mochajs.org/]

Mocha é um framework de testes rico de Node.js e browser, fazendo testes assíncronos simples e divertidos. É um dos mais famosos e usados atualmente. Tem suporte para a instalação para bibliotecas de assertions, como o chai, expect, should, entre outros e também para doubles, como sinon.js. Na prática o mocha é algo pequeno que será personalizado de acordo com o usuário com outras bibliotecas.

JEST [https://jestjs.io/]

JEST se destaca por ser completo, vem com tudo necessário para testar. A suíte conta com uma incrível facilidade de mocar dados, funções ou módulos inteiros. É rápido e um dos mais usados atualmente no desenvolvimento das aplicações.

Conclusão

Vimos brevemente que é há um grande ecossistema e diversas possibilidades para testes unitários utilizando Vue.js, que trata a questão de forma flexível e nos deixa escolher um framework de teste do nosso gosto. Nos próximos artigos vamos demonstrar com alguns testes como aplicar cada ferramenta.