DEV Community

loading...

Testing with Mocha – 1. Installation and set up

daniel_werner profile image Daniel Werner Originally published at danielwerner.dev on ・3 min read

Introduction

Mocha can be run both from the command line or from the browser. If you want to run it from the terminal you can use npm or yarn to install it. You can install mocha globally and use it in all your projects or install as as dev dependency in the project locally. I’d recommend installing it locally because this way you can have different versions of Mocha in different projects, and also it makes it easier to install Mocha in continuous integration system to automate the test suite.

Installing Mocha

Installing via command line

Let’s see how to install it globally using npm:

npm install --global mocha
Enter fullscreen mode Exit fullscreen mode

Using this method mocha is installed in the project’s node_modules directory, and it’ll be accessible only in that specific project.

If you use yarn, run:

yarn add mocha
Enter fullscreen mode Exit fullscreen mode

Installing in the browser

For running mocha in the browser you need to load mocha.js and mocha.css in your html. The advantage of using Mocha in browser is that you get a nice test report in the browser, and you don’t have to install via npm. But for me the huge disadvantage is that it cannot be automated. For example cannot be included in the build process. A typical html for running Mocha tests looks like this:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Mocha Tests</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
  </head>
  <body>
    <div id="mocha"></div>

    <script src="https://unpkg.com/chai/chai.js"></script>
    <script src="https://unpkg.com/mocha/mocha.js"></script>

    <script class="mocha-init">
      mocha.setup('bdd');
      mocha.checkLeaks();
    </script>
    <script src="test.array.js"></script>
    <script src="test.object.js"></script>
    <script src="test.xhr.js"></script>
    <script class="mocha-exec">
      mocha.run();
    </script>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Creating our first test

How to run mocha

In the previous lesson we installed Mocha, let’s create our first test.

If we installed mocha globally, then we can run it simply by running:


mocha

Enter fullscreen mode Exit fullscreen mode

or if we installed locally, run it like:


./node_modules/mocha/bin/mocha

Enter fullscreen mode Exit fullscreen mode

By default mocha looks for the test files in the test directory, so we can either create a test directory in the project – and run the tests with the above commands -, or we can specify the pattern where to look for the test files, for example:


mocha ./*.js

Enter fullscreen mode Exit fullscreen mode

The above pattern means look at the current directory, and run every .js file in this directory. There are other configuration options as well, we’ll check them out in the following lessons.

Our first test

Let’s create our first test. We’ll start with creating a simple class called Collection to extend the capabilities of the built in JavaScript array. It accepts an array in the constructor and has a sum method to sum all the values of the array. Please find the executable code snippet below.

See the Pen Testing with Mocha – First test by Daniel Werner (@daniel-werner-the-decoder) on CodePen.

Let’s take a look what we have here in this test. In this example we use the node.js’ built in assertion module:


var assert = require('assert');

Enter fullscreen mode Exit fullscreen mode

Using the describe() function we can define the test suite, or we can say organize the tests in logical groups. You can nest the describe() functions according to your needs, to have a nice and structured output, like we did in the example:


describe('Collection', function () {
  describe('#sum()', function () {

Enter fullscreen mode Exit fullscreen mode

The it() function defines the actual test which should do the testing and the assertions:


it('should return 6 ', function () {

Enter fullscreen mode Exit fullscreen mode

We do the assertion with the assert library, in this case asserting that the result equals to the expected value:


assert.equal(collection.sum(), 6);

Enter fullscreen mode Exit fullscreen mode

Thats it! We created our first working test with Mocha! In the following lessons we’ll take a deeper look at how to configure mocha, how to create more complex tests and how to use different assertion libraries with Mocha.


Check out all posts in the series Testing with Mocha.

The post Testing with Mocha – 1. Installation and set up appeared first on Daniel Werner.

Discussion (0)

pic
Editor guide