运行测试用例提示Automatic publicPath is not supported in this browser错误如何解决

问题产生原因 #

这个错误是webpack的自动publicPath推导逻辑和测试运行环境不兼容导致的，根本原因如下：

• 业务代码运行的真实浏览器环境支持document.currentScript等API，webpack可以通过这个属性读取当前脚本的加载地址，自动计算出静态资源的publicPath，所以组件可以正常渲染
• 测试套件（如Jest、Vitest）默认运行在jsdom模拟环境或者纯Node环境，要么没有完整实现document.currentScriptAPI，要么上下文不存在脚本的真实加载路径，webpack的自动publicPath检测逻辑触发失败，就会抛出该错误
• 报错定位在@app-utility/stylesManager的导入行，说明这个依赖包或者它的子依赖打包时开启了webpack的output.publicPath: "auto"配置，导入时触发了自动推导逻辑直接报错。

修复方案 #

可以根据你的项目情况选择以下任意一种方案：

• 方案1：给测试环境提前配置全局publicPath变量
  在测试的全局初始化文件（比如Jest的setupFilesAfterEnv指定的入口文件）顶部添加以下代码：

  /* global __webpack_public_path__ */
  __webpack_public_path__ = '';
  

  直接指定默认的静态资源路径，跳过自动检测逻辑。
• 方案2：修改内部工具包的打包配置
  如果@app-utility/stylesManager是你们团队内部维护的包，把它webpack配置里的output.publicPath从auto改成固定值，比如'/'或者对应的静态资源CDN地址，重新打包后就不会携带自动检测逻辑。
• 方案3：在测试配置中mock掉该依赖
  如果你当前的测试用例不需要用到@app-utility/stylesManager的真实逻辑，可以直接在测试配置里mock该包，以Jest为例：
  1. 在jest.config.js中添加映射规则：

  module.exports = {
    moduleNameMapper: {
      '@app-utility/stylesManager': '<rootDir>/__mocks__/stylesManager.js'
    }
  }
  

  2. 在对应路径新建mock文件，导出需要的模拟方法即可。
• 方案4：Vitest用户直接在配置中注入全局变量
  如果你用的是Vitest，可以直接在测试配置中添加define字段注入publicPath：

  import { defineConfig } from 'vitest/config';
  
  export default defineConfig({
    test: {
      define: {
        __webpack_public_path__: '""'
      }
    }
  })
  

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