Writing tests to support the code you write is an aspect of everyday developer life in most (if not all) companies.
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.
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.
2. Testing Framework of Choice
Jasmine vs Mocha
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 :
What is very important in my eyes for any assertion library is that they’re humanly readable and easy to use.
What about Sinon and Chai?
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.
Our current setup evolved from Karma + Jasmine + PhantomJS in 2017 to Karma + Webpack (6to5) + Jasmine + Puppeteer + Chrome Headless.