Jasmine+Karma中使用全局await致测试失败，如何配置解决？

问题场景 #

测试的业务模块中使用了顶层（全局）await：

import ...

const data = await fetch()...

编写的测试用例代码如下：

import ...
describe('模块测试', () => {
  // 测试逻辑
});

运行测试时Jasmine抛出错误：

An error was thrown in afterAll
Error: 'describe' should only be used in 'describe' function in node_modules/jasmine-core/lib/jasmine-core/jasmine.js (line 1811)

问题：该报错的原因是什么？如何配置Karma解决这个问题？

报错原因分析 #

这个报错的核心原因是顶层await让模块变成了异步模块，而Jasmine的测试定义流程是同步执行的：Jasmine会先扫描所有describe、it等测试定义函数，完成测试套件的初始化；但异步模块的加载会延迟执行，导致describe在Jasmine的初始化上下文之外被调用，触发了Jasmine的内置规则——不允许在describe函数外部（或非测试定义流程中）调用describe。

解决方法 #

1. 配置构建工具支持顶层await #

如果使用Webpack作为Karma的预处理器，需要确保Webpack和Babel配置支持顶层await：

• 修改webpack.config.js：

module.exports = {
  target: 'web', // 确保目标环境支持浏览器端ES模块
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: 'defaults', modules: false }]],
            plugins: ['@babel/plugin-syntax-top-level-await'] // 开启顶层await语法支持
          }
        }
      }
    ]
  }
};

• 在karma.conf.js中引入Webpack配置：

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    files: ['src/**/*.test.js'],
    preprocessors: {
      'src/**/*.test.js': ['webpack']
    },
    webpack: require('./webpack.config.js'),
    browsers: ['ChromeHeadless'] // 使用支持ES模块的浏览器
  });
};

2. 调整测试文件的模块导入方式 #

不要在测试文件的顶层直接导入含顶层await的模块，而是把模块导入放在beforeAll或it的异步回调中，确保测试定义流程先完成：

describe('含顶层await的模块测试', () => {
  let targetModule;

  // 异步导入模块，等待模块加载完成再执行测试
  beforeAll(async () => {
    targetModule = await import('../path/to/target-module.js');
  });

  it('验证模块功能', () => {
    expect(targetModule.getData()).toBeDefined();
  });
});

3. 临时禁用Jasmine的规则校验（不推荐） #

如果上述方案无法快速落地，可以临时关闭Jasmine的相关校验，但这会绕过Jasmine的上下文检查，可能引发其他测试问题：
在测试入口文件中添加：

// 关闭Jasmine的保留字/上下文校验
jasmine.getEnv().allowReservedWords = true;

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