Mocha and chai on the browser

You may not need Node.js

☕
Mar 29 · 2 min read

This is my experience testing a React application with Mocha using modern ECMAScript 2015.

Setup

As you probably already know, you don’t need Node.js to develop a React application: React Without JSX.

Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children).

In order to spin a development server, I was using a plug-in installed on the text editor (those are great since they give you auto reloading out of the box).

The app was small, with a few dependencies so I didn't need a bundler.

The app didn’t need to support old browsers.

Why would you use Node.js to run basic tasks when Python offers modules like pathlib and shutil?


It makes perfect sense to test a Node.js app with a testing framework built in Node.js, on the other hand many developers only use JavaScript on the client-side.

Why to run unit tests in Node.js if you can do it on the browser?

Mocha

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser

In order to configure Mocha to work on the browser, you can easily follow the example provided by the documentation.

If you want to import ES 2015 modules directly from your source you need to add type="module" in two places:

<!-- tests/index.html --><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/6.0.2/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/6.0.2/mocha.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>

<script class="mocha-init">
mocha.setup('bdd');
mocha.checkLeaks();
</script>
<!-- Modules -->
<script src="test.array.js" type="module"></script>
<!-- Runner -->
<script class="mocha-exec" type="module">
mocha.run();
</script>
</body>
</html>

Then you can write your test using ECMAScript modules:

// tests/test.array.jsimport {someObj} from "../src/some-module.js";Mocha.describe("Array", function () {
Mocha.describe("#indexOf()", function () {
Mocha.it("should return -1 when the value is not present", function () {
chai.assert.equal([1, 2, 3].indexOf(4), -1);
});
});
});

If you are developing a React application you can also use Test Utilities as a library and test your app on the browser with Mocha and Chai. The distribution is also available from a CDN, so you only need to include the script tag within your libraries.


JavaScript improvements in recent years are outstanding: You may not need a server-side implementation like Node.js or Deno to test your app.

Text editors have also improved leaving you with fewer dev-dependencies: Things like formatting, linting and spinning a development server used to be managed by tools like Grunt but nowadays you can leave it to the text editor.

☕

Written by

#architect, #gis analyst, #computational designer, #tennis player, curious... somewhere between art and science.