53

Is it just me, or does their documentation not explain how to run the tests in the browser at all?

Do I have to create that HTML file that they show in the example? How do I make it run my specific set of test cases for my project then?

I want the same output as running mocha from project root. All subdirectories inside the test folder need to be included

Marco Prins
  • 7,189
  • 11
  • 41
  • 76

4 Answers4

46

If we need to run our tests in a browser, we need to set up a simple HTML page to be our test runner page. The page loads Mocha, the testing libraries and our actual test files. To run the tests, we’ll simply open the runner in a browser.

example html code :

<!DOCTYPE html>
<html>
  <head>
    <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 src="node_modules/chai/chai.js"></script>
    <script>mocha.setup('bdd')</script>

    <!-- load code you want to test here -->

    <!-- load your test files here -->

    <script>
      mocha.run();
    </script>
  </body>
</html>

Setting up a Directory Structure

You should put your tests in a separate directory from your main code files. This makes it easier to structure them, for example if you want to add other types of tests in the future (such as integration tests or functional tests).

The most popular practice with JavaScript code is to have a directory called test/ in your project’s root directory. Then, each test file is placed under test/someModuleTest.js.

Important things :

  • We load Mocha’s CSS styles to give our test results nice formatting.
  • We create a div with the ID mocha. This is where the test results are inserted.
  • We load Mocha and Chai. They are located in subfolders of the node_modules folder since we installed them via npm.
  • By calling mocha.setup, we make Mocha’s testing helpers available.
  • Then, we load the code we want to test and the test files. We don’t have anything here just yet.
  • Last, we call mocha.run to run the tests. Make sure you call this after loading the source and test files
Samir
  • 691
  • 5
  • 22
9

I thought the documentation wasn't entirely clear too, but I figured it out eventually and got it set up. Here's how:

Include the Mocha script and CSS in Index.html. Also include a div with id "Mocha" for the output to be inserted into. Include the test script you'd like to execute.

<link href="lib/mocha/mocha.css" rel="stylesheet" />
<script src="lib/mocha/mocha.js"></script>
<script src="test/my_mocha_test.js"></script>
<div id="mocha"></div>

In your test file (my_mocha_test.js in this example) include this setup line at the top:

// 'bdd' stands for "behavior driven development"
mocha.setup('bdd');

Now with the test and the Mocha content all loaded, you can run the tests with this command:

mocha.run();

You can add that to an event listener and trigger it on a button push or other event, or you can just run it from the console, but it should put the test output in the div with the "mocha" id. Here's a page with all this set up with code viewable on GitHub for you to

https://captainstack.github.io/public-stackhouse/

Ed de Almeida
  • 3,675
  • 4
  • 25
  • 57
Captain Stack
  • 3,572
  • 5
  • 31
  • 56
  • How do you include everything in the `test` directory, and it's subdirectories, recursively? – Marco Prins Mar 17 '17 at 12:54
  • Ah well I don't know of a way to do that natively. You can probably do it with something like RequireJS and do it with an import statement. – Captain Stack Mar 17 '17 at 12:58
  • Here are a couple links that might help: http://stackoverflow.com/questions/4175008/how-can-i-include-all-javascript-files-in-a-directory-via-javascript-file http://stackoverflow.com/questions/24097146/include-all-javascript-files-in-a-directory-to-a-html-file-in-angularjs-with-gr – Captain Stack Mar 17 '17 at 13:07
9

My way to do it with:

ES6, import, export, chai

Used mocha 6.1.4 and chai 4.2.0.

src/MyClass.js:

export default class MyClass { }

test/MyClass.js:

import MyClass from "../src/MyClass.js";

let assert = chai.assert;

describe('MyClass tests', function () {
    describe('The class', function () {
        it('can be instantiated', function () {
            assert.isObject(new MyClass());
        });
    });
});

test/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Mocha</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mocha.css">
    <script src="mocha.js"></script>
    <script src="../node_modules/chai/chai.js"></script>

    <script type="module" class="mocha-init">
        mocha.setup('bdd');
    </script>

    <!-- ------------------------------------ -->
    <script type="module" src="test.js"></script>  
    <!-- ------------------------------------ -->

    <script type="module">
        mocha.run();
    </script>
</head>
<body>
    <div id="mocha"></div>
</body>
</html>

The mocha.js and mocha.css files were created via mocha init test, but can also be found in node_modules/mocha.

If this is improvable, let me know. The answer is insprired by this post.

robsch
  • 9,358
  • 9
  • 63
  • 104
  • 2
    I found that the testcases were not running after every reload. Afterwards, I moved `mocha.run()` inside `window.addEventListener('load', function() { mocha.run(); })` and the problem got solved. Is this a correct solution? – Pallav Jha Dec 15 '21 at 10:19
9

Here's the most basic chai/mocha test in the browser.

mocha.setup('bdd');

describe('test', () => {
  it('passes', () => {
    chai.expect(1).to.eql(1);
  });
  
  it('fails', () => {
    chai.expect(1).to.eql(2);
  });
});

mocha.run();
<div id="mocha" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.0.1/mocha.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
JBallin
  • 8,481
  • 4
  • 46
  • 51