既存のAngularプロジェクトにJestを導入する方法

先日bitbank LT Nightで発表をきいてからJestの単体テストに興味津々になったのでJestを入れてみました。あっちを見たりこっちを見たりしたので備忘を兼ねて手順をまとめてみます。淡々と自分の行った手順をまとめていきます。

参考にしたあっちやこっちは以下のとおりです。

• Azure DevOpsでAngularのJestテストのCIをまわせるか試してみた
• Unit testing Angular applications with Jest
• @jest-preset-angularのレポジトリ
• Angular 6: “ng test” with Jest in 3 minutes

jest-schematicを利用してng add @briebug/jest-schematicでも導入できるのですが、私の場合jasmineを消してしまいたくなかったのでこの方法を使いました。

1. 必要なパッケージのインストール

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

2. package.jsonの修正

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/jest.ts"
  }

私の場合はtestを書き換えてtest:watchとjest以下を足しました。setupTestFrameworkScriptFileはこのあと作成するファイルの置き場を書いているだけなので指定と違う場所におきたかったら適宜編集すればOKです。

3. jest.tsを作成する

import 'jest-preset-angular';  
import './jest-global-mocks';  

以上の内容を記載したjest.tsを作ります。ファイル名は2で指定したものと同じであればなんでも大丈夫です。今回はjest.tsにします。

4. jest-global-mocks.tsを作成する

こちらは特別中身を触りたいとき以外は公式の例をコピっておけば大丈夫とのことなので最初にインストールした@jest-preset-angularのレポジトリにあるjestGlobalMocks.tsの中身をそのまま持ってきてはります。特に設定を触っていない限りjest.tsと同じディレクトリに作ります。

5. tsconfig.spec.jsonを編集する

(おそらく大概の場合)すでにtsconfig.spec.jsonが存在するのでその内容を書き換えるだけで良いです。

  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jest",
      "node"
    ]
  },
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]

私が書き換えたのはtypesのjasmineをjestに変えたくらいだったと思います。tsconfig.spec.jsonが見つからないよ！と言われてしまった場合は@jest-preset-angularのREADMEのExposed Configurationにあるようにpackage.jsonの"jest"以下に

"globals": {
    "ts-jest": {
      "tsConfigFile": "src/tsconfig.spec.json"
    },
    "__TRANSFORM_HTML__": true
  },

を追加し、tsConfigFileのところを実際のパスに合わせてあげれば大丈夫です。他に設定を触りたい場合もここを参考にすると良いと思います。

ここまでで、npm testを実行するとjestが走るようになっているはずです。

6. angular.jsonを編集する

私の場合、このあと変更をpushしたときに"ng test"がコケるという理由でパイプラインがfailになったのでangular.jsonを編集する必要がありました。
angular.jsonの"projects">"project-name">"architect">"test">"builder"がデフォルトでは

karma

```になっているので
```"builder": "@angular-builders/jest:run"
```に書き換えます。
このあと確認で"ng test"を走らせたところ、```@angular-builders```がないよ！といわれたので```npm i -D @angular-builders```しました。これで"ng test"でもJestが走るようになり、無事導入完了です！
サクサクとテストが実行できます:hatching_chick: