Angular v17 ＆ Jest & Angular Testing Library セットアップ覚書

Angular v17の新規プロジェクトに Jest と Angular Testing Library をセットアップする覚書です。

パッケージのバージョン

watchモードが使いたいので、ビルダーに @angular-builders/jest を使います。

• @angular/core 17.3
• jest 29.7
• @testing-library/angular 16.0
• @angular-builders/jest 17.3

パッケージのアンインストール & インストール

Karma 関連のパッケージを削除します。

npm remove karma\
  karma-chrome-launcher\
  karma-coverage-istanbul-reporter\
  karma-jasmine\
  karma-jasmine-html-reporter

Jest と Angular Testing Library 関連のパッケージをインストールします。

npm i -D jest \
  @types/jest\
  @angular-builders/jest\
  @testing-library/jest-dom\
  @testing-library/angular

ユニットテストの設定

Angular の設定を変更します。

angular.json

"architect": {
  "test": {
    "builder": "@angular-builders/jest:run",
    "options": {
      "polyfills": [
        "zone.js",
        "zone.js/testing"
      ],
      "tsConfig": "tsconfig.spec.json",
      "configPath": "jest.config.ts"
    }
  }
}

tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest",
      "@testing-library/jest-dom"
    ]
  },
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

Jest の設定ファイルを新規に作成します。

{PROJECT_ROOT}/jest.config.ts

import type { Config } from 'jest';

const esmPackages = ['@angular/*', '@testing-library/angular'];

const config: Config = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  moduleDirectories: ['node_modules', '<rootDir>'],
  transformIgnorePatterns: [`node_modules/(?!(${esmPackages.join('|')})/)`],
};

export default config;

{PROJECT_ROOT}/jest.setup.ts

import '@testing-library/jest-dom';
import 'jest-preset-angular/setup-jest';

最初のテスト

試しにコンポーネントを新規作成してテストしてみます。

test1.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-foo',
  standalone: true,
  template: `
    <input title="foo" />
    <button>bar</button>
  `,
})
export class Test1Component {}

test1.component.spec.ts

import { render, screen } from '@testing-library/angular';
import { Test1Component } from './test1.component';

describe('Test1Component', () => {
  it('test', async () => {
    await render(Test1Component);

    expect(screen.getByTitle('foo')).toBeInTheDocument();
    expect(screen.getByRole('button')).toBeInTheDocument();
  });
});

ng test --watch

 PASS  src/app/test1.component.spec.ts
  Test1Component
    ✓ test (113 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.386 s
Ran all test suites related to changed files.

Watch Usage
 › Press a to run all tests.

テストが通りました！

利用パッケージもそれほど多くなく、かんたんにセットアップできますね。