如何在浏览器中运行 mocha 测试？

Question

只是我，还是他们的文档根本没有解释如何在浏览器中运行测试？

我是否必须创建他们在示例中显示的 HTML 文件？ 那么如何让它为我的项目运行我的特定测试用例集呢？

我想要与从项目根目录运行mocha相同的 output 。 test文件夹内的所有子目录都需要包含在内

Answer 1

如果我们需要在浏览器中运行我们的测试，我们需要设置一个简单的 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 来运行测试。 确保在加载源文件和测试文件后调用它

Answer 2

我认为文档也不完全清楚，但我最终想通了并进行了设置。 就是这样：

在 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 上查看代码

https://captainstack.github.io/public-stackhouse/

Answer 3

我的做法是：

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 中找到。

如果这是可以改进的，请告诉我。 答案受到这篇文章的启发。

Answer 4

这是浏览器中最基本的 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>

如何在浏览器中运行 mocha 测试？

问题描述

4 个解决方案

解决方案1
40 2017-03-17 13:06:17

解决方案2
9 2017-03-17 12:48:26

解决方案3
8 2019-06-06 12:38:43

ES6，导入，导出，柴

解决方案4
6 2020-07-17 18:46:05

如何在浏览器中运行 mocha 测试？

问题描述

4 个解决方案

解决方案1 40 2017-03-17 13:06:17

解决方案2 9 2017-03-17 12:48:26

解决方案3 8 2019-06-06 12:38:43

ES6，导入，导出，柴

解决方案4 6 2020-07-17 18:46:05

解决方案1
40 2017-03-17 13:06:17

解决方案2
9 2017-03-17 12:48:26

解决方案3
8 2019-06-06 12:38:43

解决方案4
6 2020-07-17 18:46:05