如何在Karma测试环境中正确加载WASM模块？

错误根因 #

该报错的核心原因是karma-typescript没有内置WASM文件加载、初始化的处理逻辑，无法正确完成WASM实例的绑定，导致__wbindgen_add_to_stack_pointer这类WASM胶水层函数没有挂载到导出对象上。你之前的webpack示例可以正常运行，是因为webpack 5+默认内置了WASM加载能力，会自动完成异步初始化、实例导出挂载的完整流程。

解决方案 #

建议直接替换karma-typescript为karma-webpack，复用已经验证可行的webpack打包逻辑来处理测试代码，避免环境差异问题，操作步骤如下：

1. 安装必要依赖

npm install --save-dev webpack ts-loader karma-webpack copy-webpack-plugin

2. 替换karma.conf.js配置

const CopyPlugin = require("copy-webpack-plugin");

module.exports = function(config) {
  config.set({
    frameworks: ['mocha', 'webpack'],
    files: [
      'spec/**/*.ts',
      'src/**/*.ts'
    ],
    preprocessors: {
      '**/*.ts': ['webpack']
    },
    webpack: {
      mode: 'development',
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
          }
        ]
      },
      resolve: {
        extensions: ['.tsx', '.ts', '.js']
      },
      experiments: {
        asyncWebAssembly: true
      },
      plugins: [
        new CopyPlugin({
          patterns: [
            { from: "node_modules/@mypackage/lib/*.wasm", to: "[name][ext]" }
          ],
        })
      ]
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}

3. 适配WASM异步初始化逻辑
   由于WASM初始化是异步操作，需要在测试启动前等待WASM加载完成，在测试文件顶部添加如下钩子即可：

before(async () => {
  // 预加载WASM依赖，等待初始化完成
  await import('@mypackage/lib');
});

如果@mypackage/lib对外暴露了单独的初始化Promise，直接await对应的初始化方法即可。

内容的提问来源于stack exchange，提问作者Pedro Martins Timóteo da Costa