跳到主要内容

设置

我们推荐使用 Vitest，但你可以自由地将该库与任何你熟悉的测 试框架和运行器一起使用。

Vitest​

  1. 暗转 Vitest 和 jsdom

    npm install --save-dev vitest jsdom

  2. 添加以下到你的 package.json

    {
      "scripts": {
        "test": "vitest run src",
        "test:watch": "vitest src"
      }
    }

  3. 在 Vitest 中使用 Svelte 组件之前，你需要编译它们，所以你需要安装 @sveltejs/vite-plugin-svelte 和 Vite。

    npm install --save-dev @sveltejs/vite-plugin-svelte vite

  4. 在你的项目的根部添加一个 vitest.config.ts 配置文件

    import {defineConfig} from 'vitest/config'
    import {svelte} from '@sveltejs/vite-plugin-svelte'

    export default defineConfig({
      plugins: [svelte({hot: !process.env.VITEST})],
      test: {
        include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
        globals: true,
        environment: 'jsdom',
      },
    })

  5. 这是可选的，但建议你安装 jest-dom，以便在 Jest 中添加 方便的断言。

    5.1 安装 jest-dom

    npm install --save-dev @testing-library/jest-dom

    5.2 在你的测试文件的开头导入 @testing-library/jest-dom。

    import '@testing-library/jest-dom'

  6. 创建你的组件和一个测试文件（查看文档的其他部分以了解如何创建），并运行以下命 令来运行测试。

    npm run test

SvelteKit​

要在 SvelteKit 中使用 Vitest，请安装 vitest-svelte-kit，它包括一个为 SvelteKit 项目预先配置的 Vitest 配置。你可以看一下 vitest-svelte-kit的配置文档， 以获得更多的指导。

Jest​

  1. 安装 Jest & jest-environment-jsdom

    npm install --save-dev jest jest-environment-jsdom

  2. 添加以下到你的 package.json

    {
      "scripts": {
        "test": "jest src",
        "test:watch": "npm run test -- --watch"
      }
    }

  3. 在 Jest 中使用 Svelte 组件之前，你需要对其进行编译，所以我们需要安装 svelte-jester

    npm install --save-dev svelte-jester

  4. 添加如下 Jest 配置到你的 package.json

    {
      "jest": {
        "transform": {
          "^.+\\.svelte$": "svelte-jester"
        },
        "moduleFileExtensions": ["js", "svelte"],
        "testEnvironment": "jsdom"
      }
    }

  5. 如果你在你的项目中使用 ES6 模块，你必须添加 Jest 的 babel 转换设置（它是默认 设置的，但由于我们要覆盖转换配置，我们必须明确添加它）。

    5.1 安装 babel-jest

    npm install --save-dev babel-jest

    5.2. 添加一个基础的 .babelrc 配置

    {
      "presets": [["@babel/preset-env", {"targets": {"node": "current"}}]]
    }

    5.3. 更新 Jest transform 配置

    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.svelte$": "svelte-jester"
    },

  6. 这是可选的，但建议你安装 jest-dom，以便在 Jest 中添加 方便的断言。

    6.1 安装 jest-dom

    npm install --save-dev @testing-library/jest-dom

    6.2 添加如下 Jest 配置到你的 package.json

    {
      "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"]
    }

  7. 创建你的组件+测试文件（查看文档的其他部分以了解如何操作）并运行它

    npm run test

Typescript​

要在 Jest 中使用 Typescript，你需要安装和配置 svelte-preprocess 和 ts-jest。 完整的说明请 见svelte-jester文档。

预处理器​

如果你想包含任 何Svelte 预处理器，那么只需按 照svelte-jester的说明即可。