只是我，还是their documentation 根本没有解释如何在浏览器中运行测试？
我必须创建他们在示例中显示的那个 HTML 文件吗？那么如何让它为我的项目运行我的特定测试用例集呢？
我想要与从项目根目录运行 mocha 相同的输出。需要包含test 文件夹内的所有子目录
【问题讨论】：
标签： javascript reactjs mocha.js
如果我们需要在浏览器中运行我们的测试，我们需要设置一个简单的 HTML 页面作为我们的测试运行器页面。该页面加载 Mocha、测试库和我们的实际测试文件。要运行测试，我们只需在浏览器中打开运行器。
示例 html 代码：
<!DOCTYPE html>
<html>
<head>
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script>mocha.setup('bdd')</script>
<!-- load code you want to test here -->
<!-- load your test files here -->
<script>
mocha.run();
</script>
</body>
</html>
设置目录结构
您应该将测试放在与主代码文件不同的目录中。这样可以更轻松地构建它们，例如，如果您想在将来添加其他类型的测试（例如集成测试或功能测试）。
JavaScript 代码最流行的做法是在项目的根目录中创建一个名为 test/ 的目录。然后，将每个测试文件放在 test/someModuleTest.js 下。
重要的事情：
【讨论】：
/node_modules 中没有 Chai，猜测它并不总是默认安装。
我认为文档也不完全清楚，但我最终想通了并设置了它。方法如下：
在 Index.html 中包含 Mocha 脚本和 CSS。还包括一个 id 为“Mocha”的 div，用于插入输出。包括您要执行的测试脚本。
<link href="lib/mocha/mocha.css" rel="stylesheet" />
<script src="lib/mocha/mocha.js"></script>
<script src="test/my_mocha_test.js"></script>
<div id="mocha"></div>
在您的测试文件（本例中为 my_mocha_test.js）的顶部包含此设置行：
// 'bdd' stands for "behavior driven development"
mocha.setup('bdd');
现在测试和 Mocha 内容都已加载完毕，您可以使用以下命令运行测试：
mocha.run();
您可以将它添加到事件侦听器并在按钮按下或其他事件上触发它，或者您可以从控制台运行它，但它应该将测试输出放在带有“mocha”id 的 div 中。这是一个包含所有这些设置的页面，您可以在 GitHub 上查看代码
【讨论】：
test 目录及其子目录中的所有内容？
我的做法：
使用 mocha 6.1.4 和 chai 4.2.0。
src/MyClass.js:
export default class MyClass { }
测试/MyClass.js：
import MyClass from "../src/MyClass.js";
let assert = chai.assert;
describe('MyClass tests', function () {
describe('The class', function () {
it('can be instantiated', function () {
assert.isObject(new MyClass());
});
});
});
测试/index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mocha</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mocha.css">
<script src="mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script type="module" class="mocha-init">
mocha.setup('bdd');
</script>
<!-- ------------------------------------ -->
<script type="module" src="test.js"></script>
<!-- ------------------------------------ -->
<script type="module">
mocha.run();
</script>
</head>
<body>
<div id="mocha"></div>
</body>
</html>
mocha.js 和 mocha.css 文件是通过 mocha init test 创建的，但也可以在 node_modules/mocha 中找到。
如果这可以改进，请告诉我。答案来自this post。
【讨论】：
mocha.run() 移动到window.addEventListener('load', function() { mocha.run(); }) 中，问题就解决了。这是一个正确的解决方案吗？
这是浏览器中最基本的 chai/mocha 测试。
mocha.setup('bdd');
describe('test', () => {
it('passes', () => {
chai.expect(1).to.eql(1);
});
it('fails', () => {
chai.expect(1).to.eql(2);
});
});
mocha.run();<div id="mocha" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.0.1/mocha.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>【讨论】：