Jest ama JavaScript, não importa o seu framework!

Jest: Angular, React, Express… é para todo mundo!

No meu último post sobre Jest, o leitor Rodrigo Régis me perguntou:

E, parando para pensar, isso me encucou o final de semana inteiro, me fazendo pensar e repensar:

  • Acho que eu não entendi?
  • Será que eu não expliquei direito?
  • Nem eu sei testar Angular.js direito, agora fiquei confuso, o que ta faltando?

Podendo ser a dúvida de outros leitores e, até para esclarecer as etapas necessárias envolvendo testes em JavaScript, resolvi escrever esse post.

Afinal, como diz a próprio introdução no site:

Jest é um framework para testar código JavaScript, usado pelo Facebook para testar todo o código JavaScript incluindo aplicações React.

É para testar JavaScript, independente de qualquer framework

É exatamente isso que você leu, afinal, ele é um framework de teste para código JavaScript e não para o framework X.

Concordo que, por ter nascido dentro do Facebook, ser mais conhecido dentro do ecossistema React e, ser apenas citado por pessoas que trabalham com React (não em todo caso, não vamos generalizar gente). É automático a assimilação e pensamentos como "ah, só funciona com React".

E o melhor de tudo é, não, não funciona só com React, é para qualquer aplicação JavaScript.

E falando em JavaScript, ele não roda só no browser mais, certo? Então podemos fazer uma lista como:

  • Jest funciona com Angular.js
  • Jest funciona com Backbone
  • Jest funciona com React, React Native, Preact, Inferno
  • Jest funciona com Express, Koa, Hapi
  • Jest funciona com MongoDB, GraphQL
  • É front-end
  • É back-end
  • É nativo
  • Jest ❤️ JavaScript

E, para deixar mais claro, o quão independente a ferramenta é, Christoph Pojer, criador do Jest, compartilhou sua opinião em uma discussão no Github do Enzyme, que vale a pena ser lido.

Não é Jest x Karma x Mundo, são todos ajudando a melhorar as ferramentas em torno do ecossistema do JavaScript. E isso é muito bom, para todos!

Aliás, não faz muito tempo, mas o Frieden Ziegelmayer, abriu um Call for Contributors no repositório do Karma.

Ou seja, todos querem melhorar!


O que eu preciso para testar meu código JavaScript?

Precisamos listar os pontos necessários para testar nosso código. Quais são as ferramentas que eu preciso para testar minha aplicação JavaScript?

Podemos responder com a seguinte lista:

  1. Os arquivos que irão ser testados, o código fonte e o código de teste, ex: Lista.js e Lista.test.js
  2. O ambiente de execução, podendo ser Node.js, um “simulador” de DOM como o JSDOM, um navegador sem a parte gráfica (headless browser) como PhantomJS, ou um navegador real, como o Firefox.
  3. Uma biblioteca de asserções/declarações (aquela responsável pela sintaxe de como escrever o código describe/it/test etc), ex: should.js, expect.js, chai, better-assert etc
  4. Um test runner para rodar seus arquivos de testes no ambiente selecionado. Essa é a ferramenta responsável por executar todos seus arquivos no ambiente que você selecionou. ex: Karma, AVA, Jest, Mocha, Jasmine etc [1]

[1] Para tentar evitar confusão nessa parte, apesar de Mocha/Jasmine também serem consideradas bibliotecas de asserções/declarações (a maneira que você escreve o teste). Elas também possuem a possibilidade de rodarem seu teste, ou seja, realizarem o papel do test runner. Apesar de possível, requer uma configuração manual, um arquivo HTML separado, incluindo manualmente todos os arquivos de testes e por aí vai, você pode dar uma olhada no exemplo do site do Mocha, no final, fica mais fácil delegar esse papel para "test runners de verdade", ou em outras palavras, que forneçam uma integração mais dinâmica e simples.


Então, o que o Jest resolve de verdade

O que ele realmente resolve, sem precisar de configurações malucas:

  • A instalação mais simples de hoje em dia, yarn add jest, e você já pode escrever seus arquivos de teste, não precisa de mais nada
  • Configurado de fábrica para buscar arquivos .test.js e a pasta __tests__
  • Configurado de fábrica com ambiente para simular o DOM, utilizando o jsdom (você pode alterar, usando a flag --env=<ambiente>)
  • Configurado de fábrica para coletar cobertura de teste de código utilizando a flag --coverage, que usa Istanbul.
  • A melhor experiência com task runner, é divertido rodar testes no terminal!
  • Uma documentação impecável.

Esses foram alguns dos pontos que expliquei no meu primeiro post.

Confere lá se você ainda não leu.


Tá, e a pergunta do leitor, como testar uma aplicação Angular.js com Jest?

Certo, foi isso que deu razão a esse post, e, novamente, Jest nos mostra como é simples configurá-lo dentro de uma app Angular.js.

Tomei a liberdade e converti o projeto angular-seed para usar Jest:

E também criei um projeto Angular.js usando Jest:


E como faço para testar com framework X?

Sem dúvida cada aplicação tem sua configuração específica, e chega ser complicado listar e criar exemplo para todos.

No próprio repositório do Jest, existe alguns exemplos bem práticos:

E ótimos exemplos da galera da Entria, extraído do Github do Sibelius Seraphini

E hoje em dia temos ótimos exemplos com (a maioria em inglês):


Mas eu uso X, e não está listado aqui!!1

Não se preocupe! O que você fazer para melhorar isso é participar da discussão na documentação do Jest.

Compartilhe sua experiência implementando Jest na sua aplicação.

Compartilhe seus problemas, suas dúvidas o que você descobriu.

Compartilhe!

Como dizia a maior conferência de JavaScript do mundo…

Unidos crescemos — BrazilJS

Só assim podemos melhorar as ferramentas que usamos!