Mocha test results in browser shows blank - unit-testing

Question

I am trying to do unit testing with Mocha and Chai. The test runs successfully in terminal, but when I check the testrunner.html file in browser it is blank and just shows "passes: 0failures: 0duration: 0s"
But in terminal it shows:
$ mocha
Array
✓ should start empty
1 passing (18ms)

Answer 1

HTML
In this order in your HTML
Link to a mocha css stylesheet.
<link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
Write a div tag with id='mocha'. The tests will be inserted in this div, which will allow you to see them in the browser.
<div id="mocha"></div>
Write a script tag to load mocha.
<script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
Write a script tag to load any other dependencies like chai.
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.1.0/chai.js"></script>
Setup the mocha BDD api (or TDD depending on how you are writing your tests).
<script>mocha.setup("bdd");</script>
Write your test (inline or link to an external JavaScript file).
BDD example:
describe("addition", function() {
it("adds 1 and 1", function() {
expect(1 + 1).to.equal(2);
});
});
Run Mocha.
mocha.run();
Snippet Example
Try running this snippet
<!-- link to mocha css stylesheet -->
<link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
<!-- write a div with id "mocha" for the output to be inserted into -->
<div id="mocha"></div>
<!-- load mocha framework -->
<script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
<!-- load any other libraries like the chai assertion library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.1.0/chai.js"></script>
<!-- setup mocha to use the BDD interface -->
<!-- Note: you can use TDD here instead -->
<!-- depending on how you are writing your tests -->
<!-- more information: http://mochajs.org/#tdd -->
<script>
mocha.setup("bdd");
</script>
<!-- write tests -->
<script>
// access 'expect' from chai
var expect = chai.expect;
// write tests (BDD example)
describe("addition", function() {
it("adds 1 and 1", function() {
expect(1 + 1).to.equal(2);
});
it("adds 1000 and 10", function() {
expect(1000 + 10).to.equal(1010);
});
});
describe("subtraction", function() {
it("subtracts 1 from 1", function() {
expect(1 - 1).to.equal(0);
});
it("subtracts 10 from 1000", function() {
expect(1000 - 10).to.equal(990);
});
});
describe("multiplication", function() {
it("multiplies 1 by 1", function() {
expect(1 * 1).to.equal(1);
});
it("multiplies 1000 by 10", function() {
expect(1000 * 10).to.equal(10000);
});
});
describe("division", function() {
it("divides 1 by 1", function() {
expect(1 / 1).to.equal(1);
});
it("divides 1000 by 10", function() {
expect(1000 / 10).to.equal(100);
});
});
</script>
<!-- run mocha -->
<script>
mocha.run();
</script>
Demo
Here is a CodePen Demo that does not use so much inline JavaScript.
Documentation
Useful information can be found here at the official documentation.