Cypress 组件测试中 Vite 5 项目如何配置 devServerPublicPathRoute 对齐应用公共资源路径【免费下载链接】cypressFast, easy and reliable testing for anything that runs in a browser.项目地址: https://gitcode.com/GitHub_Trending/cy/cypress在 Vite 5 项目中跑 Cypress 组件测试时组件测试运行器会使用 Cypress 自己的公共资源路径/__cypress/src而不是应用的根路径。如果被测组件直接引用了应用 public 路径下的资源以 public path URL 方式引用静态资源测试环境里的资源地址就和应用对不上了。cypress/vite-dev-server的官方文档为此提供了配置项在cypress.config的component命名空间里把devServerPublicPathRoute设为空字符串即可让组件测试的公共路径与 Vite 5 应用的默认公共路径一致。该包随 Cypress 二进制一起分发不需要单独安装。版本前提Vite 5 需要搭配 v8 之前的 vite-dev-server按 npm/vite-dev-server/CHANGELOG.mdv8.0.02026-08-26明确移除了 Vite 5–7 的组件测试支持remove Vite 5–7 CT support; require Vite 8。当安装的 vite 版本低于支持范围时getVite会抛出ViteVersionNotSupportedError错误信息为Vite 8 is the required version to use cypress/vite-dev-server. Found Vite version v当前版本见 npm/vite-dev-server/src/getVite.ts。npm/vite-dev-server/README.md 的 Compatibility 表给出了cypress/vite-dev-server与 Cypress 的对应关系cypress/vite-dev-servercypress v2 v9 v3 v5 v10 v13 v6 v14 v7 (esm only) v15 v8 (esm only) v16Vite 5 项目应保留在使用 v8 之前系列 vite-dev-server 的 Cypress 版本按上表v6 系列对应 cypress v14v7 系列esm only对应 cypress v15。v8 系列cypress v16要求 Vite 8Vite 5 已不受支持。本文的配置操作适用于这一版本范围。默认公共路径为什么影响资源引用devServerPublicPathRoute是组件测试专用的配置项源码注释标为 ct-testing specific configuration默认值为/__cypress/src见 packages/config/src/options.ts。vite-dev-server 在解析配置时会把这个值作为 Vite 的base见 npm/vite-dev-server/src/resolveConfig.tsconst viteConfig: InlineConfig { root: projectRoot, base: ${devServerPublicPathRoute}/, // ... }也就是说默认情况下组件测试的资源路径前缀是/__cypress/src/。README 指出了需要改这个值的场景使用 Vite 5 时如果组件测试中直接引用 public path URL 的资源可能就需要设置devServerPublicPathRoute把公共路径设置得与应用一致。配置 devServerPublicPathRoute在cypress.config的component命名空间内把devServerPublicPathRoute设为空字符串。README 中的原始示例import { defineConfig } from cypress export default defineConfig({ component: { // If wanting a publicPath the same as the default in Vite 5 devServerPublicPathRoute: } })设为即表示公共路径与 Vite 5 的默认值相同README 注释原文结合上面的base拼接逻辑实际生效的base为/与应用对齐。这项配置可以和 README 的 object-syntaxdevServer示例放在同一个component命名空间中示例里的framework取你项目实际使用的组件框架bundler固定为viteimport { defineConfig } from cypress export default defineConfig({ component: { devServer: { framework: react, bundler: vite, // viteConfig?: Will try to infer, if passed it will be used as is }, devServerPublicPathRoute: } })README 将两个示例分开给出这里合并展示以说明二者同属component命名空间。设为根路径后测试运行脚本有对应的适配当devServerPublicPathRoute为时客户端运行时会改用基于 base 目录的相对路径来加载 support 文件和 spec见 npm/vite-dev-server/client/initCypressTests.js因此公共路径改为根路径后 spec 仍能正常加载。可选函数语法显式指定 viteConfig如果需要显式指定 Vite 配置而不是依赖推断README 提供了devServer函数语法文档说明该签名面向 advanced use-cases。vite.config.mjs解析到项目根目录下的 Vite 配置文件framework需按实际框架替换import { fileURLToPath } from node:url import { devServer } from cypress/vite-dev-server import { defineConfig } from cypress function resolvePackage (specifier) { return fileURLToPath(import.meta.resolve(specifier)) } export default defineConfig({ component: { devServer(devServerConfig) { return devServer({ ...devServerConfig, framework: react, viteConfig: resolvePackage(vite.config.mjs) }) }, devServerPublicPathRoute: } })验证与边界仓库文档没有给出针对这一配置的独立验证命令判断依据是 README 给出的问题场景本身被测组件是否直接引用 public path URL 资源。据此可以这样核对对引用了 public 路径资源如图片的组件运行一次组件测试确认资源能够加载——这正是 README 所说 settingdevServerPublicPathRoutemay be needed 的场景如果组件并不引用 public path URL 资源则不需要配置保持默认值/__cypress/src不受影响。两点边界需要留意该配置项只作用于组件测试ct-testing specific configuration与 E2E 测试路径无关README 中这一节的标题是 devServerPublicPathRoutefor Vite v5官方示例的目标是让公共路径与 Vite 5 的默认值根路径相同。如果你的应用 Vite 配置把base设成了非根路径可参照base: ${devServerPublicPathRoute}/的拼接规则自行取值使组件测试前缀与应用一致。【免费下载链接】cypressFast, easy and reliable testing for anything that runs in a browser.项目地址: https://gitcode.com/GitHub_Trending/cy/cypress创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考