はじめに

下記を満たすテストファイル用共通処理の管理方法を調査、試した際の備忘録です。

複数のテストファイルで共通使用できる関数を追加したい。
各テストファイルに同じ関数を書きたくない。
commonなどで共通使用すると便利な関数を1箇所にまとめたい。（管理しやすくしたい。）

とりあえず動作したので、備忘録としてメモを残すことにしました。
下記のstackoverflowの回答を参考にしています。
javascript - Shared utils functions for testing with Jest - Stack Overflow

環境

Angular15でJest使用しています。中々バージョン上げる時間が取れず、色々と古いです。参考までに。

Angular CLI: 15.2.11
Node: 16.14.2
Package Manager: npm 8.5.0
OS: linux arm64

Angular: 15.2.10
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1502.11
@angular-devkit/build-angular      15.2.11
@angular-devkit/core               15.2.11
@angular-devkit/schematics         15.2.11
@angular/cdk                       15.2.9
@angular/cli                       15.2.11
@angular/material                  15.2.9
@angular/material-moment-adapter   15.2.9
@schematics/angular                15.2.11
rxjs                               6.5.5
typescript                         4.9.5

Jest関連

"@types/jest": "^29.0.3",
"jest": "^29.0.3",
"jest-preset-angular": "^13.0.1",

対応内容

最初に手順をまとめると下記を行いました。

ヘルパーファイルを作成する。
- 各テストで使用したい関数を追加する
jest.config.jsのsetupFilesにヘルパーファイルを指定する。
- Jestでは設定オプションを通じて全てのテストファイル実行前にファイルを実行するよう設定が可能。
- Jestでは変更可能なオブジェクトglobalが提供されているのでここにヘルパー関数を配置、テストで利用可能にする。
- 今回は、型定義ファイルを別に作らず、ヘルパーファイル1つにしている。

ヘルパーファイルの作成

ヘルパーファイルを追加し、共通関数を記載します。
合わせて、関数の型宣言を記載します。

jest-helpers.ts

export { };

declare global {
    function test();
}

//NOTE: コンパイラーの型を定義。実際にはwindowブラウザーglobalのノード内のグローバル名前空間にアタッチしていません。モジュールからエクスポートするのではなく、アタッチします。同型で使用するために下記を記載。
const _global = (window /* browser */ || global /* node */) as any;
_global.test = function test() {
    ...(省略)
};

jest.config.jsにヘルパーファイルを追加

setupFilesにヘルパーファイルのパスを追加します。

jest.config.js

module.exports = {
  ...(省略)
  setupFiles: [
    "<rootDir>/src/jest/setup/jest-helpers.ts", // 追加
  ],

tsconfig.spec.jsonにヘルパーファイルパスを追加

cannot find name 'test'と怒られるので、filesにパスを追加します。

tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest", "node"]
  },
  "files": ["src/jest/setup/setup-jest.ts", "src/jest/setup/jest-helpers.ts"], // ここに追加
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

テストファイルで使用

テストファイルからはインポートなしで呼び出せます。

sample.spec.ts

it("テスト", () => {
	test();
	let elem = fixture.nativeElement.querySelector(".sample");
	expect(elem).toBeTruthy();
});

まとめ

問題点やもっとわかりやすい管理方法など出てきたら追記・編集したいと思います。

参考