在进行前端项目开发时，尤其是在使用javascript es模块（import/export）来组织代码结构时，开发者可能会遇到一个令人困惑的问题：当在浏览器中运行mocha chai单元测试时，describe块中的逻辑似乎正常执行（例如，console.log会输出），但其内部的it测试块却完全不运行，且浏览器控制台没有任何错误提示。这使得调试变得异常困难，因为没有明确的错误信息可以指引方向。
典型的场景是，项目代码（如Card.js, Deck.js, Player.js, War.js等）和对应的单元测试文件（如CardTest.js, DeckTest.js, PlayerTest.js等）都以ES模块的形式导出和导入。测试通过一个tests.html文件在浏览器中加载并执行。
以下是一个简化后的tests.html和CardTest.js示例，展示了出现问题时的结构：
tests.html (问题版本):
<html>
<head>
<link rel="stylesheet" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id="mocha"><p><a href=".">Index</a></p></div>
<div id="messages"></div>
<div id="fixtures"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<!-- 业务模块 -->
<script type="module" src="Scripts/Card.js"></script>
<script type="module" src="Scripts/Deck.js"></script>
<script type="module" src="Scripts/Player.js"></script>
<script type="module" src="Scripts/War.js"></script>
<script>mocha.setup('bdd')</script>
<!-- 测试模块 -->
<script type="module" src="UnitTests/CardTest.js"></script>
<script type="module" src="UnitTests/DeckTest.js"></script>
<script type="module" src="UnitTests/PlayerTest.js"></script>
<script>mocha.run();</script> <!-- 注意：这里是普通脚本 -->
</body>
</html>CardTest.js:
立即学习“Java免费学习笔记（深入）”；
var expect = chai.expect;
import Card from '../Scripts/Card.js';
describe('Card Functions', () => {
describe('Constructor', () => {
console.log("Inside card describe constructor"); // 此处会输出
let card = new Card("Club", "King", 13);
it('Should create the card with the value of the card\'s suit equal to param 0', () => {
console.log("test1"); // 此处不会输出
expect(card._suit).to.equal("Club");
});
// ... 其他 it 块
});
});在这种配置下，console.log("Inside card describe constructor");会正常输出，表明describe块中的代码被执行了。然而，it块内部的console.log("test1");却没有任何输出，Mocha界面也显示没有运行任何测试。
要解决这个问题，首先需要理解浏览器中普通<script>标签和<script type="module">标签的执行机制差异：
普通 <script> 标签：
<script type="module"> 标签：
结合Mocha的工作原理，问题的原因就浮出水面了：
Mocha在执行测试时，需要先通过describe函数注册所有的测试套件和测试用例（it块）。当mocha.run()被调用时，它会开始执行所有已经注册的测试。
在上述有问题的tests.html中：
这就导致了一个时序问题：当mocha.run()被调用时，所有的type="module"测试文件（CardTest.js等）可能还没有完全加载并执行完毕，因此它们内部的describe和it块都还没有来得及向Mocha注册。mocha.run()在此时发现没有任何测试可运行，便直接结束了执行，从而造成了it块不运行的现象。
尽管describe块中的console.log可能有时会输出，那是因为describe函数本身在模块解析时就会被调用，但it块的注册和实际执行是两回事。更准确地说，describe函数在模块被解析和执行时，会立即向Mocha注册其内部的测试结构。如果mocha.run()在此之前被调用，即使describe的注册逻辑已经执行，Mocha也可能无法正确捕获这些信息。关键在于，mocha.run()需要等待所有模块脚本都执行完毕，确保所有describe块都已完成注册。
解决这个问题的关键在于确保mocha.run()在所有type="module"的测试文件都加载并执行完毕后才被调用。最简单有效的方法是，将mocha.run()也放置在一个type="module"的脚本块中。
当mocha.run()被包含在一个type="module"的脚本块中时，它会遵循模块脚本的加载和执行规则：它将与其他模块脚本一起被延迟执行，并且浏览器会确保所有在其之前定义的模块脚本都已加载并执行完毕，包括所有的测试文件。这样，当mocha.run()最终被调用时，所有的describe和it块都已经被正确地注册到Mocha中，测试就能正常运行了。
tests.html (修正版本):
<html>
<head>
<link rel="stylesheet" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id="mocha"><p><a href=".">Index</a></p></div>
<div id="messages"></div>
<div id="fixtures"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<!-- 业务模块 -->
<script type="module" src="Scripts/Card.js"></script>
<script type="module" src="Scripts/Deck.js"></script>
<script type="module" src="Scripts/Player.js"></script>
<script type="module" src="Scripts/War.js"></script>
<script>mocha.setup('bdd')</script>
<!-- 测试模块 -->
<script type="module" src="UnitTests/CardTest.js"></script>
<script type="module" src="UnitTests/DeckTest.js"></script>
<script type="module" src="UnitTests/PlayerTest.js"></script>
<script type="module"> // 将 mocha.run() 放在 type="module" 脚本块中
mocha.run();
</script>
</body>
</html>通过这一简单的修改，mocha.run()的执行被推迟到所有模块脚本都已处理完毕之后，从而确保Mocha能够发现并运行所有的it测试块。
通过理解ES模块的执行机制并正确安排mocha.run()的调用时机，可以有效解决Mocha Chai单元测试在浏览器中不运行it块的问题，从而确保测试的可靠性和开发效率。
以上就是解决JavaScript Mocha Chai单元测试中ES模块不运行的问题的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
400
收藏
