JS testing in 2018, write in ES6, test in ES6

Writing tests to support the code you write is an aspect of everyday developer life in most (if not all) companies.

In the past few years, the javascript testing scene has made some amazing leaps forward, phantomJS, TrifleJS, Karma, Jasmine, Chai, Mocha, …. Heck I could open a sweet coffee shop with all of these testing tools out there.

But regardless of their sometimes interesting names, there’s a lot of power baked into these testing tools. The following article gives a quick overview of my current setup for testing frontend Javascript in 2018.

1. Which testrunner ? And why ?

There’s several test runners out there, most of them however lack in functionality/stability. The most advanced and versatile ( in our opinion ) is KarmaJS.

Image for post
Image for post

KarmaJS itself has been around for a while, but it’s still alive and kicking, what’s important to note here is that Karma is a test runner.

The tests themselves need to be written in a different language (such as Jasmine, chai, etc ), but karma ( if properly configured ) handles the task of running consecutive tasks / watching file changes / booting up your test environment / … for you.

It’s easy to integrate into any CI tool as you can just run it through an npm lifecycle script.

Karma does the trick for us, but a very good alternative is Jest, which has been gaining in popularity for a while now.

One of the benefits that Jest offers is called ‘snapshot’ testing, where test results might change based on code changes, which jest incorporates through comparisons between the current state of the art and previous snapshots. Pretty cool stuff. One of the downsides in Jest is that it doesn’t yet offer in-browser support, which karma does.

Image for post
Image for post

2. Testing Framework of Choice

As with anything in the Javascript community, there’s a plethora of testing frameworks out there. Some of the more well-known ones are Sinon, Mocha, Chai, Jasmine. Of which the latter (Jasmine) is our weapon of choice.

Jasmine and Mocha are both written with BDD (Behavior Driven Development) in their mind and their syntax looks much alike. The difference is that Mocha does not come with an assertion library.

Assertions or otherwise called ‘expectations’ are the core of a good testing framework, they are a way of writing the expected outcome of a test. For example in jasmine :

expect(calculator.add(1, 4)).toEqual(5);

What is very important in my eyes for any assertion library is that they’re humanly readable and easy to use.

Chai is an assertion library, not a full-fledged testing library, it (needs to be) paired with a different library such as Mocha for it to truly shine.

Sinon’s feature set is very much alike jasmine’s, but in our opinion the syntax is not as clean as jasmine’s. One of the benefits of sinon over Jasmine though is that it also incorporates a fake server.

3. From PhantomJS to Puppeteer/ChromeHeadless

I was sad to see PhantomJS slowly be putting to rest when one of its maintainers left in 2017, however the reason as to why was because Google released a Headless version of Chrome ( headless mode of Chromium, Canary ) followed suit.

Headless, meaning that it can run without a graphical interface and communicates through other means such as serial ports, network, etc. In order to efficiently run unit tests in a continuous integration scheme, headless is a bit of a requirement.

Combine Headless chrome with Puppeteer, a node library built by Google to be able to control headless chrome/chromium/canary and you’ve got yourself a full replacement for phantomjs.

As such the combination between puppeteer and headless chrome is what we’ve moved towards in 2018. The cherry on the cake is that since it’s coming from the source, rather than a third-party library, this setup is a lot more stable than PhantomJS.

tldr;

Our current setup evolved from Karma + Jasmine + PhantomJS in 2017 to Karma + Webpack (6to5) + Jasmine + Puppeteer + Chrome Headless.

Example

https://gist.github.com/peterver/42c32e66e03d3d3a609b19b1ecc4b50f

Resources

Written by

A web/digital agency focussing on delivering friendly and user-centered experiences that are hyper scalable. — www.valkyriestudios.be

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store