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 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');
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.
The post Testing with Mocha – 1. Installation and set up appeared first on Daniel Werner.
Top comments (0)