组件测试

概述

Cypress 中的组件测试提供了一种与框架无关的方法，用于独立测试 UI 组件。它允许开发人员挂载组件、与其交互，并断言其行为和外观。

来源

组件测试执行流程

下图显示了运行组件测试时的执行流程。

来源

框架适配器

Cypress 为多个前端框架提供了官方适配器。每个适配器都实现了用于挂载相应框架组件的一致 API。

框架	包	支持的版本
React	`@cypress/react`	18+
Vue	`@cypress/vue`	3+
Angular	`@cypress/angular`	17.2+
Svelte	`@cypress/svelte`	3+

所有适配器都公开一个 mount 命令，该命令

将组件作为第一个参数
将组件 props/选项作为第二个参数
返回一个可链接的 Cypress 对象用于断言。

挂载实用程序

框架适配器通过 @cypress/mount-utils 包共享通用功能，该包提供

DOM 元素管理
测试生命周期钩子
测试之间的清理
组件挂载的通用实用程序

来源

开发服务器

组件测试需要开发服务器来编译和提供组件。Cypress 支持两种打包器：

Webpack 开发服务器

@cypress/webpack-dev-server 包提供了与 webpack 进行组件测试的集成。它

从项目或自定义配置解析 webpack 配置
使用 Cypress 特定设置设置 webpack-dev-server
启用热模块替换以实现高效测试

Vite 开发服务器

@cypress/vite-dev-server 包提供了与 Vite 进行组件测试的集成。它

使用项目的 vite.config.js/ts 或自定义配置来解析 Vite 配置
注入 Cypress 特定插件
处理测试文件加载和热模块替换

当测试文件更改或组件更新时，开发服务器会检测到更改并触发热模块重载，从而在不重新运行整个测试的情况下更新组件。

来源

配置

组件测试在 Cypress 配置文件（cypress.config.js/ts）中进行配置。该配置指定

所使用的框架（React、Vue、Angular 等）
要使用的打包器（webpack 或 Vite）
任何特定于框架或打包器的选项

使用 Vite 的 React 项目的示例配置

适用于 webpack

来源

设置向导

Cypress 提供了一个设置向导来帮助配置项目的组件测试。该向导

检测正在使用的前端框架
识别正在使用的打包器
创建必要的配置文件
安装所需的依赖项

该向导使用 GraphQL 在前端和后端之间进行通信，其类型在模式文件中定义。

来源

错误处理

组件测试包含针对各种场景的全面错误处理

缺失的打包器配置文件
配置语法错误
组件文件或测试文件中的编译错误
组件测试期间的运行时错误

该系统提供详细的错误消息和堆栈跟踪，以帮助诊断和修复问题。

当开发服务器中出现错误时，它们会被捕获并显示在 Cypress UI 中，并提供在问题修复后重试的选项。

来源

特定于框架的功能

Angular 集成

Angular 组件测试支持

具有依赖项的组件测试
服务覆盖
Angular 的测试实用程序

React 集成

React 组件测试提供

与 React 18+ 的集成
React hooks 测试支持
组件重新渲染功能

Vue 集成

Vue 组件测试提供

对 Vue 3 的支持
访问 Vue Test Utils API
模板和选项 API 支持

Svelte 集成

Svelte 组件测试包括

对 Svelte 3+ 的支持
Props 管理
事件处理

来源

Angular Schematics 支持

Cypress 通过 @cypress/schematic 包提供 Angular schematics 集成，该包可以

将 Cypress 组件测试添加到 Angular 项目
生成组件测试文件
配置必要的设置文件

该 schematic 创建

组件测试的支持文件
Cypress 的配置文件
示例组件测试

来源