如何在Karma测试中引入外部库？部分库编译时this被替换为undefined怎么办

问题原因 #

该问题本质是你的编译链路（通常是配合Karma使用的webpack/babel等工具）将第三方库默认判定为ES模块，严格模式下顶层this会被转译为undefined，而你用到的异常库多为UMD格式，依赖顶层this指向window/全局对象来挂载导出内容。

解决方法 #

• 调整打包工具的转译排除规则：如果你使用babel-loader，确保在配置的exclude规则中覆盖node_modules目录，或者单独将出问题的第三方库加入排除列表，避免工具转译库的原生源码：

  // webpack配置示例
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除所有node_modules下的代码不转译
        use: ['babel-loader']
      }
    ]
  }
  

• 直接引入库的预编译产物：在karma.conf.js的files配置项中，直接引入库dist目录下已经打包完成的UMD/IIFE格式产物，不要引入库的源码文件，避免二次编译修改原有this指向：

  // karma.conf.js配置示例
  module.exports = function(config) {
    config.set({
      files: [
        'node_modules/问题库名/dist/问题库名.min.js', // 直接引入预编译产物
        'test/**/*.spec.js'
      ]
    })
  }
  

• 调整全局对象指向配置：如果必须转译该库，可在webpack配置中添加output.globalObject = 'this'，或者针对该库关闭严格模式转译，避免顶层this被替换。

补充说明 #

这类依赖顶层this的第三方库完全可以正常引入Karma测试中，只要调整编译配置避开转译问题即可正常运行。

内容的提问来源于stack exchange，提问作者v.slobodzian