TheLazy.Dev
Portfolio GitHub

Blog

jest |angular |testing |javascript

Configurando Jest no seu projeto com Angular

lucasdevoliveira

Lucas Oliveira

Posted on August 18, 2020

Configurando Jest no seu projeto com Angular

Eu estou criando este artigo pois ao começar meus estudos no mundo dos testes, me deparei com o seguinte problema, vou utilizar Angular para criar uma aplicação e por padrão ele utiliza Karma e Jasmine, porém não vou utilizar estes caras para testar e sim o tal do Jest.

Não vou falar sobre quem é melhor ou pior(até por que eu nem sei), mas o fato é que eu preciso do Jest configurado no meu projeto para iniciar meus testes com teste(HAHAHAHAHA).

Porém dei uma olhada no State Of JS e o nível de interesse e satisfação a respeito do Jest se encontra assim:

State of js test

Caso queira saber mais é só entrar neste link: State of js

🔥 Introdução

Para configurar o Jest em seu projeto com Angular(e até mesmo rodar o projeto), vamos precisar dos seguintes programas instalados:

  • npm
  • node
  • npx

npm: Gerenciador de pacotes para a linguagem de programação JavaScript;

node: Trata-se de um software open-source, cross-platform e runtime para JavaScript;

npx: Package runner que permite executar código criado com Node.js e publicado por meio do registro NPM;

💊 Cenário do projeto

Primeiro vamos entender o cenário do seu projeto, possivelmente você deve estar usando Karma e Jasmine e quer mudar para o Jest, caso seja isto continue a leitura do artigo.

Se você criou sua aplicação Angular utilizando o parâmetro --minimal=true, clique aqui para pular algumas etapas desnecessárias.

🚀 Iniciando

Então vamos separar este artigo em diversas parte:

✔️ Removendo o Karma e o Jasmine do seu projeto;
✔️ Adicionando as dependências do Jest
✔️ Configurando o Jest no projeto
✔️ BÔNUS: Configurando o Jest no comando ng do Angular

💣 Removendo Karma e Jasmine do seu projeto

Como não vamos mais utilizar algumas dependências, precisamos remover toda configuração e arquivos que se encontra no projeto que é desnecessário.

📌 Removendo as dependências 

npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter protractor
Enter fullscreen mode Exit fullscreen mode

Ao rodar o comando acima você vai remover Karma e Jasmine das devDependencies do package.json

📌 Removendo arquivos e pastas

Os arquivos karma.conf.js, test.ts e a pasta e2e não são mais necessários, podemos deletar os três.

Karma.conf.js se encontra na raiz da aplicação:

./karma.conf.js
Enter fullscreen mode Exit fullscreen mode

test.ts se encontra dentro da pasta src que está na raiz da aplicação:

./src/test.ts
Enter fullscreen mode Exit fullscreen mode

A pasta e2e se encontra na raiz do projeto:

./e2e
Enter fullscreen mode Exit fullscreen mode

O arquivo tsconfig.spec.json vai ser necessário, então vamos apenas apagar o seu conteúdo.

