设置

我们建议使用 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 预期匹配器。
vitest-setup.js
```
import '@testing-library/jest-dom/vitest'
```

添加 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
将 browser 添加到 resolve.conditions

如果需要，您可以禁用任一行为。禁用这两个选项等同于省略插件。

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

解析 browser 条件可能会导致问题，如果您具有复杂的 Vite 配置或无法加载到 Node.js 中的依赖项。有关更多信息和替代配置选项，请参阅 testing-library/svelte-testing-library#222，以确保使用 Svelte 的浏览器代码。

将测试脚本添加到您的 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 和预处理器