Chrome浏览器中使用import模块时Mocha测试用例无法执行

核心问题 #

Chrome严格遵循ES模块的异步加载机制：你的测试脚本被标记为type="module"，会异步加载执行，但页面中的mocha.run()是同步执行的——在测试模块加载完成、测试用例定义完成前就启动了Mocha，导致Mocha检测不到任何测试用例。而Safari的模块加载时序处理存在差异，测试定义会在Mocha启动前完成，因此能正常运行。

解决方案 #

有两种可行的修改方式：

方式一：在测试模块末尾启动Mocha #

修改测试规范文件（如SampleSpec.ts），在测试用例定义完成后调用mocha.run()：

import { SampleClass } from "../src/index.js";
var expect = chai.expect;
var assert = chai.assert;

describe("Sample", () => {
  it("says hello", () => {
    console.log("Inside it block");
    const sample = new SampleClass();
    const result = "Hello";
    expect(result).to.equal(sample.sayHello()); // 注意：原代码未调用sayHello函数，这里修正
  });
});

// 测试定义完成后启动Mocha
mocha.run();

同时调整index.html，移除原有的mocha.run()脚本块，仅保留Mocha初始化代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/chai@4.2.0/chai.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mocha@10.2.0/mocha.js"></script>
  </head>
  <body>
    <div id="mocha"></div>
    <script>
      mocha.setup("bdd");
    </script>
    <script type="module" src="../test/SampleSpec.js"></script>
  </body>
</html>

方式二：用动态导入确保模块加载完成后启动Mocha #

在index.html中通过async/await动态导入测试模块，确保模块加载完成后再启动Mocha：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/chai@4.2.0/chai.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mocha@10.2.0/mocha.js"></script>
  </head>
  <body>
    <div id="mocha"></div>
    <script>
      mocha.setup("bdd");
      // 动态导入测试模块，加载完成后启动Mocha
      async function runTests() {
        await import("../test/SampleSpec.js");
        mocha.run();
      }
      runTests();
    </script>
  </body>
</html>

额外修正点 #

原测试代码存在一处逻辑错误：sample.sayHello是函数引用，需要调用它获取返回值（即sample.sayHello()），否则断言会始终失败。

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