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).
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 visionmedia site. Also, for examples sake we'll say I'm using a test file called example.js
.
Thanks in advance for any assistance, it's surprising there are so few example pieces around.
You try to use the html
reporter, which throws when you try to use it in 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 html
reporter only works in the browser, ie. to test client-side code in the browser.
If you want to output HTML for a Node.js test script, use the doc
reporter , which will generate HTML.
To get Mocha to run your test in both browser and in the terminal follow this small tutorial:
I'm assuming the following plugins for a normal node.js mocha test suite.
And the following tree structure:
/root
/test
my_something_spec.js
/javascript
index.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>
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 8080
from the root and visit localhost:8080
will give you a nice and failing test. And running mocha from the terminal will give you the same output, that expect
isn't defined.
I like to test the same code through Node.js and in 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.
This example was created on a windows machine, but it will work on a Mac and Linux also.
You do not require a web-server (Node.js or other) for this to work.
To run the tests in a browser, open up the ./test/index.html file.
To run the tests in command-line, just execute "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.
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.
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:
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 and browser
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!");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.