如何在浏览器中运行 mocha 测试？
[英]How do you run mocha tests in the browser?
问题描述
Is it just me, or does their documentation not explain how to run the tests in the browser at all?
只是我，还是他们的文档根本没有解释如何在浏览器中运行测试？
Do I have to create that HTML file that they show in the example?我是否必须创建他们在示例中显示的 HTML 文件？ How do I make it run my specific set of test cases for my project then?那么如何让它为我的项目运行我的特定测试用例集呢？
I want the same output as running mocha from project root.我想要与从项目根目录运行mocha相同的 output 。 All subdirectories inside the test folder need to be included test文件夹内的所有子目录都需要包含在内
4 个解决方案
解决方案1
40 2017-03-17 13:06:17
If we need to run our tests in a browser, we need to set up a simple HTML page to be our test runner page.如果我们需要在浏览器中运行我们的测试，我们需要设置一个简单的 HTML 页面作为我们的测试运行器页面。 The page loads Mocha, the testing libraries and our actual test files.该页面加载 Mocha、测试库和我们的实际测试文件。 To run the tests, we'll simply open the runner in a browser.要运行测试，我们只需在浏览器中打开运行器。
example html code :示例 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>
Setting up a Directory Structure设置目录结构
You should put your tests in a separate directory from your main code files.您应该将测试放在与主代码文件不同的目录中。 This makes it easier to structure them, for example if you want to add other types of tests in the future (such as integration tests or functional tests).这使得构建它们变得更容易，例如，如果您想在将来添加其他类型的测试（例如集成测试或功能测试）。
The most popular practice with JavaScript code is to have a directory called test/ in your project's root directory. JavaScript 代码最流行的做法是在项目的根目录中有一个名为 test/ 的目录。 Then, each test file is placed under test/someModuleTest.js.然后，每个测试文件都放在 test/someModuleTest.js 下。
Important things :重要的事 ：
- We load Mocha's CSS styles to give our test results nice formatting.我们加载 Mocha 的 CSS 样式来为我们的测试结果提供良好的格式。
- We create a div with the ID mocha.我们创建一个 ID 为 mocha 的 div。 This is where the test results are inserted.这是插入测试结果的地方。
- We load Mocha and Chai.我们加载 Mocha 和 Chai。 They are located in subfolders of the node_modules folder since we installed them via npm.它们位于 node_modules 文件夹的子文件夹中，因为我们是通过 npm 安装的。
- By calling mocha.setup, we make Mocha's testing helpers available.通过调用 mocha.setup，我们使 Mocha 的测试助手可用。
- Then, we load the code we want to test and the test files.然后，我们加载要测试的代码和测试文件。 We don't have anything here just yet.我们这里还没有任何东西。
- Last, we call mocha.run to run the tests.最后，我们调用 mocha.run 来运行测试。 Make sure you call this after loading the source and test files确保在加载源文件和测试文件后调用它
解决方案2
9 2017-03-17 12:48:26
I thought the documentation wasn't entirely clear too, but I figured it out eventually and got it set up.我认为文档也不完全清楚，但我最终想通了并进行了设置。 Here's how:就是这样：
Include the Mocha script and CSS in Index.html.在 Index.html 中包含 Mocha 脚本和 CSS。 Also include a div with id "Mocha" for the output to be inserted into.还包括一个 id 为“Mocha”的 div，用于要插入的输出。 Include the test script you'd like to execute.包括您要执行的测试脚本。
<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>
In your test file (my_mocha_test.js in this example) include this setup line at the top:在您的测试文件（本例中为 my_mocha_test.js）中，在顶部包含此设置行：
// 'bdd' stands for "behavior driven development"
mocha.setup('bdd');
Now with the test and the Mocha content all loaded, you can run the tests with this command:现在测试和 Mocha 内容都已加载，您可以使用以下命令运行测试：
mocha.run();
You can add that to an event listener and trigger it on a button push or other event, or you can just run it from the console, but it should put the test output in the div with the "mocha" id.您可以将它添加到事件侦听器并在按钮按下或其他事件上触发它，或者您可以从控制台运行它，但它应该将测试输出放在带有“mocha”ID 的 div 中。 Here's a page with all this set up with code viewable on GitHub for you to这是一个包含所有这些设置的页面，您可以在 GitHub 上查看代码
https://captainstack.github.io/public-stackhouse/ https://captainstack.github.io/public-stackhouse/
解决方案3
8 2019-06-06 12:38:43
My way to do it with:我的做法是：
ES6, import, export, chai ES6，导入，导出，柴
Used mocha 6.1.4 and chai 4.2.0.使用 mocha 6.1.4 和 chai 4.2.0。
src/MyClass.js:源代码/MyClass.js：
export default class MyClass { }
test/MyClass.js:测试/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());
});
});
});
test/index.html:测试/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>
The mocha.js and mocha.css files were created via mocha init test , but can also be found in node_modules/mocha. mocha.js 和 mocha.css 文件是通过mocha init test创建的，但也可以在 node_modules/mocha 中找到。
If this is improvable, let me know.如果这是可以改进的，请告诉我。 The answer is insprired by this post .答案受到这篇文章的启发。
解决方案4
6 2020-07-17 18:46:05
Here's the most basic chai/mocha test in the browser.这是浏览器中最基本的 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.