Using HTML reporting with Mocha test framework

2019-04-20 02:32发布

站内问答 / JavaScript
827 3 4

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.

3条回答
三岁会撩人
2楼-- · 2019-04-20 03:16

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.

  1. Node.js
  2. Mocha

And the following tree structure:

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

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>

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

查看更多
0人赞 添加讨论(0) 举报
Melony?
3楼-- · 2019-04-20 03:28

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!");
  });
});
查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
4楼-- · 2019-04-20 03:30

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 htmlreporter 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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)