Level Up Your Front-end Testing Game With Wallaby.js
Tags: testing, javascript, productivity
Published: 2020-01-15 23:09:13

I am a huge fan of testing, but for the most part, you either have to remember to run your preferred test runner of choice in some kind of watch mode and keep an eye on any terminal output for broken tests.

If you're using Karma, it opens up a web browser and can steal away focus at times when tests re-run. Jest is great for watching tests and output the result to the console, but if you don't have it visible at all times, the console output can be missed.

Which is why I want to talk about [Wallaby.js](https://wallabyjs.com/). It's a test runner which runs your tests in your IDE/code editor of choice and provides distraction-free feedback to you when tests pass or fail.

I use Visual Studio Code as my editor of choice and Wallaby runs inside of it, as well as almost every other editor you can think of. Furthermore, you get realtime inline test feedback.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wksu7hy0u6bg0pvounqj.PNG)

As you can see, I have a passing test and a test which is broken (highlighted by the shades of red on the left-hand side).

If you were to open up the code being tested, you get code coverage indicators as well as whether or not a test is passing or failing on specific pieces of your code.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9y2d4krormmfzl4l3z4d.PNG)

If you look at the status bar in VSCode (or whatever editor you happen to be using) you will see some useful information:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/m0v32pc4orggungo3got.PNG)

The percentage indicator there changes depending on the file you have open. Wallaby automatically checks to see how much coverage you have. In the case of the file, I have open, I have achieved 100% code coverage. To the right, you can see I have 316 passing tests and 2 failing tests (indicated by the x and checkmark).

The file in question being tested looks like this in VSCode:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/to3xjubj5dutzuilbywe.PNG)

The number of times I have been writing code and noticed I have inherently broken a test thanks to Wallaby have been too many to count. Wallaby pays for itself the first time you use it. If you do not have any tests, maybe it will take a bit longer to pay itself off.

If you are a fan of TDD (Test Driven Development), Wallaby is the perfect accompaniment for TDD fans as you get that realtime information (the inline coloured blocks are super helpful). Wallaby actually highlights how poor traditional test runners really are.

If at any time you get stuck, the Wallaby team are very responsive (as can be seen on their GitHub [here](https://github.com/wallabyjs/public/issues). They respond very fast to questions/issues and always manage to resolve them (even going as far as providing you with configuration and code examples).

I've only ever had a couple of interactions with the team whilst trying to get Wallaby configured for Aurelia (a couple of years ago) and they really know their product, providing a solution fast.

### The Downsides

Really, there is only one downside and honestly, it's not that big of a downside. The cost of Wallaby can be a little expensive, especially if you're a freelancer or solo developer. You have to pay for a year upfront, no monthly subscription options are available (although, the Wallaby team should consider it).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tja9s5pnysviwx989wam.PNG)

At $175 AUD per year, it might be a cost some cannot afford. Although, it only works out to be $14 AUD per month (around the cost of a Netflix subscription). If you work for a company, I highly recommend asking them to purchase you a company licence at a cost of $350 AUD.

You can also try it for free to see if it works for you as well, so you do not have to commit to an upfront purchase. When you realise how productive Wallaby makes you and how great the support is (should you need it), you realise that Wallaby isn't expensive at all.