はじめに
下記を満たすテストファイル用共通処理の管理方法を調査、試した際の備忘録です。
- 複数のテストファイルで共通使用できる関数を追加したい。
- 各テストファイルに同じ関数を書きたくない。
- 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();
});
まとめ
問題点やもっとわかりやすい管理方法など出てきたら追記・編集したいと思います。