chore: Karma+Jasmine から vitest+jsdom へ移行 by rdlabo · Pull Request #4 · rdlabo-dev/ionic-angular-library

rdlabo · 2026-06-18T08:07:06Z

Summary

Angular 21 の公式 @angular/build:unit-test ビルダー（Vitest runner / jsdom）へ全4プロジェクトのテストターゲットを移行
Karma/Jasmine の完全削除、lockfile クリーン再生成

Per-project test results (all green)

Project	Test Files	Tests
demo	11	11
photo-editor	3	3
scroll-header	3	7
scroll-strategies	2	5
Total	19	26

Changes

angular.json

4プロジェクト（demo / photo-editor / scroll-header / scroll-strategies）の test ターゲットを @angular/build:karma → @angular/build:unit-test + runner: vitest + runnerConfig: vitest.config.ts に置換。karma 固有オプション（karmaConfig, browsers, polyfills, etc.）を削除。

tsconfig.spec.json (4ファイル)

types: ["jasmine"] → types: ["vitest/globals"]

package.json

削除: karma, karma-chrome-launcher, karma-coverage, karma-jasmine, karma-jasmine-html-reporter, jasmine-core, @types/jasmine, @ionic/angular-toolkit
追加: vitest@^4, jsdom@^26
"test" スクリプトを ng test --watch=false に変更（CI対応）

vitest.config.ts (新規)

server.deps.inline に Ionic 系パッケージを設定。Node ESM ディレクトリ import 問題を解消:

@ionic/angular, @ionic/core, ionicons
@rdlabo/ionic-angular-scroll-header, @rdlabo/ionic-angular-photo-editor, @rdlabo/ngx-cdk-scroll-strategies（いずれも内部で @ionic/angular/standalone を import）

projects/util/test-setup.ts (新規)

jsdom にない DOM API の polyfill:

Element.prototype.scrollTo
Element.prototype.scrollIntoView
window.CSS

Mock ファイル変換 (Jasmine → Vitest)

projects/util/mocks/util/base.mock.ts: jasmine.createSpyObj() → vi.fn() による手動オブジェクト生成
projects/util/mocks/angular/ion-router-outlet.ts: .and.returnValue() → .mockReturnValue(undefined)
projects/util/mocks/angular/nav-controller.ts: .and.returnValue(x) → .mockReturnValue(x)
projects/util/mocks/util/overlay.ts: .and.returnValue(x) → .mockReturnValue(x)

Karma baseline

Chrome 非搭載環境のため Karma 実行不可。ビルド + Vitest 全パスを移行後ベースラインとする。

Verification

ng lint: 全プロジェクト pass
npm run build: pass（既存の tui-image-editor CommonJS 警告のみ）
lockfile クリーン再生成済み（rm -rf node_modules package-lock.json && npm install）

🤖 Generated with Claude Code

https://claude.ai/code/session_01Ch5Dua6sbthgLJSbPAAENF

