Angular com Jest

#angular #testing #jest #ptbr

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

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"

          ]

        }

      }

    }

  }

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: