DEV Community

Cover image for Instalando Jest no Angular(20)
Gustavo Machado
Gustavo Machado

Posted on

Instalando Jest no Angular(20)

#development #angular #unittest #frontend

O que é o Jest e para que serve?

O Jest é um framework de testes em JavaScript criado pelo Facebook, amplamente utilizado em projetos com React, mas que também pode ser facilmente integrado a aplicações Angular, Node.js, Vue, entre outras.

Sua principal função é permitir a criação, execução e validação de testes automatizados, especialmente os testes unitários e testes de snapshot, de forma rápida e confiável.

Site oficial:

https://jestjs.io

Passos para configuração do Jest no Angular:

  1. Desinstalar o Karma e Jasmine do projeto;
  2. Configure scripts de execução de testes no package.json;
  3. Remover o objeto de teste do angular.json;
  4. Instalar o pacote do Jest;
  5. Configurar o jest no projeto;
  6. Criar/configurar arquivo setup.jest.ts;
  7. Atualizar o arquivo tsconfig.spec.json;
  8. Ative o esModuleInterop;
  9. Execute o jest/testes unitários.

1. Desinstalar o Karma e Jasmine do projeto:

Primeiro devemos desinstalar o Karma e Jasmine do projeto. O Karma e Jasmine são ferramentas de testes que já vem configurados inicialmente nos projetos angular, sendo o Jasmine um framework e o Karma um "Test Runner".

Execute o seguinte comando no terminal:

npm remove @types/jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
Enter fullscreen mode Exit fullscreen mode

2. Configure scripts de execução de testes no package.json:

Agora devemos configurar o package.json para reconhecer e executar comandos básicos e essenciais de teste do Jest.

Copie e cole os seguintes scripts no package.json:

"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
Enter fullscreen mode Exit fullscreen mode

3. Remover o objeto de teste do angular.json:

Neste passo, vamos remover o objeto de teste do angular.json, cujo o mesmo faz parte da configuração do Karma e Jasmine, do qual foram removidos.

Remova as seguintes linhas em vermelho:

4. Instalar o pacote do Jest:

Finalmente instalaremos a dependência do Jest no projeto.

Execute o seguinte comando no terminal:

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

5. Configurar o jest no projeto:

Agora vamos configurar o jest no Angular, seja através do arquivo jest.config.js ou dentro do package.json.

jest.config.js:

Copie e cole dentro do arquivo:

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/src/setup.jest.ts'],
};
Enter fullscreen mode Exit fullscreen mode

OU

Dentro do package.json:

Copie e cole dentro do arquivo:

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

6. Criar/configurar arquivo setup.jest.ts:

Após configurar o jest, vamos criar um arquivo typescript para importar o modulo do jest no mesmo.
Primeiramente crie um arquivo chamado setup.jest.ts dentro da pasta src.

Copie e cole dentro do arquivo:

import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';

setupZoneTestEnv();
Enter fullscreen mode Exit fullscreen mode

7. Atualizar o arquivo tsconfig.spec.json:

No passo 7, vamos ter que configurar o arquivo tsconfig.spec.json para o jest e referenciar o setup.jest.ts que acabamos de criar.

Faça as seguintes alterações dentro do arquivo:

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

8. Ative o esModuleInterop:

Caso você não ativar o esModuleInterop, provavelmente aparecerá um aviso no terminal ao rodar os testes, contudo é importante para evitar erros de importação.

Abra o seu tsconfig.json e adicione ou modifique esta configuração:

{
  "compilerOptions": {
    "esModuleInterop": true,
  }
}
Enter fullscreen mode Exit fullscreen mode

9. Execute o jest/testes unitários:

Agora vamos executar os testes unitários através do jest e verificar se está tudo ok.

Execute no terminal:

npm run test
Enter fullscreen mode Exit fullscreen mode

Desde já agradeço a todos e espero que tenham gostado!

Att.
Gustavo Machado Pontes

linktr linkedin github instagram twitter

Top comments (1)

Collapse
 
devgustavus profile image
Gustavo Machado •

Caso encontrem alguma inconsistência nas informações, por favor, comentem ou me mandem mensagem!
Desde já agradeço a todos.