- angular.json: 4プロジェクト（demo/photo-editor/scroll-header/scroll-strategies）の test ターゲットを @angular/build:karma → @angular/build:unit-test + runner:vitest に変更 - karma.conf.js 削除 - tsconfig.spec.json: types jasmine → vitest/globals（4プロジェクト） - package.json: karma/jasmine devDeps 削除、vitest@^4 + jsdom 追加 - vitest.config.ts 新設: Ionic (@ionic/angular, @ionic/core, ionicons) および @rdlabo/* を server.deps.inline に追加 - projects/util/test-setup.ts 新設: jsdom polyfills (Element.scrollTo, scrollIntoView, window.CSS) - mock ファイル変換: jasmine.createSpyObj → vi.fn()、.and.returnValue() → .mockReturnValue() - package-lock.json クリーン再生成 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ch5Dua6sbthgLJSbPAAENF

netlify · 2026-06-18T08:07:12Z

❌ Deploy Preview for rdlabo-ionic-angular-library failed.

Name	Link
🔨 Latest commit	`03e060e`
🔍 Latest deploy log	https://app.netlify.com/projects/rdlabo-ionic-angular-library/deploys/6a33aa9b8372e30008800ebd

devin-ai-integration

Devin Review found 3 potential issues.

devin-ai-integration · 2026-06-18T08:10:28Z

    "prettier": "^3.1.1",
    "typescript": "~5.9.3",
    "typescript-eslint": "^8.0.0",
-    "write-pkg": "^7.0.0"
+    "write-pkg": "^7.0.0",
+    "vitest": "^4.0.0",
+    "jsdom": "^26.0.0"


🟡 @ionic/angular-toolkit removed from devDependencies but still referenced in angular.json

The PR removes @ionic/angular-toolkit from devDependencies in package.json (line 59 of the old file), but angular.json still references it in cli.schematicCollections (line 232) and schematics (lines 237, 240). After a clean install without the transitive dependency available, any ng generate command using these schematics (e.g., ng generate @ionic/angular-toolkit:page) will fail because the package is no longer a declared dependency.

(Refers to lines 61-73)

Prompt for agents

The @ionic/angular-toolkit package was removed from devDependencies in package.json, but angular.json still references it in cli.schematicCollections (line 232) and schematics sections (lines 237, 240). Either: (1) add @ionic/angular-toolkit back to devDependencies since it's still used for code generation schematics, or (2) remove the references from angular.json's cli.schematicCollections and schematics sections if the toolkit is no longer needed.

Was this helpful? React with 👍 or 👎 to provide feedback.

devin-ai-integration · 2026-06-18T08:10:29Z

+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    setupFiles: ['projects/util/test-setup.ts'],
+    server: {
+      deps: {
+        inline: [
+          /@ionic\/angular/,
+          /@ionic\/core/,
+          /ionicons/,
+          /@rdlabo\/ionic-angular-scroll-header/,
+          /@rdlabo\/ionic-angular-photo-editor/,
+          /@rdlabo\/ngx-cdk-scroll-strategies/,
+        ],
+      },
+    },
+  },
+});


🚩 vitest.config.ts may be ignored by Angular's unit-test builder

The @angular/build:unit-test builder (v20 installed) explicitly passes config: false when calling startVitest (node_modules/@angular/build/src/builders/unit-test/builder.js:171), which disables loading external vitest config files. The runnerConfig option specified in angular.json is not in the v20 schema (which has additionalProperties: false). If Angular 21 (the target version per package.json) added runnerConfig support, this would work correctly. However, the setupFiles in vitest.config.ts:5 (polyfills for jsdom) and server.deps.inline (vitest.config.ts:7-16) would not be applied if the builder ignores this file. The builder already defaults to environment: 'jsdom' and has its own setup files mechanism, but the custom polyfills and dependency inlining might be needed for Ionic components to work in tests.

Was this helpful? React with 👍 or 👎 to provide feedback.

devin-ai-integration · 2026-06-18T08:10:31Z

+          "builder": "@angular/build:unit-test",
          "options": {
            "tsConfig": "projects/photo-editor/tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "browsers": "ChromeHeadlessNoSandbox",
-            "polyfills": []
+            "runner": "vitest",
+            "runnerConfig": "vitest.config.ts"
+          },
+          "configurations": {
+            "ci": {
+              "watch": false
+            }


🚩 Library projects missing buildTarget option unlike the demo project

In angular.json, the demo project's test configuration includes "buildTarget": "demo:build" (line 69), but the library projects (photo-editor, scroll-header, scroll-strategies) do not include a buildTarget option. The @angular/build:unit-test schema shows buildTarget as an optional property (pattern-validated string). Libraries may not need it since they use ng-packagr rather than the application builder, but this inconsistency is worth noting — if the builder requires a build target for proper compilation, library tests could fail.

Was this helpful? React with 👍 or 👎 to provide feedback.

- --no-watch / --no-progress / --browsers=ChromeHeadlessCI を削除（@angular/build:unit-test + vitest + jsdom はブラウザ不要） - --watch=false のみ残す（npm run test スクリプトにも同フラグあり） - package-lock.json を npm install で再生成 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ch5Dua6sbthgLJSbPAAENF

devin-ai-integration Bot reviewed Jun 18, 2026

View reviewed changes

rdlabo merged commit 71bb4b2 into main Jun 18, 2026
5 of 9 checks passed

rdlabo deleted the chore/migrate-vitest-jsdom branch June 18, 2026 08:33

Navigation Menu

Uh oh!

chore: Karma+Jasmine から vitest+jsdom へ移行 - #4

chore: Karma+Jasmine から vitest+jsdom へ移行#4
rdlabo merged 2 commits into
mainfrom
chore/migrate-vitest-jsdom

rdlabo commented Jun 18, 2026 •

edited by devin-ai-integration Bot

Loading

Uh oh!

netlify Bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

devin-ai-integration Bot left a comment

Uh oh!

devin-ai-integration Bot Jun 18, 2026

Uh oh!

devin-ai-integration Bot Jun 18, 2026

Uh oh!

devin-ai-integration Bot Jun 18, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

rdlabo commented Jun 18, 2026 • edited by devin-ai-integration Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Per-project test results (all green)

Changes

angular.json

tsconfig.spec.json (4ファイル)

package.json

vitest.config.ts (新規)

projects/util/test-setup.ts (新規)

Mock ファイル変換 (Jasmine → Vitest)

Karma baseline

Verification

Uh oh!

netlify Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for rdlabo-ionic-angular-library failed.

Uh oh!

devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

rdlabo commented Jun 18, 2026 •

edited by devin-ai-integration Bot

Loading

netlify Bot commented Jun 18, 2026 •

edited

Loading