Damir's Corner.

Continuous Testing with Wallaby.js

I first stumbled across wallaby.js while working on my previous articles about continuous testing in the JavaScript ecosystem using Karma. After reading more about it in Scott Hanselman's blog post, I decided to try it out myself.

I installed it both in Visual Studio 2015 and Web Storm. The experience was pretty similar in both IDEs, with only minor differences, which make the tool better fit in the individual editor. You can get it for Atom, Visual Studio Code and Sublime Text, as well, if you prefer those editors.

I didn't bother testing it with their sample repository, I rather focused first on my minimalist example from the previous two blog posts. The default wallaby.js configuration file was enough to get it working with the JavaScript code and tests:

module.exports = function(wallaby) {
    return {
        "files": [
            "src/*.js"
        ],

        "tests": [
            "test/*.js"
        ]
    }
};

Since wallaby.js is bundled with TypeScript and CoffeeScript compilers, it worked with code and tests in those two languages, as well; with some additional well documented changes to the configuration of course:

module.exports = function(wallaby) {
    return {
        "files": [
            "src/*.js",
            "src/*.ts",
            "src/*.coffee"
        ],

        "tests": [
            "test/*.js",
            "test/*.ts",
            "test/*.coffee"
        ],

        "compilers": {
            "**/*.ts": wallaby.compilers.typeScript({}),
            "**/*.coffee": wallaby.compilers.coffeeScript({})
        }
    }
};

Wallaby can be extended with support for additional compilers, but none were available at the time of writing.

Being satisfied with the results, I moved on to giving it a try with the project, I am currently working on. Even though its project structure is far from standard, it wasn't to difficult to set up everything. I mostly just needed to copy the file patterns from the existing Karma configuration. I only needed to add Sinon.JS, which was added to Karma with a plugin. Troubleshooting was pretty easy thanks to the Wallaby console output, always listing any errors it encountered.

The overall impression is very similar to NCrunch, which I am a fan of for quite some time now. There is no graphical test explorer available, but the console does a good enough job of providing a general test status overview.

Just like in NCrunch the most important information is rendered directly in the editor:

• test success indicators
• code coverage indicators
• error messages from failing tests

With tests being automatically run whenever the code changes without even having to save it, there's little need to ever move your eyes from the code editor window and slow down the pace.

The biggest downside is the lack of debugging support, but there is already an issue open for that. In the mean time you'll need to make do with your favorite editor's JavaScript debugger. Also, Wallaby is focused on your IDE experience. You'll still need Karma or another test runner on your build server to run the tests, preferably with multiple browsers, not only with PhantomJS as Wallaby does it.

Based on my experience so far, I fully recommend you give Wallaby a try. It is not cheap, but if you write JavaScript code on a daily basis, you really should take advantage of its trial period and see for yourself you find it worth paying the money for. I couldn't find exact information on the duration of the trial period, but as far as I could see, it just stops after certain period of time requiring you to restart it or the IDE, to get it working again. I don't know when (if ever) it completely disables, but it worked long enough for me to evaluate it.