セットアップ

Vitestの使用を推奨しますが、ESM互換性のある任意のテストランナーでライブラリを自由に使用できます。

Vitest

1. 開発依存関係を追加

   • @testing-library/svelte
   • @testing-library/jest-dom (オプションですが、強く推奨します)
   • @sveltejs/vite-plugin-svelte
   • vitest
   • jsdom、happy-dom、またはその他のVitest DOM環境
   npm

   npm install --save-dev \
     @testing-library/svelte \
     @testing-library/jest-dom \
     @sveltejs/vite-plugin-svelte \
     vitest \
     jsdom

   Yarn

   yarn add --dev \
     @testing-library/svelte \
     @testing-library/jest-dom \
     @sveltejs/vite-plugin-svelte \
     vitest \
     jsdom

   オプションで@vitest/uiをインストールすると、テストの進捗状況を追跡し、テストを操作するためのUIがブラウザウィンドウで開きます。

   npm

   npm install --save-dev @vitest/ui

   Yarn

   yarn add --dev @vitest/ui

2. オプションで@testing-library/jest-domのexpectマッチャーを設定するために、vitest-setup.jsファイルを追加します。

   vitest-setup.js

   import '@testing-library/jest-dom/vitest'

3. vitest.config.jsを追加するか、既存のvite.config.jsをsvelteおよびsvelteTesting Viteプラグインで更新します。テスト環境を任意のDOMライブラリに設定し、オプションでステップ(2)で作成したセットアップファイルを構成します。

   vite.config.js

   import {defineConfig} from 'vitest/config'
   import {svelte} from '@sveltejs/vite-plugin-svelte'
   import {svelteTesting} from '@testing-library/svelte/vite'
   
   export default defineConfig({
     plugins: [svelte(), svelteTesting()],
     test: {
       environment: 'jsdom',
       setupFiles: ['./vitest-setup.js'],
     },
   })

   または、SvelteKitを使用している場合

   vite.config.js

   import {defineConfig} from 'vitest/config'
   import {sveltekit} from '@sveltejs/kit/vite'
   import {svelteTesting} from '@testing-library/svelte/vite'
   
   export default defineConfig({
     plugins: [sveltekit(), svelteTesting()],
     test: {
       environment: 'jsdom',
       setupFiles: ['./vitest-setup.js'],
     },
   })
   注意

   svelteTestingプラグイン

   • test.setupFilesに自動クリーンアップフィクスチャを追加
   • resolve.conditionsにbrowserを追加

   必要に応じて、いずれかの動作を無効にできます。両方のオプションを無効にすることは、プラグインを省略するのと同じです。

   svelteTesting({
     // disable auto cleanup
     autoCleanup: false,
     // disable browser resolution condition
     resolveBrowser: false,
   })

   browser条件の解決は、複雑なVite構成またはNode.jsにロードできない依存関係がある場合に問題が発生する可能性があります。Svelteのブラウザコードが確実に使用されるようにするための詳細および代替構成オプションについては、testing-library/svelte-testing-library#222を参照してください。

4. Vitestでテストを実行するために、package.jsonにテストスクリプトを追加します

   package.json

   {
     "scripts": {
       "test": "vitest run",
       "test:ui": "vitest --ui",
       "test:watch": "vitest"
     }
   }

5. コンポーネントとテストファイルを作成し（方法についてはドキュメントの残りの部分を参照してください）、次のコマンドを実行してテストを実行します。

   npm

   npm test

   Yarn

   yarn test

Jest

@testing-library/svelteはESMのみであるため、ESMモードでJestを使用する必要があります。

1. 開発依存関係を追加

   • @testing-library/svelte
   • @testing-library/jest-dom (オプションですが、強く推奨します)
   • svelte-jester
   • jest
   • jest-environment-jsdom
   npm

   npm install --save-dev \
     @testing-library/svelte \
     @testing-library/jest-dom \
     svelte-jester \
     jest \
     jest-environment-jsdom

   Yarn

   yarn add --dev \
     @testing-library/svelte \
     @testing-library/jest-dom \
     svelte-jester \
     jest \
     jest-environment-jsdom

2. @testing-library/jest-domを使用する場合は、jest-setup.jsファイルを追加して構成します。

   jest-setup.js

   import '@testing-library/jest-dom'

3. jsdomを使用し、Svelteファイルを変換し、セットアップファイルを使用するようにJestを構成します

   jest.config.js

   export default {
     transform: {
       '^.+\\.svelte$': 'svelte-jester',
     },
     moduleFileExtensions: ['js', 'svelte'],
     extensionsToTreatAsEsm: ['.svelte'],
     testEnvironment: 'jsdom',
     setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
   }
   注意

   Svelte 5を使用している場合は、svelte-jester@5以降を使用する必要があり、Jest構成に追加の変更を加える必要があります。

   • transformを更新して、.svelte.(js|ts)モジュールをコンパイルします
   • node_modulesにある場合でも、@testing-library/svelteが変換されるようにします

   jest.config.js

     export default {
       transform: {
   -     '^.+\\.svelte$': 'svelte-jester',
   +     '^.+\\.svelte(\\.(js|ts))?$': 'svelte-jester',
       },
   +   transformIgnorePatterns: [
   +     '/node_modules/(?!@testing-library/svelte/)',
   +   ],
       moduleFileExtensions: ['js', 'svelte'],
       extensionsToTreatAsEsm: ['.svelte'],
       testEnvironment: 'jsdom',
       setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
     }

4. package.jsonに以下を追加します

   package.json

   {
     "scripts": {
       "test": "npx --node-options=\"--experimental-vm-modules\" jest src",
       "test:watch": "npx --node-options=\"--experimental-vm-modules\" jest src --watch"
     }
   }

5. コンポーネントとテストファイルを作成し（方法についてはドキュメントの残りの部分を参照してください）、実行します

   npm

   npm test

   Yarn

   yarn test

TypeScriptとプリプロセッサ

JestでTypeScriptを使用するには、svelte-preprocessとts-jestをインストールして構成する必要があります。完全な手順については、svelte-jesterドキュメントを参照してください。

その他のSvelteプリプロセッサを含める場合は、svelte-jesterドキュメントを参照してください。