Quokka.js, Wallaby.js and Test Driven Development

I’ve always been someone, like a lot of people out there, who is in theory very behind the idea of Test Driven Development but I don’t always manage to get it quite right in practice. It’s a work in progress.

  • What is the right, or practical level of coverage you should aim for?
  • Can I always manage to write my tests ahead of time?
  • What is the right blend of unit, integration and end-to-end testing to employ?

All these questions run through my head every time I sit down, and as I said, I’m not very good and getting the answers to all of these right.

Added to this is the fact that if a test runner is running every so often, even if tests are failing, the mess isn’t right in front of my eyes. I’m not visually hit over the head with it, like I would be if confronted with a messy room or kitchen, and so tidying is done in my case more sporadically, rather than as I go (not best practice I know).

Quokka.js

Two weeks ago, I needed to check what a snippet of Javascript did. “There has to be a tool or scratchpad I can use in my IDE”, I thought, believing I’d seen one built into VSCode. A brief search and a realisation that VSCode didn’t come with such a tool out of the box brought up Quokka, a live scratchpad for Javascript and TypeScript, supporting VSCode, Atom and Jetbrain’s IDEs.

An example of quokka.js in action using special comments to output values at each stage of a method chain

It’s an amazing and fun little tool. In short these are its selling points (culled straight from the quokka.js site):

  • While various online REPL solutions and standalone playgrounds can be great, they all have two major cons: they live outside of your code editor and outside of your project context.
  • Quokka.js allows to execute the code right in your editor, to avoid much context switching. You can import and execute files and modules from your project.
  • Quokka.js supports TypeScript and Babel out-of-box, with a plugin it can import and run any file that compiles to JavaScript and runs in node.js.
  • It offers (in the paid version) chained logging of values (i.e. you can output the values at multiple stages of a chained method call [shown above] with a special comment), and a host of other super cool, on the fly features which are shown off here

Wallaby.js

Ok so now I have this wonderful playground tool, but these guys also make something called wallaby.js, which this is based off. “What’s that?”, I thought to myself. And that’s where, after a small trial and the decision to put down $ 100, I kind of had my mind blown.

Wallaby.js is a test runner which plugs into your IDE (same editors as listed above supported). It basically:

  • Runs your tests in real time, as you type, and only the ones that are affected by your code changes (not such a huge performance hit).
  • Shows you live coverage of your code with code that isn’t covered, code with breaking tests, and code with passing tests
  • Shows a beautifully output report of code coverage and passing tests in real time output to a web page displayed in your browser.

I can now refactor my code in real time. I’m constantly confronted by code that isn’t covered or has breaking tests and I know as I type what is passing and what isn’t. This for me is a game changer. One is constantly being reminded that there is tidying to be done, that all is not as well as it could be. It’s that little bit of motivation to spend five minutes just making sure that you have a test for that one little piece of your code which doesn’t have it.

Some examples of live coverage and a failing test using the Wallaby.js sample project

From what I’ve read so far from Test Driven Development By Example — Kent Beck (still only about 30% in), one of the main reasons to test is to encourage confidence to refactor your code. This tool makes this even better, because, in real time, you can see your tests start to break and then pass. Refactoring, once you have coverage, with this tool, is actually fun.

Examples of coverage reports and test results via the browser from wallaby.js

All in all, both tools cost me $150 dollars (50 USDfor Quokka.js and 100 USD for Wallaby.js). I think it’s one of the best software purchase decisions I’ve made in the last year.