在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

cypress-io/cypress

菜单

开发服务器

相关源文件

开发服务器是 Cypress 组件测试基础设施的关键部分。它们通过提供服务组件到 Cypress 的运行时环境，从而支持 React、Vue、Angular 和 Svelte 等框架的组件渲染和测试。本文档解释了 Cypress 如何使用开发服务器来支持组件测试。

有关与这些开发服务器配合使用的框架适配器信息，请参阅 框架适配器。

开发服务器概述

Cypress 组件测试依赖开发服务器在测试执行期间编译和提供组件。目前，Cypress 支持两种主要的开发服务器：

  1. Webpack Dev Server (@cypress/webpack-dev-server)：适用于使用 Webpack 的项目
  2. Vite Dev Server (@cypress/vite-dev-server)：适用于使用 Vite 的项目

这些服务器与 Cypress 集成，提供：

  • 组件编译和打包
  • 开发过程中的模块热更新 (HMR)
  • 特定框架的配置
  • 源代码映射支持，以获得更好的调试体验
  • 资源服务 (CSS、图像等)

来源：npm/webpack-dev-server/CHANGELOG.md、npm/vite-dev-server/CHANGELOG.md、npm/react/CHANGELOG.md、npm/vue/CHANGELOG.md、npm/angular/CHANGELOG.md、npm/mount-utils/README.md

开发服务器的选择与配置

在设置组件测试时，Cypress 需要知道要使用哪个开发服务器。这是通过组件测试向导或在 Cypress 配置文件中手动配置来确定的。

来源：packages/frontend-shared/cypress/support/mock-graphql/stubgql-Wizard.ts、packages/graphql/src/schemaTypes/objectTypes/gql-Wizard.ts、packages/graphql/src/schemaTypes/enumTypes/gql-WizardEnums.ts

确定所需依赖

WizardDataSource 根据所选框架和打包器帮助确定所需的依赖。它会生成相应的安装命令。

来源：packages/data-context/src/sources/WizardDataSource.ts

Vite 开发服务器架构

Vite 开发服务器 (@cypress/vite-dev-server) 是 Vite 的一个包装器，它与 Cypress 集成以进行组件测试。

关键组件

  1. 配置解析：查找并解析用户的 Vite 配置
  2. Cypress 插件：用于与 Cypress 集成的自定义 Vite 插件
  3. 客户端初始化：在浏览器中初始化组件测试的 JavaScript

来源：npm/vite-dev-server/src/index.ts、npm/vite-dev-server/src/resolveConfig.ts、npm/vite-dev-server/src/plugins/cypress.ts、npm/vite-dev-server/client/initCypressTests.js

配置解析

Vite 开发服务器使用以下流程来查找和解析配置：

  1. 检查用户是否在 Cypress 配置中提供了内联 Vite 配置
  2. 如果没有，则在项目根目录中搜索标准的 Vite 配置文件
  3. 将找到的配置与 Cypress 特定设置合并

来源：npm/vite-dev-server/src/constants.ts、npm/vite-dev-server/src/resolveConfig.ts

Cypress Vite 插件

Cypress Vite 插件 (plugins/cypress.ts) 负责将 Cypress 与 Vite 集成。

  1. 转换 HTML 以注入测试初始化脚本
  2. 配置服务器以提供 index.html
  3. 处理热更新，以便在文件更改时重新加载测试
  4. 管理依赖项以实现正确的模块热替换 (HMR)

来源：npm/vite-dev-server/src/plugins/cypress.ts、npm/vite-dev-server/src/plugins/index.ts

客户端初始化

initCypressTests.js 脚本

  1. 作为模块脚本在浏览器中运行
  2. 如果已配置，则加载支持文件
  3. 导入组件测试文件
  4. 在测试窗口中初始化 Cypress
  5. 设置测试事件和 DOM 清理

来源：npm/vite-dev-server/client/initCypressTests.js

Webpack 开发服务器

与 Vite 开发服务器类似，Webpack 开发服务器 (@cypress/webpack-dev-server) 将 Webpack 与 Cypress 集成以进行组件测试。

主要功能

  • 支持 webpack 4 和 5
  • 特定框架的 webpack 配置
  • 支持 HMR 的开发服务器
  • 源代码映射支持
  • 资源处理

Webpack 开发服务器遵循与 Vite 开发服务器类似的架构，但利用 Webpack 的配置系统和中间件。

来源：npm/webpack-dev-server/CHANGELOG.md

框架支持与兼容性

开发服务器通过特定框架的适配器与各种前端框架协同工作。下表显示了哪些开发服务器与哪些框架兼容：

框架Webpack 开发服务器Vite 开发服务器备注
React✓✓Cypress 14+ 的 React 18+
Vue✓✓Vue 3.x
Angular✓✓ (有限)Cypress 14+ 的 Angular 17.2+
Svelte✓✓于 2022 年年中添加

来源：npm/react/CHANGELOG.md、npm/vue/CHANGELOG.md、npm/angular/CHANGELOG.md

Mount Utils

@cypress/mount-utils 包提供了所有框架适配器使用的通用工具。

  1. 管理用于挂载组件的 DOM 容器
  2. 设置组件挂载/卸载的生命周期钩子
  3. 为不同框架提供一致的 API

来源：npm/mount-utils/README.md、npm/mount-utils/CHANGELOG.md

错误处理

开发服务器提供详细的错误消息，以帮助诊断配置和运行时问题。

常见错误场景

  1. 缺失的配置：找不到必需的配置文件时
  2. 配置错误：vite.config.js 或 webpack.config.js 中的语法或逻辑错误
  3. 依赖项问题：缺少或不兼容的依赖项
  4. 运行时错误：测试执行期间的组件错误

来源：packages/launchpad/cypress/e2e/config-files-error-handling.cy.ts、packages/launchpad/cypress/e2e/error-handling.cy.ts

开发服务器版本和兼容性

随着时间推移，这两个开发服务器都经历了重大版本更新，以支持新的打包器版本和框架。

Vite 开发服务器

  • v6.x：适用于 Cypress 14+，支持 Vite 4+
  • v5.x：增加了对 Vite 5 的支持，改进了源代码映射
  • v4.x：引入了破坏性更改，具有不同的 Vite 配置处理方式
  • v3.x：增加了对 Vite 3 的支持

Webpack 开发服务器

  • v4.x：适用于 Cypress 14+，支持 webpack-dev-server 5
  • v3.x：增加了对 webpack 5 的支持，改进了框架兼容性
  • v2.x：稳定性改进，更广泛的框架支持

来源：npm/webpack-dev-server/CHANGELOG.md、npm/vite-dev-server/CHANGELOG.md

在 Angular 项目中的使用

Cypress 为 Angular 项目提供了一个特殊的原理图，该原理图使用适当的开发服务器来配置组件测试。

Angular 原理图

  1. 安装必要的依赖项
  2. 创建所需的配置文件
  3. 为 Angular 组件测试设置开发服务器

来源：npm/cypress-schematic/CHANGELOG.md、npm/cypress-schematic/src/schematics/ng-add/files-ct/component.ts.template、npm/cypress-schematic/src/schematics/ng-add/files-ct/component-index.html.template

结论

开发服务器是 Cypress 组件测试的关键部分，它们提供了编译、提供和测试各种前端框架组件所需的必要基础设施。通过了解这些服务器的工作原理以及如何配置它们，您可以有效地设置和优化组件测试工作流程。

有关特定框架配置和高级用法，请参阅您所选框架适配器和开发服务器的文档。