Cypress v10如何批量引入.cy.js内重复使用的import模块？

你之前创建complete.js批量引入不生效的核心原因：ES Module的导入变量属于文件级作用域，直接在complete.js内写import语句，导入的对象仅在complete.js内部可访问，不会自动透传到引入该文件的测试文件，因此测试文件无法读取到对应依赖。

方案1：公共入口统一导出（通用方案，1行引入即可） #

修改complete.js的内容，将所有依赖通过转导出的方式暴露：

// complete.js 建议和其他import依赖文件放在同一目录，简化路径配置
export { default as Customers } from "./Customer"
export { default as Search } from "./Search"
export { default as PostComment } from "./PostComment"
export { default as Feedback } from "./Feedback"
export { default as Login } from "./Login"

后续所有.cy.js测试文件仅需1行代码即可引入全部依赖：

// 注意根据complete.js实际存放路径调整引入前缀
import { Customers, Search, PostComment, Feedback, Login } from "../imports/complete.js"

如果不想写多个解构变量，也可以整体引入为一个对象调用：

import * as TestUtils from "../imports/complete.js"
// 调用示例：TestUtils.Login、TestUtils.Search

方案2：Cypress全局挂载（零引入代码，适合全项目高频依赖） #

如果不想在每个测试文件写任何引入代码，可以直接把依赖挂载到Cypress全局对象上：

1. 打开Cypress v10对应的支持文件，E2E测试默认路径为cypress/support/e2e.js，组件测试默认路径为cypress/support/component.js
2. 在文件中添加以下代码：

import Customers from "../imports/Customer"
import Search from "../imports/Search"
import PostComment from "../imports/PostComment"
import Feedback from "../imports/Feedback"
import Login from "../imports/Login"

// 挂载到Cypress全局实例
Cypress.Customers = Customers
Cypress.Search = Search
Cypress.PostComment = PostComment
Cypress.Feedback = Feedback
Cypress.Login = Login

配置完成后，所有测试文件无需写任何import语句，直接通过Cypress.Login、Cypress.Customers的形式即可调用对应依赖。

内容的提问来源于stack exchange，提问作者KiritoLyn