DEV Community

Cover image for Angular com Jest
Bruno Romeiro
Bruno Romeiro

Posted on • Updated on

Angular com Jest

O que é Jest?

É um poderoso Framework de Testes em JavaScript com um foco na simplicidade, que funciona com projetos usando: Babel, TypeScript, Node, React, Angular, Vue e muito mais!

Essa é a descrição oficial do Jest.

Por que tirar uma estrutura nativa e usar o Jest?

A principal resposta seria o aumento de produtividade do engenheiro. Sempre que uma ferramenta X é considerada melhor é importante considerar a sua colocação no projeto.

Alguns dos principais motivos para usar o Jest:

  • Configuração mínima;
  • Snapshots 📸;
  • Testes Isolados maximizando o desempenho;
  • Cobertura criada pelo Istambul;
  • Testes com Watch com diversas configurações

Configurando o Jest no Angular

Vamos iniciar a configuração do Jest no nosso projeto Angular.

1. Desinstalação do Karma

Desinstale o karma e todas suas 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


Enter fullscreen mode Exit fullscreen mode

2. Remover o teste do angular.json

Remova toda a seção de teste do arquivo angular.json, conforme abaixo:



"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.scss"
        ],
        "scripts": []
    }
}


Enter fullscreen mode Exit fullscreen mode

3. Arquivos do Karma

Excluir os arquivos karma.conf.js e src/test.ts

4. Instalação do Jest



npm install jest @types/jest jest-preset-angular --save-dev


Enter fullscreen mode Exit fullscreen mode

5. Arquivo de configuração do Jest

Crie o arquivo setupJest.ts na raiz do seu projeto, e coloque este import dentro dele:



import 'jest-preset-angular';


Enter fullscreen mode Exit fullscreen mode

6. Atualização do tsconfig.spec.ts

Por default o arquivo tsconfig.spec.ts tem a seguinte configuração:



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


Enter fullscreen mode Exit fullscreen mode

Se faz necessário trocar o jasmine por jest e remover o src/test.ts das configurações, já que excluímos ele no item 3 deste, ficando da seguinte forma:



{
  "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

7. Atualizar o script de test

Por padrão, o package.json vem com a seguinte configuração de testes:



"test": "ng test",


Enter fullscreen mode Exit fullscreen mode

Para utilizar o Jest precisamos trocar para:



"test": "jest",

Enter fullscreen mode Exit fullscreen mode



  1. Configuração do Jest

Por fim, só adicionar esse trecho de código no final do seu 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$",
"astTransformers": {
"before": [
"jest-preset-angular/build/InlineFilesTransformer",
"jest-preset-angular/build/StripStylesTransformer"
]
}
}
}
}

Enter fullscreen mode Exit fullscreen mode



  1. Ajuste no arquivo de tsconfig

Com o lançamento da versão 10 do Angular, as configurações do arquivo tsconfig.json foram migradas para tsconfig.base.json e para a utilização do Jest precisamos adicionar a seguinte linha de código dentro do compilerOptions:



"esModuleInterop": true

Enter fullscreen mode Exit fullscreen mode




Resultado

Ao fim de toda a configuração é possível ver o Jest rodando dentro do seu projeto.

run test

Veja os pull requests utilizados neste artigo no meu Github:

Top comments (3)

Collapse
 
juanstclair profile image
Juan St. Clair

Muito bom Bruno, parabéns, eu usavacom AngularJS no passado, acho que vale o teste para os dias atuais tbm. Obrigado.

Collapse
 
jelielaugusto profile image
Jeliel Augusto Mota

Obrigado pelo conteúdo Bruno

Collapse
 
danilovalerio profile image

Conteúdo muito bom, muito obrigado aí pelo compartilhamento do conhecimento.