将 HTML 报告与 Mocha 测试框架结合使用

Using HTML reporting with Mocha test framework

本文关键字：框架 结合 测试 Mocha HTML 报告      更新时间：2023-09-26

我一直在使用 NodeJS 和 Mocha 生成一些测试，我想找到一种方法将结果放入浏览器中。我知道 Mocha 使用"html"报告器支持此功能，mocha init <dir>但似乎都不适合我（报告器实际上甚至没有运行测试就抛出了错误）。

有人可以给我一个通过摩卡运行测试并生成 HTML 报告的好例子吗？我想模仿的一个例子是在visionmedia网站上。另外，为了举例起见，我们会说我正在使用一个名为 example.js 的测试文件。

提前感谢您的任何帮助，令人惊讶的是，周围的例子如此之少。

您尝试使用 html 报告器，当您尝试在 Node 中使用它时，它会抛出：

$ mocha --reporter html > report.html
/usr/local/lib/node_modules/mocha/lib/reporters/html.js:194
    , div = document.createElement('div')
            ^
ReferenceError: document is not defined

根据 Mocha 文档（以及 Github 中的相关问题），html报告器只能在浏览器中工作，即在浏览器中测试客户端代码。

如果要为 Node.js 测试脚本输出 HTML，请使用将生成 HTML 的doc报告器。

要让 Mocha 在浏览器和终端中运行您的测试，请按照以下小教程操作：

我假设以下插件适用于普通节点.js摩卡测试套件。

  1. 节点.js
  2. 摩卡

以及以下树结构：

/root
  /test
    my_something_spec.js
  /javascript
  index.html

索引.html

免责声明：我公然放弃了各种最佳实践，但只是为了给你指出正确的方向。

<html>
<head>
    <meta charset="utf-8">
    <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>mocha.setup('bdd')</script>
    <script src="test/my_something_spec.js"></script>
    <script>
        mocha.checkLeaks();
        mocha.run();
    </script>
</body>
</html>

测试/my_something_spec.js

describe("my function", function() {
  it("is a function", function() {
    expect(true).to.be(true);
  });
});

使用从根目录和访问localhost:8080 python -m SimpleHTTPServer 8080的简单 python 服务器来提供此功能将为您提供一个漂亮且失败的测试。从终端运行摩卡会给你相同的输出，expect没有定义。

我喜欢通过 Node 和浏览器测试相同的代码.js具体取决于情况。 我知道您要求"将结果放入浏览器中"（来自 Node.js？），但我希望这足够了。

这个例子是在Windows机器上创建的，但它也可以在Mac和Linux上运行。

您不需要Web服务器（Node.js或其他）即可正常工作。

若要在浏览器中运行测试，请打开 ./test/index.html 文件。

要在命令行中运行测试，只需执行"mocha"。

从零开始：

C:'TEMP>mkdir mocha_node_browser
C:'TEMP>cd mocha_node_browser
C:'TEMP'mocha_node_browser>dir
Volume in drive C is MessedUp
Volume Serial Number is CAB2-E609
Directory of C:'TEMP'mocha_node_browser
2014-08-09  12:17    <DIR>          .
2014-08-09  12:17    <DIR>          ..
               0 File(s)              0 bytes
               2 Dir(s)  287,218,769,920 bytes free

初始化将保存所有测试的目录。 始终将其称为"测试"：

C:'TEMP'mocha_node_browser>mocha init test

编辑和/或创建一些文件：

C:'TEMP'mocha_node_browser>gvim -p test_me.js test'index.html test'tests.js

我用柴。 两个测试中将使用相同的 chai.js 文件。 

C:'TEMP'mocha_node_browser>cd test
C:'TEMP'mocha_node_browser'test>curl -O http://chaijs.com/chai.js
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  117k  100  117k    0     0  99902      0  0:00:01  0:00:01 --:--:-- 99902
C:'TEMP'mocha_node_browser'test>cd ..

创建/编辑文件后，通过命令行运行测试：

C:'TEMP'mocha_node_browser>mocha
  .
  1 passing (15ms)

。或将浏览器指向 ./test/index.html。

passes: 1
failures: 0
duration: 0.03s
whatever
    should return "it worked!"

文件内容：

C:'TEMP'mocha_node_browser>type test_me.js
// the function to be tested
function whatever() {
  return 'it worked!';
}
// only kicks in when running in Node.js via "mocha"
if (typeof module !== 'undefined') {
  module.exports = whatever;
}

将 Chai 和要测试的源添加到 test/index.html：

C:'TEMP'mocha_node_browser>type test'index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Mocha</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mocha.css" />
  </head>
  <body>
    <div id="mocha"></div>
    <script src="mocha.js"></script>
    <script>mocha.setup('bdd')</script>
    <!-- added to index.html: -->
    <script src="./chai.js"></script>
    <script src="../test_me.js"></script>
    <script src="tests.js"></script>
    <script>
      mocha.run();
    </script>
  </body>
</html>

使测试与命令行和浏览器兼容

C:'TEMP'mocha_node_browser>type test'tests.js
if (typeof require !== 'undefined') {
  // testing in command-line
  var chai = require('./chai');
  var whatever = require('../test_me');
}
var expect = chai.expect;
describe('whatever', function() {
  it('should return "it worked!"', function() {
    expect(whatever()).to.equal("it worked!");
  });
});
相关文章：