📌 Removendo o comando test e e2e no arquivo angular.json 

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "src/test.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.spec.json",
    "karmaConfig": "karma.conf.js",
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles.css"
    ],
    "scripts": []
  }
}
"e2e": {
  "builder": "@angular-devkit/build-angular:protractor",
  "options": {
    "protractorConfig": "e2e/protractor.conf.js",
    "devServerTarget": "project-with-test:serve"
  },
  "configurations": {
    "production": {
      "devServerTarget": "project-with-test:serve:production"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Os caras acima são responsáveis por fazer funcionar o comando:

ng test
Enter fullscreen mode Exit fullscreen mode

e

ng e2e
Enter fullscreen mode Exit fullscreen mode

Pelo que eu vi(mas posso estar errado) uma prática normal é criar no package.json um script novo para rodar o Jest, exemplo:

"test": "jest --passWithNoTests",
"test:watch": "jest --watch --passWithNoTests",
"test:watchAll": "jest --watchAll --passWithNoTests",
Enter fullscreen mode Exit fullscreen mode

Porém vamos configurar o Jest no angular.json para suportar o uso do comando ng:

"test": "ng test --passWithNoTests",
"test:watch": "ng test --watch --passWithNoTests",
"test:watchAll": "ng test --watchAll --passWithNoTests",
Enter fullscreen mode Exit fullscreen mode

Mas não agora, vamos deixar isto por ultimo e usar o comando:

npx jest
Enter fullscreen mode Exit fullscreen mode

deixando o comando do jeito que ele veio:

"test": "ng test",
Enter fullscreen mode Exit fullscreen mode

Ele não irá funcionar, provavelmente dando o seguinte erro:

An unhandled exception occurred: No projects support the 'test' target.
Enter fullscreen mode Exit fullscreen mode

Pois você removeu a configuração no angular.json.

Legal, se você vem de um projeto com Karma e Jasmine configurado, agora não tem mais nada de teste no seu projeto e se iguala a um projeto criado com o argumento --minimal=true

Exemplo:

ng new project-without-test-and-more --minimal=true
Enter fullscreen mode Exit fullscreen mode

🐸 Adicionando as dependências do Jest

Com o comando abaixo instalaremos as dependências para o Jest funcionar:

npm install --save-dev jest @types/jest jest-preset-angular
Enter fullscreen mode Exit fullscreen mode
  • jest
  • @types/jest
  • jest-preset-angular

jest: Framework de testes em JavaScript com um foco na simplicidade;

@types/jest: Tipos do Jest para o TypeScript poder funcionar corretamente;

jest-preset-angular: Predefinições para o Jest;

Após as dependências do Jest instaladas vamos iniciar a configuração no projeto.

👻 Configurando o Jest no projeto

📌 Criando o arquivo setupJest.ts

Crie o arquivo na raiz do seu projeto chamado setupJest.ts e importe o modulo jest-preset-angular, vai ficar assim o arquivo:

import 'jest-preset-angular';
Enter fullscreen mode Exit fullscreen mode

📌 Configurando tsconfig.spec.json

Altere o arquivo tsconfig.spec.json, caso não tenha, crie ele na raiz do seu projeto.

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest",
      "node"
    ]
  },
  "files": [
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}
Enter fullscreen mode Exit fullscreen mode

📌 Configurando package.json

Adicione o código abaixo dentro do arquivo package.json:

"jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setupJest.ts"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/dist/",
      "<rootDir>/src/test.ts"
    ],
    "globals": {
      "ts-jest": {
        "tsConfig": "<rootDir>/tsconfig.spec.json",
        "stringifyContentPathRegex": "\\.html$"
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode

OK, Jest configurado agora é só rodar o seguinte comando para ver a magia acontecer:

npx jest
Enter fullscreen mode Exit fullscreen mode

🏃 Configurando o Jest no comando ng do Angular

Agora vamos adicionar a execução do Jest junto ao comando:

npm run test
Enter fullscreen mode Exit fullscreen mode

Para isso precisamos instalar a dependência:

npm install --save-dev @angular-builders/jest
Enter fullscreen mode Exit fullscreen mode

e configurar o arquivo angular.json adicionando o seguinte código:

"test": {
  "builder": "@angular-builders/jest:run"
}
Enter fullscreen mode Exit fullscreen mode

Com isso agora é só rodar o comando:

npm run test
Enter fullscreen mode Exit fullscreen mode

e sua aplicação está apta a rodar o Jest utilizando o Angular.

🍦 exemplo

Caso queira ver na prática, segue o projeto com a remoção do Karma e Jasmine e a adição e configuração do Jest.

GitHub logo lucasdevoliveira / configurando-jest-no-angular

🍕 Exemplo de uma aplicação com o Jest configurado.

Configurando Jest no Angular

Projeto criado para explicar como se remove o Karma e Jasmine e adiciona e configura o Jest.

Caso queria ver o artigo acesse:

View on GitHub

🐧 Criticas e Sugestões

Caso eu não tenha abordado algum problema deixa nos comentários que eu vou estudar e adicionar no artigo(ou não)

💖 💪 🙅 🚩
lucasdevoliveira
Lucas Oliveira

Posted on August 18, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Configurando Jest no seu projeto com Angular
jest Configurando Jest no seu projeto com Angular

August 18, 2020

A Guide for every UI developer with an aversion to Unit Tests.
jest A Guide for every UI developer with an aversion to Unit Tests.

October 23, 2019