Angular Webpack Starterで作成したアプリにJestを導入した話

この記事は、Business Bank Group Developers Advent Calendar 9日目の記事です。

前置き

この記事は、 angular-starterを利用して作成したアプリケーションに、Jest導入記事を参考にJestを導入して実際に動かすまでの過程を記した記事です。
また、すでにjasmine + karmaのテスト環境は存在している状態であり、
いきなりこのkarmaのテスト環境を無くすいうことはストレスになりそうだったので共存する方針を取る形で導入を目指しています。

導入

jestのインストール

yarn add --dev jest jest-preset-angular @types/jest

jest.config.jsを作成

./jest.config.js

module.exports = {
  preset: 'jest-preset-angular',
  roots: ['src'],
  globals: {
    "ts-jest": {
      tsConfigFile: "<rootDir>/tsconfig.test.json"
    },
    "__TRANSFORM_HTML__": true,
  },
  testMatch: [
    "<rootDir>/src/**/+(*.)+(test).+(ts)?(x)"
  ],
  setupTestFrameworkScriptFile: '<rootDir>/jest/setupJest.ts',
  transformIgnorePatterns: [
    "node_modules/(?!@ngrx)"
  ]
};

jest起動のための設定ファイルになります。
導入資料と変更している点としては、すでに存在しているkarmaのテストに影響を与えないように、testMatchファイルをxxx.test.tsとなるようにしている点。
setupFileはtslintの影響を与えないようにするために、新しくjestディレクトリを切った中に入れるようにしました。

setupJest.tsの作成

./jest/setupJest.ts

import 'jest-preset-angular';
import './jestGlobalMocks';

./jest/jestGlobalMocks.ts

const mock = () => {
  let storage = {};
  return {
    getItem: (key: any) => key in storage ? storage[key] : null,
    setItem: (key: any, value: any) => storage[key] = value || '',
    removeItem: (key: any) => delete storage[key],
    clear: () => storage = {},
   };
  };
  Object.defineProperty(window, 'localStorage', {value: mock()});
  Object.defineProperty(window, 'sessionStorage', {value: mock()});
  Object.defineProperty(window, 'getComputedStyle', {
  value: () => ['-webkit-appearance']
});

ここは資料通りです。setupJest.tsでテスト起動時にimportしたいクラスを指定し、
jestGlobalMocks.tsにjsdomには存在しないブラウザAPIを定義しています。

webpackの修正

今回新しくtest拡張子を追加したので、それを追加する必要があります。

tsconfigの修正

{
  "compilerOptions": {
      :
    "types": [
-     "jasmine",
+     "jest",
      :
    ]

package.json

"scripts": {
    :
+ "jest": jest,
+ "jest:watch": "jest --watch",
- "test": "karma start",
+ "test": "jest && karma start",

まとめ

ブラウザのjsdomで動いているのでjestは速くていいです。
また今回挙げながったですがwatch機能が便利なのもいいです。
構築当時はkarmaと共存を考えていましたが、現在はkarmaなくしていいと考えているので置き換えの方を進めようとしています。

明日のカレンダーは @kyokoshimizu さんが担当します。よろしくお願いします。