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

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": []
    }
}

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

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';

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"
  ]
}

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"
  ]
}

7. Atualizar o script de test

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

"test": "ng test",

Para utilizar o Jest precisamos trocar para:

"test": "jest",

8. 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"
          ]
        }
      }
    }
  }

9. 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

Resultado

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

Veja os pull requests utilizados neste artigo no meu Github:

• Jest Config
• Fix Warnings