Testing with Mocha – 1. Installation and set up
Tags: testingwithmocha, bdd, javascript, mocha
Published: 2021-04-13 06:06:13

---
title: Testing with Mocha – 1. Installation and set up
published: true
date: 2021-04-12 08:25:36 UTC
tags: TestingwithMocha,bdd,JavaScript,Mocha
canonical_url: https://www.danielwerner.dev/testing-with-mocha-installation-and-set-up
---

## 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
```

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

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

```

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

```

or if we installed locally, run it like:

```

./node_modules/mocha/bin/mocha

```

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

```

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](https://codepen.io/daniel-werner-the-decoder/pen/PoWQaRB) by Daniel Werner ([@daniel-werner-the-decoder](https://codepen.io/daniel-werner-the-decoder)) on [CodePen](https://codepen.io).

<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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');

```

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 () {

```

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

```

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

```

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);

```

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](https://www.danielwerner.dev/category/testing-with-mocha/)**.

The post [Testing with Mocha – 1. Installation and set up](https://www.danielwerner.dev/testing-with-mocha-installation-and-set-up/) appeared first on [Daniel Werner](https://www.danielwerner.dev).