Angular13でJestを導入してみる

はじめに

22日目の記事担当のつは@neocoronbです。
今回はAngular13で作成したワークスペースに、Jestを導入してみようと思います。

環境構築

nodeの環境構築ができていない方は、nodebrewやnというバージョン管理ツールなどで、nodeのversion16.10.0を設定してください。(Angular13がサポートしているnodeのバージョンなら大丈夫です)
またnpm install -g @angular/cliなどでangularの環境構築ができるので、お好きな方法で実行環境を作成してください。迷ったら公式サイトのセットアップがおすすめです。
ng newなどでワークスペースを作成した後、うまくバージョンの設定ができているか確認するためにng --versionを実行します。
自分の環境ではこのように出力されました。

Angular CLI: 13.1.2
Node: 16.10.0
Package Manager: npm 7.24.0
OS: darwin x64

Angular: 13.1.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@schematics/angular             13.1.2
rxjs                            7.4.0
typescript                      4.5.4

また後々インストールしますが、今回利用しているjest関連のバージョンは以下の通りです。

"@types/jest": "^27.0.3",
"jest": "^27.4.5",
"jest-preset-angular": "^11.0.1",

Jestについて

Angularにはデフォルトで、JasmineとKarmaというテスト用ツールが設定されています。JestはこのJasmineをベースにしたライブラリなので、書き方を変える必要がありません。テストの実行速度もはやくて、人気もあります(npm trends)。

早速Jestが利用できるように環境構築していきます。

Jestの設定

jest-preset-angular Installationの手順を元に実行していきます。

まずはJestとjest-preset-angularのインストールを行います。

npm i -D jest @types/jest jest-preset-angular

次にJestの設定を記述するjest.config.jsと、テスト実行前に初期化などを行うための、import文を書いておくためのsrc/jest.tsを作成します。

touch jest.config.js src/jest.ts

src/jest.ts

import "jest-preset-angular/setup-jest";

jest.config.js

require("jest-preset-angular/ngcc-jest-processor");

module.exports = {
  preset: "jest-preset-angular",
  setupFilesAfterEnv: ["<rootDir>/src/jest.ts"],
};

jest.config.jsを作りたくない方はpackage.jsonに以下の記述を追記することで解決できるらしいです

package.json

{
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": ["<rootDir>/jest.ts"]
  }
}

tsconfig.spec.jsonの内容を以下の内容で書き換えます。

tsconfig.spec.json

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

これでJestを実行できる環境が作成できました。

最後にnpm testでJestが実行されるように、package.jsonのscriptsに追記します。

package.json

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "jest",
},

これでAngularのテストをJestで実行できる環境ができました！

作成, 編集したファイルのディレクトリ構成はこの様になっています。

tree

  │  
  ├── src
  │    └─jest.ts
  ├── package.json
  ├── tsconfig.app.json
  ├── tsconfig.spec.json
  └── jest.config.js

後から知りましたが、Jest Angular Schematicというものがあり

yarn ng add @briebug/jest-schematic

これだけで導入できるようです。すごく便利。

あとは行いたいユニットテストをAngular公式リファレンスなどを確認しながら、実装していけばいいと思います。

まとめ

すごく丁寧なリファレンスが存在したので、特に問題なくJestを導入することができました。
今後はe2eテストを実装してみたいので、cypressなどを使ってみたいです。

参考文献

jest-preset-angular Installation
jest
npm trends
Jestで始める！ ユニットテスト 第1回
Jest Angular Schematic