CODEWITHSUNDEEP
unit-testingmocha.jschai
SUPARNA SOMAN
SUPARNA SOMAN

Reputation: 2693

Mocha test results in browser shows blank

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)

Upvotes: 0

Views: 1093

Answers (1)

Dan Kreiger
Dan Kreiger

Reputation: 5516

HTML

In this order in your HTML

  1. Link to a mocha css stylesheet.

    <link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />

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

  3. Write a script tag to load mocha.

    <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>

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

  5. Setup the mocha BDD api (or TDD depending on how you are writing your tests).

     <script>mocha.setup("bdd");</script>

  6. 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);
  });
});

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

Upvotes: 2

Related Questions