如何在浏览器环境下动态添加并重载Mocha测试文件？

问题说明 #

从Mocha文档中得知可通过HTML脚本标签引入测试文件，但从Blob加载测试文件时遇到以下问题：

• 调用mocha.addFile传入Blob时，报错「Arguments to path.resolve must be strings」
• 传入文件对象时，报错「Could not dynamically require」
• 重复添加脚本标签无法加载新测试用例

需要实现清除旧测试、加载新测试文件并运行的功能。

Mocha文档示例代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Mocha Tests</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
  </head>
  <body>
    <div id="mocha"></div>

    <script src="https://unpkg.com/chai/chai.js"></script>
    <script src="https://unpkg.com/mocha/mocha.js"></script>

    <script class="mocha-init">
      mocha.setup('bdd');
      mocha.checkLeaks();
    </script>
    <script src="test.array.js"></script>
    <script src="test.object.js"></script>
    <script src="test.xhr.js"></script>
    <script class="mocha-exec">
      mocha.run();
    </script>
  </body>
</html>

我的尝试代码 #

import { mocha } from 'mocha'

mocha.setup({
   asyncOnly: false,
   ui: 'bdd'
});

const urlTEst = new URL(path, import.meta.url);

let test = await fetch(urlTEst.pathname)
test = await test.blob()
let objectURL = window.URL.createObjectURL(test);

mocha.addFile(objectURL);
// 或
mocha.addFile(test);
mocha.checkLeaks()
mocha.run()

解决方案 #

1. 清除旧测试的核心逻辑 #

Mocha的所有测试用例和钩子都挂载在mocha.suite下，要彻底清除旧测试，需要重置该对象的核心属性：

function clearOldTests() {
  // 清空根suite的测试用例和子suite
  mocha.suite.suites = [];
  mocha.suite.tests = [];
  // 清空全局钩子函数
  mocha.suite.beforeAlls = [];
  mocha.suite.befores = [];
  mocha.suite.afters = [];
  mocha.suite.afterAlls = [];
  // 移除页面中已加载的测试脚本，并释放Blob URL
  document.querySelectorAll('script[data-test-file]').forEach(script => {
    if (script.src.startsWith('blob:')) {
      URL.revokeObjectURL(script.src);
    }
    script.remove();
  });
}

2. 从Blob加载测试文件的正确方式 #

mocha.addFile是Node.js专属API，浏览器环境不支持直接传入Blob。正确做法是将Blob转为可执行脚本插入页面：

async function loadTestFromBlob(blob) {
  // 先清除旧测试
  clearOldTests();
  
  // 生成Blob可访问URL
  const blobUrl = URL.createObjectURL(blob);
  
  // 创建脚本元素并标记，方便后续清理
  const script = document.createElement('script');
  script.src = blobUrl;
  script.dataset.testFile = 'true';
  
  // 等待脚本加载执行完成
  await new Promise((resolve, reject) => {
    script.onload = resolve;
    script.onerror = reject;
    document.body.appendChild(script);
  });
  
  // 运行新测试
  mocha.run();
}

3. 完整使用示例 #

// 初始化Mocha（只需执行一次）
mocha.setup({
  asyncOnly: false,
  ui: 'bdd'
});
mocha.checkLeaks();

// 重载测试的入口函数
async function reloadTests(testFilePath) {
  const testUrl = new URL(testFilePath, import.meta.url);
  const response = await fetch(testUrl);
  const testBlob = await response.blob();
  
  await loadTestFromBlob(testBlob);
}

// 调用示例：加载新的测试文件
reloadTests('./new-test-case.js');

关键注意点 #

• 浏览器环境禁用mocha.addFile，该API仅适用于Node.js端
• 每次加载新测试前必须重置mocha.suite，否则旧测试会残留
• 脚本插入后需等待加载完成再调用mocha.run()
• 记得释放Blob URL，避免内存泄漏

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