Webpack, TypeScript, Aurelia and Wallaby.js

I have been working with Aurelia for a year now and loving it. I also discovered Wallaby earlier this year and love that as well. I got it to work when I was still using Jspm and System.js in my Aurelia application, but since moved over to Webpack.

Because I am also using TypeScript, it complicated matters a bit getting Wallaby.js to work with Webpack and TypeScript. However, thanks to the help of Artem of Wallaby.js, I got it to work in the end.

The first issue I encountered was loads of errors relating to Map which looked like this: Runtime error: ReferenceError: Can't find variable: Map

Because Wallaby.js is using PhantomJS by default which does not support ES2016 Map you need to add in a polyfill in the form of Babel Polyfill. So first up, you need to install it: npm install babel-polyfill --save-dev then you need to add it into your Wallaby configuration file.

Inside of the files array [], I have the following:

files: [
    {pattern: 'node_modules/babel-polyfill/browser.js', instrument: false},
    {pattern: 'src/**/*.ts', load: false},
    {pattern: 'test/unit/setup.ts', load: false}
],

The first line includes the Babel Polyfill which addresses the PhantomJS issues with future-spec Javascript.

The second and last issue that I encountered was that I was trying to load and use the Webpack configuration file and pass it through to the Wallaby Webpack plugin. Turns out this is the wrong way to go about things because otherwise it attempts to use your defined loaders and in my case, I am using the ts-loader plugin and it breaks things with Wallaby.

My final Wallaby.js file looks like this:

var wallabyWebpack = require('wallaby-webpack');

var wallabyPostprocessor = wallabyWebpack({});

module.exports = function (wallaby) {
    return {
        files: [
            {pattern: 'node_modules/babel-polyfill/browser.js', instrument: false},
            {pattern: 'src/**/*.ts', load: false},
            {pattern: 'test/unit/setup.ts', load: false}
        ],
        tests: [
            {pattern: 'test/unit/**/*.spec.ts', load: false}
        ],

        postprocessor: wallabyPostprocessor,

        bootstrap: function () {
            window.__moduleBundler.loadTests();
        }
    };
};