Testando com Karma e Jasmine

Embora Vitest seja o test runner padrão para novos projetos Angular, Karma ainda é um test runner suportado e amplamente usado. Este guia fornece instruções para testar sua aplicação Angular usando o test runner Karma com o framework de teste Jasmine.

Configurando Karma e Jasmine

Você pode configurar Karma e Jasmine para um novo projeto ou adicioná-lo a um existente.

Para Novos Projetos

Para criar um novo projeto com Karma e Jasmine pré-configurados, execute o comando ng new com a opção --test-runner=karma:

ng new my-karma-app --test-runner=karma

Para Projetos Existentes

Para adicionar Karma e Jasmine a um projeto existente, siga estes passos:

1. Instale os pacotes necessários:

   pnpm

   pnpm add -D karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine

   npm

   npm install --save-dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine

   yarn

   yarn add --dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine

2. Configure o test runner em angular.json:

   No seu arquivo angular.json, encontre o target test e defina a opção runner como karma:

   {  // ...  "projects": {    "your-project-name": {      // ...      "architect": {        "test": {          "builder": "@angular/build:unit-test",          "options": {            "runner": "karma",            // ... other options          }        }      }    }  }}

3. Atualize tsconfig.spec.json para tipos Jasmine:

   Para garantir que o TypeScript reconheça funções de teste globais como describe e it, adicione "jasmine" ao array types em seu tsconfig.spec.json:

   {  // ...  "compilerOptions": {    // ...    "types": [      "jasmine"    ]  },  // ...}

Executando Testes

Depois que seu projeto estiver configurado, execute os testes usando o comando ng test:

ng test

O comando ng test builda a aplicação no modo watch e lança o test runner Karma.

A saída do console parece com o seguinte:

02 11 2022 09:08:28.605:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/02 11 2022 09:08:28.607:INFO [launcher]: Launching browsers Chrome with concurrency unlimited02 11 2022 09:08:28.620:INFO [launcher]: Starting browser Chrome02 11 2022 09:08:31.312:INFO [Chrome]: Connected on socket -LaEYvD2R7MdcS0-AAAB with id 31534482Chrome: Executed 3 of 3 SUCCESS (0.193 secs / 0.172 secs)TOTAL: 3 SUCCESS

A saída do teste é exibida no browser usando Karma Jasmine HTML Reporter.

Clique em uma linha de teste para executar novamente apenas aquele teste ou clique em uma descrição para executar novamente os testes no grupo de teste selecionado ("test suite").

Enquanto isso, o comando ng test está observando mudanças. Para ver isso em ação, faça uma pequena alteração em um arquivo fonte e salve. Os testes executam novamente, o browser atualiza, e os novos resultados do teste aparecem.

Configuração

O Angular CLI cuida da configuração do Jasmine e Karma para você. Ele constrói a configuração completa na memória, baseada em opções especificadas no arquivo angular.json.

Personalizando Configuração do Karma

Se você quiser personalizar o Karma, pode criar um karma.conf.js executando o seguinte comando:

ng generate config karma

Definindo o Test Runner em angular.json

Para definir explicitamente o Karma como test runner para seu projeto, localize o target test em seu arquivo angular.json e defina a opção runner como karma:

{  // ...  "projects": {    "your-project-name": {      // ...      "architect": {        "test": {          "builder": "@angular/build:unit-test",          "options": {            "runner": "karma",            // ... other options          }        }      }    }  }}

Aplicação de cobertura de código

Para aplicar um nível mínimo de cobertura de código, você pode usar a propriedade check na seção coverageReporter do seu arquivo karma.conf.js.

Por exemplo, para requerer um mínimo de 80% de cobertura:

coverageReporter: {  dir: require('path').join(__dirname, './coverage/<project-name>'),  subdir: '.',  reporters: [    { type: 'html' },    { type: 'text-summary' }  ],  check: {    global: {      statements: 80,      branches: 80,      functions: 80,      lines: 80    }  }}

Isso fará com que a execução do teste falhe se os limites de cobertura especificados não forem atingidos.

Testando em integração contínua

Para executar seus testes Karma em um ambiente CI, use o seguinte comando:

ng test --no-watch --no-progress --browsers=ChromeHeadless