只是我，还是他们的文档根本没有解释如何在浏览器中运行测试？
我是否必须创建他们在示例中显示的 HTML 文件？我如何让它为我的项目运行我的特定测试用例集？
我想要与mocha从项目根目录运行相同的输出。test文件夹内的所有子目录都需要包含
你如何在浏览器中运行 mocha 测试？
IT技术
javascript
reactjs
mocha.js
2021-05-11 04:06:16
4个回答
如果我们需要在浏览器中运行我们的测试，我们需要设置一个简单的 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 下。
重要的事 ：
- 我们加载 Mocha 的 CSS 样式，以便为我们的测试结果提供良好的格式。
- 我们创建一个 ID 为 mocha 的 div。这是插入测试结果的地方。
- 我们加载 Mocha 和 Chai。它们位于 node_modules 文件夹的子文件夹中，因为我们是通过 npm 安装的。
- 通过调用 mocha.setup，我们使 Mocha 的测试助手可用。
- 然后，我们加载要测试的代码和测试文件。我们这里还没有任何东西。
- 最后，我们调用 mocha.run 来运行测试。确保在加载源文件和测试文件后调用它
我认为文档也不完全清楚，但我最终想通了并设置了它。就是这样：
在 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 上查看代码
我的做法是：
ES6，导入，导出，柴
使用 mocha 6.1.4 和 chai 4.2.0。
源代码/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 中找到。
如果这是可以改进的，请告诉我。答案受到这篇文章的启发。
这是浏览器中最基本的 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>其它你可能感兴趣的问题