AngularにJestを導入する

環境

Angular 19
node.js 22

はじめに

AngularのテストはKarmaでしたが、非推奨になりWeb Test Runner, Vitest, and Jestが推奨されています。ロードマップにもそれらしきことが書いてありました。

なのでversion19からはすんなりJestなりVitestなりを簡単に導入できるのかと思っていたら、普通にKarmaが入っていました。なのでKarmaから何からしらのテストフレームワークに移行する際には自分でやらなければいけないようです。

ちなみに今回はJestを導入する手順を備忘録として残しておきます。

Karmaの削除

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

npm uninstall jasmine-core \
  @types/jasmine \
  karma \
  karma-chrome-launcher \
  karma-coverage \
  karma-jasmine \
  karma-jasmine-html-reporter

Jestのインストール

Jestと関連するパッケージをインストールします。

npm install --save-dev \
  jest \
  @types/jest \
  ts-jest \
  jest-environment-jsdom

angular.jsonの修正

angular.jsonのテスト設定を@angular-devkit/build-angular:jestに変更します。

"test": {
  "builder": "@angular-devkit/build-angular:jest",
    "options": {
      "polyfills": [
        "zone.js",
        "zone.js/testing"
       ],
      "tsConfig": "tsconfig.spec.json"
    }
}

tsconfig.spec.jsonの修正

デフォルトはcompilerOptionsのtypesがjasmineの設定になっているので、Jestに変更します。

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

tsconfig.jsonも修正します。

# tsconfig.json
"compilerOptions": {
	"outDir": "./dist/out-tsc",
	"strict": true,
	"noImplicitOverride": true,
	"noPropertyAccessFromIndexSignature": true,
	"noImplicitReturns": true,
	"noFallthroughCasesInSwitch": true,
	"skipLibCheck": true,
	"isolatedModules": true,
	"esModuleInterop": true,
	"experimentalDecorators": true,
	"moduleResolution": "bundler",
	"importHelpers": true,
	"target": "ES2022",
	"module": "ES2022",
	"types": ["./worker-configuration.d.ts", "node", "jest"]
},

実行

一通りの設定は終わったので、ひとまずテストを実行します。

npx ng test

テストが実行され、Jestの結果が表示されます。ちょっとエラーが出てますが、Jestの導入は成功ですね。

Test Suites: 1 failed, 2 passed, 3 total
Tests:       2 failed, 3 passed, 5 total
Snapshots:   0 total
Time:        0.628 s

Jestへの移行はこれで完了です。わりと簡単できました。Angularの公式サポートされるテストは結局、どれになるかはわかりませんが何かしらに早いとこ決まってほしいですね。