如何在cypress.config.js中导入JS函数并解决ES模块导入报错

方案1：将email.js转换为ES模块导出 #

这是适配项目模块规范的长期解决方案，直接修改email.js的导出方式：

// email.js 修改后
const email_var = new emailClass();
export default email_var;

在cypress.config.js中使用ES模块的import语法导入：

// cypress.config.js
import email_var from './cypress/support/email.js';

export default defineConfig({
  // 其他Cypress配置项
  e2e: {
    // ...
  },
  afterRun() {
    // 调用目标函数
    email_var.email_func();
  }
});

方案2：使用动态import()加载CommonJS模块 #

如果不想修改email.js的代码，可以利用ES模块的动态import()特性（支持加载CommonJS模块），注意afterRun需要改为异步函数：

// cypress.config.js
export default defineConfig({
  // 其他Cypress配置项
  e2e: {
    // ...
  },
  async afterRun() {
    // 动态导入CommonJS模块
    const { default: email_var } = await import('./cypress/support/email.js');
    email_var.email_func();
  }
});

方案3：使用Node.js的createRequire API #

通过Node.js内置的createRequire创建CommonJS风格的require函数，实现同步导入：

// cypress.config.js
import { createRequire } from 'module';
// 基于当前模块的URL创建require函数
const require = createRequire(import.meta.url);
const email_var = require('./cypress/support/email.js');

export default defineConfig({
  // 其他Cypress配置项
  e2e: {
    // ...
  },
  afterRun() {
    email_var.email_func();
  }
});

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