使用Jasmine与Headless Chrome时Window对象无法访问全局函数

我之前也碰到过一模一样的情况——明明模块能通过require获取，但挂载在window上的全局函数就是找不到，甚至console.info都打不出预期的函数定义。咱们一步步来排查解决：

1. 先确认你的模块代码逻辑 #

首先得确保你的add-numbers-together.js确实在执行时把函数挂载到了window上，比如代码是不是类似这样：

// add-numbers-together.js
function addNumbersTogether(a, b) {
  return a + b;
}
// 关键：挂载到window全局对象
window.addNumbersTogether = addNumbersTogether;

如果你的模块是用条件判断（比如只在浏览器环境才挂载），那得检查测试环境是否触发了这个条件——Headless Chrome本质是浏览器环境，理论上没问题，但还是要确认。

2. 调整Karma的文件加载配置 #

很多时候问题出在Karma的文件加载顺序上：如果你的测试文件先加载，模块后加载，那测试执行时函数还没挂载到window上。

修改你的karma.conf.js，确保模块文件先于测试文件被加载：

module.exports = function(config) {
  config.set({
    // 先加载模块，让它完成window挂载
    files: [
      './src/add-numbers-together.js',
      './tests/add-numbers-together.spec.js'
    ],
    // 如果用了webpack等预处理器，也要对应配置
    preprocessors: {
      './src/add-numbers-together.js': ['webpack'],
      './tests/add-numbers-together.spec.js': ['webpack']
    },
    // 其他配置（比如frameworks、browsers等）...
  });
};

如果你用Webpack打包模块，还可以在webpack.config.js里显式指定输出到全局：

module.exports = {
  output: {
    libraryTarget: 'window', // 把模块导出到window对象
    library: 'addNumbersTogether' // 指定全局变量名
  }
};

3. 在测试中显式访问全局对象 #

有时候测试环境里的window可能被沙箱封装，试试直接打印全局对象，或者用globalThis（现代浏览器支持）来确认函数是否存在：

// add-numbers-together.spec.js
require('../src/add-numbers-together.js');

describe('addNumbersTogether', () => {
  it('should be accessible on the global window object', () => {
    // 打印全局对象，确认函数是否存在
    console.info('Global window:', window);
    console.info('addNumbersTogether function:', window.addNumbersTogether);
    
    // 用expect断言验证
    expect(window.addNumbersTogether).toBeDefined();
    expect(typeof window.addNumbersTogether).toBe('function');
  });
});

如果还是找不到，试试用Jasmine提供的jasmine.getGlobal()方法获取全局上下文：

const globalContext = jasmine.getGlobal();
expect(globalContext.addNumbersTogether).toBeDefined();

4. 检查Headless Chrome的沙箱限制 #

Headless Chrome默认的沙箱模式可能会限制全局对象的访问，你可以在Karma配置里关闭沙箱试试：

module.exports = function(config) {
  config.set({
    browsers: ['ChromeHeadlessNoSandbox'],
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox', '--disable-setuid-sandbox']
      }
    },
    // 其他配置...
  });
};

最后总结 #

最常见的原因就是模块加载顺序不对，或者Webpack等打包工具没把模块导出到全局。按照上面的步骤排查，应该就能解决问题了。

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