Angular13でJestを導入してみる

## はじめに

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

## 環境構築
nodeの環境構築ができていない方は、[nodebrew](https://github.com/hokaccha/nodebrew)や[nというバージョン管理ツール](https://github.com/tj/n)などで、nodeのversion16.10.0を設定してください。(Angular13がサポートしているnodeのバージョンなら大丈夫です)
また`npm install -g @angular/cli`などでangularの環境構築ができるので、お好きな方法で実行環境を作成してください。迷ったら[公式サイトのセットアップ](https://angular.jp/guide/setup-local)がおすすめです。
`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)](https://www.npmtrends.com/jasmine-vs-jest-vs-karma)。

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

## Jestの設定

[jest-preset-angular Installation](https://thymikee.github.io/jest-preset-angular/docs/getting-started/installation)の手順を元に実行していきます。

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

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


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

```sh
touch jest.config.js src/jest.ts
```

```js:src/jest.ts
import "jest-preset-angular/setup-jest";
```

```js: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`に以下の記述を追記することで解決できるらしいです

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

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

```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に追記します。

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

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

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

```sh:tree
  │  
  ├── src
  │    └─jest.ts
  ├── package.json
  ├── tsconfig.app.json
  ├── tsconfig.spec.json
  └── jest.config.js

```


後から知りましたが、[Jest Angular Schematic](https://github.com/briebug/jest-schematic)というものがあり

```sh
yarn ng add @briebug/jest-schematic
```
これだけで導入できるようです。すごく便利。

あとは行いたいユニットテストを[Angular公式リファレンス](https://angular.jp/guide/testing#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AE%E3%83%86%E3%82%B9%E3%83%88)などを確認しながら、実装していけばいいと思います。

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

## 参考文献

[jest-preset-angular Installation](https://thymikee.github.io/jest-preset-angular/docs/getting-started/installation)
[jest](https://jestjs.io/ja/)
[npm trends](https://www.npmtrends.com/jasmine-vs-jest-vs-karma)
[Jestで始める！ ユニットテスト  第1回](https://www.codegrid.net/articles/2017-jest-1/)
[Jest Angular Schematic](https://github.com/briebug/jest-schematic)