Plug and play tests for ES6
Tags: javascript, showdev, modules, tests
Published: 2018-04-06 08:29:41

---
title: Plug and play tests for ES6
published: true
description: You wrote the best library using ES6 classes and export/import statement, now you want to test your code. 
tags: javascript, showdev, modules, tests
cover_image: https://thepracticaldev.s3.amazonaws.com/i/b3vymxtzsn5g1smw0wz0.png
---

This post follow [my previous post on modular library building](https://dev.to/gmartigny/how-to-code-like-playing-lego--40fk), 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](https://mochajs.org/) - 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](https://github.com/avajs/ava#readme) - 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](https://facebook.github.io/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](https://github.com/mzgoddard/jest-webpack) 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.

```json
"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](https://facebook.github.io/jest/docs/en/getting-started.html). Let me show you a meaningful example.

```js
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](https://www.developerdotstar.com/mag/articles/test_smarter_not_harder.html).

If you want to check a live example, I'm using the very same technique for [my project of drawing library](https://github.com/GMartigny/pencil.js).