【IT】SvelteKit + TypeScript + Jest 最短導入ガイド（テスト自動化）

皆さま
こんにちは

この記事では、SvelteKit プロジェクトに Jest を導入して TypeScript コードをテストできるようにする最短手順を紹介します。

例として前回させてしたソースコード用簡易個人情報マスキングツールの
関数：sanitizeText.tsをテストします。

✅ 前提条件

• SvelteKit プロジェクトがすでに存在していること

以下は、前回のときのプロジェクト構成の抜粋です。

$ tree mask-app-log-svelte3 -I node_modules -I ZZ_OLD
　
mask-app-log-svelte3
├── cli.cjs
├── coverage
	・
	・
├── dist
	・
	・
├── index.html
├── jest.config.cjs
├── jsconfig.json
├── make-standalone.sh
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── app.css
│   ├── App.svelte
│   ├── assets
│   │   └── svelte.svg
│   ├── lib
│   │   ├── __mocks__
│   │   │   ├── mask-config.json
│   │   │   ├── sanitizeText.ts
│   │   ├── __tests__
│   │   │   ├── sanitizeText.spec.ts
│   │   ├── mask-config.json
│   │   ├── sanitizeText.ts
│   ├── main.js
│   └── vite-env.d.ts
├── svelte.config.js
├── test
│   └── fixtures
│       └── mask-config.json
├── tsconfig.jest.json
└── vite.config.js

• TypeScript が有効になっていること

• Node.js v18 以上推奨

• テスト対象ファイルのパス：src/lib/sanitizeText.ts

• マスク設定ファイル：src/lib/mask-config.json

1. Jest をインストール

まずは開発依存として Jest と TypeScript 用のアダプタを追加します。

$ cd プロジェクトディレクトリ 

$ npm install --save-dev jest ts-jest @types/jest

2. Jest 設定ファイルを作成（`.cjs` 推奨）

SvelteKit 環境では、`package.json` に `"type": "module"` が入っていることが多く、
`jest.config.js` だと読み込みエラーになるため、CommonJS形式（.cjs） で作成します。

`プロジェクトディレクトリ/jest.config.cjs`

/** @type {import('jest').Config} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  roots: ['<rootDir>/src', '<rootDir>/test'],
  moduleNameMapper: {
    // sanitizeText.ts の `./mask-config.json` をテスト用に差し替え
    '^\\./mask-config\\.json$': '<rootDir>/test/fixtures/mask-config.json'
  },
  transform: {
    '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.jest.json' }]
  }
};

3. テスト専用 tsconfig を作成

テスト実行時のコンパイル設定を分離しておくと便利です。

`プロジェクトディレクトリ/tsconfig.jest.json`

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "isolatedModules": true
  }
}

4. 本番とテストで設定ファイルを切り替える

例えば `sanitizeText.ts` が `mask-config.json` を読み込んでいる場合、
テスト専用のフィクスチャファイルを `test/fixtures/mask-config.json` に置きます。

`test/fixtures/mask-config.json`

{
  "envKeys": ["API_KEY", "SECRET_KEY"],
  "commentKeywords": ["author", "reviewer"],
  "addressExceptions": ["大阪市立大学"],
  "excludePatterns": ["os\\.getenv\\s*\\("]
}

これにより、本番とは違う軽量な設定でテストが可能です。

5. テストコードを書く

`src/lib/__tests__/sanitizeText.spec.ts`

import { sanitizeText } from '../sanitizeText';

describe('sanitizeText', () => {
  test('APIキーがマスクされる', () => {
    const input = 'API_KEY=abcd1234';
    const output = sanitizeText(input);
    expect(output).toContain('[individual value masked]');
  });

  test('除外パターンはマスクされない', () => {
    const input = 'os.getenv("API_KEY")';
    const output = sanitizeText(input);
    expect(output).toBe(input);
  });
});

6. 実行

以下のコマンドを実施してテストを行います。

$ npx jest

全てのテストがPASSすること確認し、NG部分は、調査してコードを修正して再度実施します。
テストケースが間違っている場合もありますので適宜
テストケースも見直しください。

出力例：

PASS  src/lib/__tests__/sanitizeText.spec.ts
  sanitizeText
    ✓ APIキーがマスクされる (5 ms)
    ✓ 除外パターンはマスクされない (1 ms)

7. カバレッジ計測

以下のカバレッジを計測します。

$ npx jest --coverage

例：

File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
sanitizeText.ts  |   92.98 |    67.39 |    90.9 |   97.95 | 152

まとめ

• SvelteKit 環境では `.cjs` 形式の設定が安全

• `moduleNameMapper` を使うと本番とテストで設定を切り替えられる

• `tsconfig.jest.json` でテスト用のコンパイル設定を分離できる

• カバレッジを取ることでテスト漏れを防げる

補足

📊カバレッジ（Coverage）とは？

カバレッジ とは、テストによって どのくらいのコードが実行されたか を割合で示す指標です。
npx jest --coverage を実行すると、自動的にこの集計が表示されます。

例：

File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------------------------------------------------------------------------
sanitizeText.ts  |   92.98 |    67.39 |    90.9 |   97.95 | 152

各項目の意味

項目意味% Stmts実行された「文（statement）」の割合% Branchif / switch などの「分岐（branch）」のうち、実行された割合% Funcs実行された関数の割合% Lines実行されたコード行の割合Uncovered Line #s テストされなかった行番号（要テスト追加）

カバレッジを上げるメリット

1. テスト漏れを可視化できる
   → 未実行のコードがどこか一目で分かる

2. バグの温床を減らせる
   → 実行されない条件分岐は動作未確認のままになりやすい

3. リファクタリング時の安心感
   → 充分カバーされていれば、修正後の動作確認が容易

どこまで上げればいい？

• 一般的には 80%以上 が一つの目安

• 100%を目指す必要はないが、重要ロジックや複雑な分岐は全てカバー しておくと安心です。

今回のsanitizeText.spec.tsの場合は、テストケース側の調整も行なってますが、100%のカバレッジを達成しております。

-----------------|---------|----------|---------|---------|-------------------
File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------------|---------|----------|---------|---------|-------------------
All files        |     100 |      100 |     100 |     100 |
 sanitizeText.ts |     100 |      100 |     100 |     100 |
-----------------|---------|----------|---------|---------|-------------------
Test Suites: 7 passed, 7 total
Tests:       234 passed, 234 total
Snapshots:   0 total
Time:        0.603 s, estimated 1 s
Ran all test suites.

Jest でカバレッジを見る方法

$ npx jest --coverage

結果はターミナル表示されるほか、coverage/ フォルダに HTML 形式のレポートも生成されます。

ブラウザで coverage/lcov-report/index.html を開くと、色付きでカバレッジ状況が確認できます。

では

• #プログラミング

• #IT

• #アプリ

• #ツール

• #ITエンジニア

• #プログラミング初心者

• #プログラミング学習

• #JavaScript

• #システムエンジニア

• #iOS

• #インフラエンジニア

• #プログラミング入門

• #iOSアプリ

• #開発者

• #JavaScript初心者

• #iOSアプリ開発

• #xcode

• #JavaScript学習

• #mask

• #マスキング

• #Homebrew

• #svelte

• #Vite

• #ImageMagick

• #sveltekit

• #リアクティブ変数

• #svelte_v5

• #jest

• #テスト自動化