DEV Community

Cover image for Configurando Jest no seu projeto com Angular
Lucas Oliveira
Lucas Oliveira

Posted on

Configurando Jest no seu projeto com Angular

#jest #angular #testing #javascript

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)

Top comments (0)

Read next

zanepearton profile image

Rust + WASI: Application Monitoring

Zane -

techelopment profile image

The Importance of Testing and the Impact of a Bug in Production

Techelopment -

willowjr profile image

What I’ve Learned from Building a Calculator with Vue.js

William Kwadwo Owusu -

skylerdev profile image

How I Created a Hover Reveal Text Animation with TailwindCSS and React

Skyler Dev -