使用Mochatesting框架的HTML报告

我一直在使用NodeJS和Mocha生成一些testing,我想find一种方法将结果放到浏览器中。 我知道摩卡支持使用'html'记者和mocha init <dir>但是这两者似乎都不适合我(记者实际上甚至没有运行testing就抛出错误)。

有人能给我一个通过Mocha运行testing并生成HTML报告的好例子吗?我想模仿的一个例子是在visionmedia网站上。 另外,为了例子,我们会说我正在使用名为example.js的testing文件。

在此先感谢您的帮助,但令人惊讶的是这里有很less的例子。

要让Mocha在浏览器和terminal中运行testing,请按照以下小教程进行操作:

我假设一个正常的node.js摩卡testing套件的以下插件。

  1. Node.js的
  2. 摩卡

和下面的树结构:

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

的index.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> 

testing/ my_something_spec.js

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

使用一个简单的python服务器python -m SimpleHTTPServer 8080从根目录访问localhost:8080将会给你一个很好的和失败的testing。 从terminal运行摩卡会给你相同的输出, expect没有定义。

您尝试使用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 

根据摩卡文档 (和Github中的相关问题 ), html记者只能在浏览器中工作,即。 在浏览器中testing客户端代码。

如果您想要为Node.jstesting脚本输出HTML,请使用doc记者 ,它将生成HTML。

我喜欢根据情况通过Node.js 浏览器testing相同的代码。 我知道你要求“把结果放到浏览器中”(来自Node.js?),但我希望这样做就足够了。

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

你不需要一个networking服务器(Node.js或其他)来工作。

要在浏览器中运行testing,请打开./test/index.html文件。

要在命令行中运行testing,只需执行“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 

初始化将保存所有testing的目录。 总是称之为“testing”:

 C:\TEMP\mocha_node_browser>mocha init test 

编辑和/或创build一些文件:

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

我用柴。 两个testing中都会使用相同的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 .. 

创build/编辑文件后,通过命令行运行testing:

 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和您想要testing的源代码添加到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> 

使您的testing与命令行浏览器兼容

 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!"); }); });