loading...
Cover image for Plug and play tests for ES6

Plug and play tests for ES6

gmartigny profile image Guillaume Martigny Updated on ・2 min read

This post follow my previous post on modular library building, but you don't have to read it first.

If you are here, I can bet you're aware of the importance of automated tests.

I wanted to find the most straightforward and easy way to test a browser modular library, so here's my findings.

Test suits

First of all, you need a test suit. There's plenty out there ! Like, a lot !!
Let's review a few and my opinion on each on of them.

Mocha - the flexible

Mocha is the most popular and built for browsers, but has two downsides in my opinion :

  • No assertion library built-in
  • Wordy compare to others

AVA - the rising-star

To be honest, I like AVA. It has a nice syntax, run tests blazing fast. The only pitfall is that it only support node and need an extra step (and configuration) to work with browser JS.

Jest - the handy

The best solution I found for our needs.
Clear syntax, easy to set-up, fast, clean output ...
The cherry on top is that there's this webpack-jest package that set everything up for you.

Use Jest

This paragraph's gonna be short.

First, add some dev-dependencies.

npm install --save-dev jest jest-webpack

Then, add a "test" script into the package.json file.

"name": "myAwesomePackage",
"scripts": {
    "test": "jest-webpack"
}

Finally, run the "test" script.

npm test

That's it !

Write tests

By default, jest grab all file ending with .test.js, .spec.js or any files under a __tests__ directory as you prefer.

I'm not going to describe the whole deal, but the jest is pretty easy to grasp. Let me show you a meaningful example.

import Unicorn from "./myAwesomePackage.js";
import somethingElse from "AnotherPackage";

// Wrap this test suit
describe("Unicorn", () => {

    // Start every tests with a clean state
    let sparkle;
    beforeAll(() => {
        sparkle = new Unicorn("Sparkle");
    });

    // Some test
    test("instantiate", () => {
        // Simple assertion
        expect(sparkle instanceof Unicorn).toBe(true);
        expect(sparkle.name).toBe("Sparkle");
    });

    // More test
    test("shine", => {
        // String assertion
        expect(sparkle.shine()).toMatch(/🦄/);
        expect(sparkle.shine()).not.toMatch(/💩/);
    });

    // ...
});

Conclusion

You should now be able to test your ES6 code with very little set-up. 👍

Now, go and try to cover your code-base. But remember, smarter tests are better than a lot tests.

If you want to check a live example, I'm using the very same technique for my project of drawing library.

Discussion

pic
Editor guide