設定

我們建議使用 Vitest，但你可以自由使用任何相容 ESM 的測試執行器。

Vitest

新增開發依賴

npm
Yarn

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

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

選擇性安裝 @vitest/ui，這會在瀏覽器視窗中開啟一個 UI，以追蹤進度和與您的測試互動。

npm
Yarn

npm install --save-dev @vitest/ui

yarn add --dev @vitest/ui

新增一個 vitest-setup.js 檔案，以選擇性設定 @testing-library/jest-dom 的 expect 匹配器。
vitest-setup.js
```
import '@testing-library/jest-dom/vitest'
```

新增 vitest.config.js，或使用 svelte 和 svelteTesting Vite 外掛程式更新您現有的 vite.config.js。將測試環境設定為您選擇的 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 外掛程式

將自動清理 fixture 新增至 test.setupFiles
將 browser 新增至 resolve.conditions

如果需要，您可以停用任一行為。停用這兩個選項等同於省略外掛程式。

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

如果您有複雜的 Vite 設定或無法載入 Node.js 的依賴項，解析 browser 條件可能會導致問題。有關更多資訊和替代設定選項，以確保使用 Svelte 的瀏覽器程式碼，請參閱 testing-library/svelte-testing-library#222。

將測試腳本新增至您的 package.json，以使用 Vitest 執行測試

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

建立您的元件和測試檔案（查看其餘的文件以瞭解如何操作），並執行以下命令來執行測試。
- npm
- Yarn
npm test
yarn test

Jest

@testing-library/svelte 僅限 ESM，這表示您必須在 ESM 模式中使用 Jest。

新增開發依賴

npm
Yarn

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

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

新增一個 jest-setup.js 檔案，以設定 @testing-library/jest-dom (如果使用)。
jest-setup.js
```
import '@testing-library/jest-dom'
```

設定 Jest 以使用 jsdom、轉換 Svelte 檔案，並使用您的設定檔

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) 模組
允許轉換 @testing-library/svelte，即使它在 node_modules 中

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'],
  }

將以下內容新增至您的 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"
  }
}

建立您的元件 + 測試檔案（查看其餘的文件以瞭解如何操作）並執行它
- npm
- Yarn
npm test
yarn test

TypeScript 和預處理器

若要將 TypeScript 與 Jest 搭配使用，您需要安裝和設定 svelte-preprocess 和 ts-jest。如需完整說明，請參閱 svelte-jester 文件。

如果您想包含任何其他 Svelte 預處理器，請參閱 svelte-jester 文件。

Vitest​

Jest​

TypeScript 和預處理器​

Vitest

Jest

TypeScript 和預處理器