如何在Cypress中合理组织测试代码 实现函数按需导入并解决导入报错

你当前同时使用了命名导出与默认导出两种语法，导入规则和导出逻辑不匹配是报错的核心原因：

• 你已经通过export function login()完成了login方法的命名导出
• 末尾追加的export default {login}是冗余的默认导出逻辑，未和导入方式对齐

方案1：保留命名导出（推荐，适配按需导入需求） #

直接删除导出文件末尾的export default {login}代码即可，你的现有导入语句import {login} from 'elements/pages/login.js'可以直接正常运行。
后续你需要新增其他鉴权相关函数时，直接加export function 函数名()的命名导出即可，测试用例中可以按需导入需要的单个函数，不会引入冗余内容。
导出文件最终示例：

export function login() {
    cy.visit('https://*********')
    cy.get('input[name="Parameter.UserName"]').type('*****')
    cy.get('input[name="Parameter.Password"]').type('*****')
    cy.contains('Login').click()
}
// 后续新增其他函数直接加命名导出即可
export function logout() {
  // 对应逻辑
}

方案2：保留默认导出，修改导入逻辑 #

如果需要保留默认导出写法，需要调整导入语句的写法：

// 先导入默认导出的整个对象，再解构取需要的方法
import authApi from 'elements/pages/login.js'
const { login } = authApi

// 直接调用
login()

• 按页面/业务模块拆分工具函数文件，非全局通用的逻辑全部用命名导出，测试用例按需导入，避免全局污染
• 全量测试都会用到的高频公共逻辑（如登录、通用鉴权校验）可以注册为Cypress自定义命令，在cypress/support/commands.js中添加如下代码：

Cypress.Commands.add('login', () => {
  cy.visit('https://*********')
  cy.get('input[name="Parameter.UserName"]').type('*****')
  cy.get('input[name="Parameter.Password"]').type('*****')
  cy.contains('Login').click()
})

之后所有测试用例无需导入，直接调用cy.login()即可使用。

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