javascript 在 Mocha 测试框架中使用 HTML 报告
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19974122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using HTML reporting with Mocha test framework
提问by whitfin
I've been generating some tests using NodeJS and Mocha, and I'd like to find a way to place the results into a browser. I know that Mocha has support for this using 'html' reporter and mocha init <dir>however neither seem to be working for me (the reporter actually throws errors without even running a test).
我一直在使用 NodeJS 和 Mocha 生成一些测试，我想找到一种将结果放入浏览器的方法。我知道 Mocha 使用 'html' 报告器对此提供了支持，mocha init <dir>但是似乎两者都不适合我（报告器实际上甚至在没有运行测试的情况下就抛出了错误）。
Could someone give me a good example of running a test via Mocha and generating a HTML report?An example I want to mimic is on the visionmediasite. Also, for examples sake we'll say I'm using a test file called example.js.
有人能给我一个通过 Mocha 运行测试并生成 HTML 报告的好例子吗？我想模仿的一个例子是在visionmedia网站上。另外，为了举例，我们会说我正在使用一个名为example.js.
Thanks in advance for any assistance, it's surprising there are so few example pieces around.
在此先感谢您的任何帮助，令人惊讶的是，示例作品如此之少。
采纳答案by Henrik Andersson
To get Mocha to run your test in both browser and in the terminal follow this small tutorial:
要让 Mocha 在浏览器和终端中运行您的测试，请遵循以下小教程：
I'm assuming the following plugins for a normal node.js mocha test suite.
我假设一个普通的 node.js mocha 测试套件有以下插件。
- Node.js
- Mocha
- 节点.js
- 摩卡
And the following tree structure:
以及以下树结构：
/root
/test
my_something_spec.js
/javascript
index.html
index.html
索引.html
Disclaimer: I've blatantly forgone all kinds of best practices but just to point you in the right direction.
免责声明：我已经公然放弃了各种最佳实践，但只是为了给你指明正确的方向。
<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>
test/my_something_spec.js
测试/my_something_spec.js
describe("my function", function() {
it("is a function", function() {
expect(true).to.be(true);
});
});
Serving this up with a simple python server python -m SimpleHTTPServer 8080from the root and visit localhost:8080will give you a nice and failing test.
And running mocha from the terminal will give you the same output, that expectisn't defined.
使用一个简单的 Python 服务器python -m SimpleHTTPServer 8080从根目录提供服务并访问localhost:8080将为您提供一个很好但失败的测试。从终端运行 mocha 将为您提供相同的输出，expect但未定义。
回答by Paul Mougel
You try to use the htmlreporter, which throws when you try to use it in Node:
您尝试使用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
Per the Mocha documentation(and relevant issue in Github), the htmlreporter only works in the browser, ie. to test client-side code in the browser.
根据Mocha 文档（以及Github 中的相关问题），html记者只能在浏览器中工作，即。在浏览器中测试客户端代码。
If you want to output HTML for a Node.js test script, use the docreporter, which will generate HTML.
如果要为 Node.js 测试脚本输出 HTML，请使用doc报告器，它将生成 HTML。
回答by Harry Pehkonen
I like to test the same code through Node.js andin a browser, depending on the situation. I know you were asking to "place the results into a browser" (from Node.js?), but I hope this will suffice.
我喜欢根据情况通过 Node.js和浏览器测试相同的代码。我知道您要求“将结果放入浏览器”（来自 Node.js？），但我希望这足够了。
This example was created on a windows machine, but it will work on a Mac and Linux also.
这个例子是在 Windows 机器上创建的，但它也可以在 Mac 和 Linux 上运行。
You do notrequire a web-server (Node.js or other) for this to work.
你不能要求一个Web服务器（Node.js的或其他方式）进行这个工作。
To run the tests in a browser, open up the ./test/index.html file.
要在浏览器中运行测试，请打开 ./test/index.html 文件。
To run the tests in command-line, just execute "mocha".
要在命令行中运行测试，只需执行“mocha”。
Starting from nothing:
从无到有：
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
Initialize the directory that will hold all of your tests. Always call it "test":
初始化将保存所有测试的目录。始终称其为“测试”：
C:\TEMP\mocha_node_browser>mocha init test
Edit and/or create some files:
编辑和/或创建一些文件：
C:\TEMP\mocha_node_browser>gvim -p test_me.js test\index.html test\tests.js
I use Chai. The same chai.js file will be used in both tests.
我用柴。两个测试中将使用相同的 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 ..
After creating/editing the files, run the tests via command-line:
创建/编辑文件后，通过命令行运行测试：
C:\TEMP\mocha_node_browser>mocha
.
1 passing (15ms)
...or point your browser at ./test/index.html.
...或将浏览器指向 ./test/index.html。
passes: 1
failures: 0
duration: 0.03s
whatever
should return "it worked!"
File contents:
文件内容：
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;
}
Add Chai and your source that you want to test into test/index.html:
将 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>
Make your tests compatible with command-line andbrowser
使您的测试与命令行和浏览器兼容
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!");
});
});
