Question

只是我，或their documentation没有解释如何在浏览器中运行测试？

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

我希望从项目根目录运行mocha的输出相同。需要包含test文件夹中的所有子目录

Answer 1

如果我们需要在浏览器中运行测试，我们需要设置一个简单的HTML页面作为我们的测试运行页面。该页面加载了Mocha，测试库和我们的实际测试文件。要运行测试，我们只需在浏览器中打开跑步者。

示例html代码：

$category_id

设置目录结构

您应该将测试放在与主代码文件不同的目录中。这样可以更容易地构建它们，例如，如果您希望将来添加其他类型的测试（例如集成测试或功能测试）。

使用JavaScript代码最流行的做法是在项目的根目录中有一个名为test /的目录。然后，每个测试文件都放在test / someModuleTest.js。

下

重要的事情：

我们加载Mocha的CSS样式，以便为我们的测试结果提供良好的格式化。
我们使用ID mocha创建一个div。这是测试结果的地方插入。
我们加载摩卡和柴。它们位于。的子文件夹中 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

这是浏览器中最基本的chai / mocha测试。

const chai = window.chai;
const mocha = window.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>

Answer 4

我的处理方式：

ES6，导入，导出，柴

使用了摩卡6.1.4和chai 4.2.0。

src / MyClass.js：

export default class MyClass { }

test / 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：

<!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测试？

4 个答案:

ES6，导入，导出，柴