如何正确地使用Karma加载WASM模块？

Question

我正在处理一个TypeScript库(让我们称之为myLib)，它依赖于npm包(让我们称之为@mypackage/lib)，然后使用.wasm文件。基本上，在我的代码中，我只是导入这个库并按如下方式使用它：

import * as Wasm from '@mypackage/lib';
export function doSomething(): string => Wasm.do_something();

安装@mypackage/lib时，.wasm文件已经出现在node_modules/@mypackage/lib下，因此不需要编译它。

我使用webpack创建了一个用于测试myLib的示例web应用程序。它包含index.ts文件：

import { doSomething } from 'myLib'
const v = doSomething();
console.log(v);

以及加载index.ts的index.ts文件。

import('./index.ts')
  .catch(e => console.error("Error importing `index.ts`:", e));

在这个示例应用程序中，一切都正常工作，没有任何问题。

现在，我想用卡玛和摩卡写测试。我不能只使用mocha和nodejs进行测试，因为来自@mypackage/lib的@mypackage/lib是在浏览器上编译的。问题是，当试图在Karma下运行相同的doSomething()函数时，我得到以下异常：

TypeError: wasm.__wbindgen_add_to_stack_pointer is not a function

我唯一能找到的关于Karma + WASM的资源是此链接，它没有帮助我。我还找到了这个项目，它使用Karma运行测试，这些测试显然调用了WASM对象的函数，但我无法理解这是如何工作的。从测试来看，来自WASM文件的对象似乎是全局的，但我看不出这会有什么区别。

这是我的karma.conf.js文件：

module.exports = function(config) {
  config.set({
    frameworks: ['mocha', 'karma-typescript'],
    files: [
      'spec/**/*.ts',
      'src/**/*.ts'
    ],
    exclude: [
    ],
    preprocessors: {
      '**/*.ts': ['karma-typescript']
    },
    reporters: ['progress', 'karma-typescript'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    karmaTypescriptConfig: {
      compilerOptions: {
        module: 'CommonJS',
        target: 'ES6',
        declaration: true,
        sourceMap: true,
        strict: true,
        moduleResolution: 'node',
      },
      exclude: [
        'dist',
        'node_modules'
      ],
      bundlerOptions: {
        transforms: [require("karma-typescript-es6-transform")({
          presets: [require("@babel/preset-env")],
          plugins: ["@babel/transform-runtime"]
      })],
      }
    },
    singleRun: false,
    concurrency: Infinity
  })
}

这些是我目前的依赖关系：

"devDependencies": {
    "@babel/plugin-transform-runtime": "^7.15.8",
    "@types/chai": "^4.2.22",
    "@types/mocha": "^9.0.0",
    "@types/node": "^16.9.2",
    "chai": "^4.3.4",
    "karma": "^6.3.4",
    "karma-chrome-launcher": "^3.1.0",
    "karma-mocha": "^2.0.1",
    "karma-typescript": "^5.5.2",
    "karma-typescript-es6-transform": "^5.5.2",
    "mocha": "^9.1.2"
  }

Answer 1

我只是在业力测试dir中创建一个临时dir，并将wasm文件复制到其中。将wasm文件路径添加到业力配置的files和proxies中。