Cypress应用

Svelte组件测试

info

你将学习到

• 如何在Svelte中设置组件测试
• 如何为Svelte项目配置Cypress
• 如何使用Vite和自定义Webpack配置测试Svelte组件

框架支持

Cypress组件测试支持多种框架下的Svelte 5：

• 使用Vite的Svelte
• 使用Webpack的Svelte

caution

Svelte的组件测试目前处于alpha支持阶段。

教程

访问入门指南，获取为项目添加组件测试并编写首个测试的逐步教程。

安装

要在Svelte中开始使用Cypress组件测试，请将Cypress安装到项目中：

npm

npm install cypress --save-dev

yarn

yarn add cypress --dev

pnpm

pnpm add --save-dev cypress

打开Cypress：

npm

npx cypress open

yarn

yarn cypress open

pnpm

pnpm cypress open

选择组件测试

Cypress启动向导将引导你完成项目配置。

info

如需创建组件测试的逐步指南，请参考入门指南。

关于使用方法和示例，请访问Svelte示例指南。

框架配置

Cypress组件测试开箱即支持Vite和自定义Webpack配置。Cypress在设置过程中会自动检测这些框架并进行正确配置。以下示例供参考。

使用Vite的Svelte

Cypress组件测试支持使用Vite 4+作为打包工具的Svelte应用。

Vite配置

cypress.config.js 文件

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'svelte',
      bundler: 'vite',
    },
  },
})

cypress.config.ts 文件

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer: {
      framework: 'svelte',
      bundler: 'vite',
    },
  },
})

Svelte Vite示例应用

• Svelte 5 Vite 6 带Typescript

使用Webpack的Svelte

Cypress组件测试支持使用Webpack 4+作为打包工具的Vue应用。

Webpack配置

cypress.config.js 文件

const { defineConfig } = require('cypress')
const webpackConfig = require('./webpack.config')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'svelte',
      bundler: 'webpack',
      // 可选传入webpack配置
      webpackConfig,
    },
  },
})

cypress.config.ts 文件

import { defineConfig } from 'cypress'
import webpackConfig from './webpack.config'

export default defineConfig({
  component: {
    devServer: {
      framework: 'svelte',
      bundler: 'webpack',
      // 可选传入webpack配置
      webpackConfig,
    },
  },
})

如果不提供配置，Cypress会尝试推断你的webpack配置。如果Cypress无法推断或你需要修改配置，可以通过webpackConfig选项手动传入。

Svelte Webpack示例应用

• Svelte 5 Webpack 5 带Typescript