WebAssembly+Jest+Webpack集成测试：Wasm模块加载失败排查

原因分析 #

• wasm-pack --target bundler打包生成的Rust模块JS文件为ES模块格式，使用import/export语法。Jest默认以CommonJS模块规则解析代码，即便启用--experimental-vm-modules，若未针对性配置ES模块与Wasm的处理规则，就会触发SyntaxError: Cannot use import statement outside a module错误。
• Webpack生产环境能正常运行，是因为Webpack会统一处理所有模块（ES模块、Wasm模块）并打包为兼容格式，但Jest的内存打包/模块解析逻辑与Webpack完全独立，不会自动适配Wasm模块的导入流程。

解决办法 #

1. 配置Jest支持ES模块与Wasm #

在项目根目录创建或修改jest.config.js：

export default {
  extensionsToTreatAsEsm: ['.ts', '.js'],
  moduleNameMapper: {
    '^rust_module$': '<rootDir>/src/rust_module/pkg/rust_module.js'
  },
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
    '^.+\\.js$': 'babel-jest'
  },
  testEnvironment: 'jsdom' // 针对浏览器环境代码，Node环境可设为'node'
};

安装必要依赖：

npm install -D ts-jest babel-jest @babel/preset-env

创建babel.config.json配置Babel转换ES模块：

{
  "presets": [["@babel/preset-env", {"targets": {"node": "current"}}]]
}

2. 模拟Wasm模块（快速测试） #

若无需测试Wasm模块本身，仅测试依赖它的业务代码，可通过jest.mock模拟Wasm导出的方法：

jest.mock('rust_module', () => ({
  add: (a: number, b: number) => a + b
}));

import { addFiveSix } from './your-business-code';

test('addFiveSix returns correct value', () => {
  expect(addFiveSix()).toBe(11);
});

3. 使用Wasm专用Jest环境（可选） #

安装支持Wasm的Jest环境包：

npm install -D jest-environment-wasm

在jest.config.js中全局配置：

export default {
  testEnvironment: 'wasm'
};

或在单个测试文件顶部添加注释指定环境：

/** @jest-environment wasm */

import { add } from 'rust_module';
import { addFiveSix } from './your-business-code';

test('add function works', () => {
  expect(add(5,6)).toBe(11);
});

Webpack打包产物作为Jest测试入口的可行性 #

可以，但不推荐：

• 打包后的bundle是生产环境的整合代码，难以单独测试单个函数，调试定位问题成本高。
• 若要尝试，直接导入dist目录下的打包文件即可，但需在jest.config.js中添加transformIgnorePatterns忽略对打包文件的转换，避免Jest重复处理导致错误。

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