vue-cli-service test:unit运行测试导入模块报serviceBase初始化前ReferenceError

• 该报错本质是ESM模块循环依赖导致。项目浏览器运行环境（Webpack/Vite）对循环依赖做了兼容降级处理，因此功能可以正常运行；而mocha运行在Node.js环境下，对模块循环依赖的处理逻辑更严格，会直接抛出变量初始化前被访问的错误。
• 你可以通过工具快速验证循环依赖：执行npx madge --circular src/即可输出所有存在循环依赖的模块链，你的场景对应的循环链大概率为：serviceBase所在模块 -> 中间依赖模块 -> 反向引用serviceBase所在模块，形成了闭环。
• 删除renderer.js的导入后测试正常的原因：mocha运行单元测试时会递归加载所有被测试用例依赖的模块，现有测试用例的依赖链原本没有触及这个循环依赖环，引入renderer.js的导入后刚好把环带入了加载链路。

方案1：调整导入/导出顺序（临时快速修复） #

把serviceBase的导出语句放到对应模块的最顶部（导入语句之后的第一行），或者把循环依赖路径中的导入语句移动到模块底部，避免模块执行过程中还未完成初始化就被其他模块访问。比如你可以把documentImageService.js中对../service的导入语句移到文件末尾。

方案2：拆分模块消除循环依赖（长期最优方案） #

把serviceBase中被其他公共模块依赖的部分抽离为单独的无依赖模块，从根源上打断循环依赖链，不会对后续迭代和测试造成额外兼容负担。

方案3：单元测试侧mock兼容 #

如果暂时不需要修改业务代码，可以在测试配置中全局mock触发循环依赖的模块，避免真实加载时触发报错：

// vue.config.js 新增单元测试配置
module.exports = {
  pluginOptions: {
    mocha: {
      require: ['test/mocks/globalMocks.js']
    }
  }
}

// test/mocks/globalMocks.js
import sinon from 'sinon'
sinon.stub('@/store/utils/services/documentImageService.js', () => ({
  default: {}
}))

方案4：改为惰性导入 #

把renderer.js中对DocumentImage的静态导入改为运行时按需导入，避免模块初始化阶段就触发循环依赖加载：

// 删除顶部的DocumentImage静态导入语句，在需要调用的位置动态导入
async function useDocumentImage() {
  const { default: DocumentImage } = await import('@/store/utils/services/documentImageService.js')
  // 后续业务逻辑
}

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