AngularのライブラリのテストにJestを使ってみる

この記事は Angular #2 Advent Calendar 2019 7日目の記事です

ng g libraryで作成したAngularのライブラリに対してjestでテストを回せるようにしたのでやったことを書いていく

経緯

「テキストボックスの入力に関して指定秒数入力がなかった場合にイベントを発火させる」というよくありがちな実装をライブラリ化した

Angularでライブラリを作成しnpmに公開する - notebook

swfz.hatenablog.com

実際のテストコードはディレクティブに対してのテストとrxjsの実装部分のテストをjest-marblesを使ったが「完全に理解した」という感じになっていないので割愛する

下記の記事で少し古いがライブラリを使っている場合のjestの設定についての記事を見つけたので参考にする

Integrate Jest into an Angular application and library

blog.angularindepth.com

ようはappとlibでjestの設定を分けて別々にテストを走らせれば良いということらしい

jest-schematicの追加

install

$ npx ng add @briebug/jest-schematic
Installing packages for tooling via npm.
Installed packages for tooling via npm.
DELETE karma.conf.js
DELETE src/test.ts
CREATE src/setup-jest.ts (859 bytes)
CREATE src/test-config.helper.ts (617 bytes)
UPDATE package.json (2184 bytes)
UPDATE tsconfig.spec.json (333 bytes)

jestの適用に関してはschematicがあるのでng addするだけで使えるようになる

処理的には

karmaの削除
jestの設定の追加

を行ってくれている

$ npm run test
> ngx-libraries@0.0.0 test /home/vagrant/sandbox/ngx-libraries
> jest

 PASS  src/app/app.component.spec.ts (19.189s)
  AppComponent
    ✓ should create the app (617ms)
    ✓ should have as title 'ngx-libraries' (142ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        24.114s
Ran all test suites.

ライブラリのプロジェクトでjestを使用できるようにする

ng g library で作成したプロジェクトと大本のアプリケーション両方でjestを使ったテストを行えるようにする

先の工程でsrc/setup-jest.tsファイルが作られたのでそれをベースとして本体用のconfigとlib用のconfigを作成する

ライブラリの作成工程に関しては下記記事に書いてあるので割愛する

Angularでライブラリを作成しnpmに公開する - notebook

swfz.hatenablog.com

jest.base.config.js

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
};

jest.app.config.js

const baseConfig = require('./jest.base.config');

module.exports = {
  ...baseConfig,
  roots: ['<rootDir>/src'],
  modulePaths: ['<rootDir>/dist']
};

jest.lib.config.js

const baseConfig = require('./jest.base.config');

module.exports = {
  ...baseConfig,
  roots: ['<rootDir>/projects'],
};

package.json

  "scripts": {
    "test": "npm run test:lib && npm run test:app",
    "test:lib": "jest --config ./jest.lib.config.js",
    "test:app": "jest --config ./jest.app.config.js",

参考記事通りだとdeprecation warningが出るのでsetupTestFrameworkScriptFile -> setupFilesAfterEnvに変更している

テストを書いて走らせてみる

$ npm run test
> ngx-libraries@0.0.0 test /home/vagrant/sandbox/ngx-libraries
> npm run test:lib && npm run test:app


> ngx-libraries@0.0.0 test:lib /home/vagrant/sandbox/ngx-libraries
> jest --config ./jest.lib.config.js

 PASS  projects/filter-keyup-events/src/lib/filter-keyup-events.service.spec.ts
 PASS  projects/filter-keyup-events/src/lib/directives/filter-keyup-events.directive.spec.ts
 PASS  projects/filter-keyup-events/src/lib/filter-keyup-events.component.spec.ts

Test Suites: 3 passed, 3 total
Tests:       5 passed, 5 total
Snapshots:   0 total
Time:        4.925s, estimated 5s
Ran all test suites.

> ngx-libraries@0.0.0 test:app /home/vagrant/sandbox/ngx-libraries
> jest --config ./jest.app.config.js

 PASS  src/app/pages/filter-keyup-events/filter-keyup-events.component.spec.ts
 PASS  src/app/app.component.spec.ts

Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        3.735s, estimated 4s
Ran all test suites.

無事app, lib両方でテストが走ってパスしている

jestのプラグインなどの利用

jestのプラグインなどのツールを使いたい場合はsrc/setup-jest.tsに追記していく形で良さそう

今回はjest-allure使っていて、importすることでテスト時にallureの結果を出力できるようにしている

diff --git a/src/setup-jest.ts b/src/setup-jest.ts
index e222064..f1b5c01 100644
--- a/src/setup-jest.ts
+++ b/src/setup-jest.ts
@@ -1,4 +1,5 @@
 import 'jest-preset-angular';
+import 'jest-allure/dist/setup';

 /* global mocks for jsdom */
 const mock = () => {