Wallaby.js Supported technologies: System.js

Wallaby.js supports System.js. You may find some examples of wallaby configuration for System.js below:

Bundles

For better performance, whenever possible, try using pre-bundled files for libraries as opposed to letting System.js to load all files one by one. For the same purpose, avoid using defaultJSExtensions: true setting and set defaultExtension: 'js' for your packages instead.

Module format

With the way System.js loads modules written/compiled in CommonJs format, wallaby.js may not be able to display inline error/assertion messages if you are using PhantomJs because of PhantomJs limitations. You may use Chrome or Electron test runner to get the correct inline messages.

Also, if you are using Babel or TypeScript compiler, you may just configure it to compile your code to AMD or System.js format and use scriptLoad: true (and format: 'amd' or format: 'register') in the setup function. This way wallaby.js will be able to display inline error/assertion messages, your production build may still use any format you need.

For example, TypeScript compiler configuration and the setup function may look like:

module.exports = wallaby => {
  return {
    ...
    // you may omit the `compilers` section if you have the save settings configured in tsconfig.json
    compilers: {
      'app/**/*.ts': wallaby.compilers.typeScript({
        "module": 'system', // or amd
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": false
      })
    },
    ...
    setup: function (wallaby) {
      wallaby.delayStart();

      System.config({
        meta: {
          'app/*': {
            scriptLoad: true,
            format: 'register' // or 'amd' for AMD
          }
        }
      });

      var promises = [];
      for (var i = 0, len = wallaby.tests.length; i < len; i++) {
        promises.push(System['import'](wallaby.tests[i].replace(/\.js$/, '')));
      }

      Promise.all(promises).then(function () {
        wallaby.start();
      }).catch(function (e) { setTimeout(function (){ throw e; }, 0); });
    }
  };
};

Transpiler

Wallaby.js compiles TS or ES6 files with its own Babel or TypeScript compiler, so no runtime transpiler is required and you may need to set it to none or false (depending on your System.js version):

    ...
    setup: function (wallaby) {
      ...

      System.config({
        transpiler: 'none', // or transpiler: false
        ...
      });
      ...
    }

You may also need to change your package format (to cjs if you are using wallaby Babel/TS compiler configured to compile to CommonJs), and override meta to remove any loader, in your packages overrides.

For example, if your system.js config defines your app package as:

    packages: {
        "myPackage": {
            "main": "myPackage.js",
            "format": "esm",
            "defaultExtension": "js",
            "meta": {
                "*.js": {
                    "loader": "plugin-babel"
                }
            }
        }
    }

then you’ll need to override it as follows (because wallaby.js babel compiler will do the compilation, so no need to compile anything dynamically):

compilers: {
  '**/*.js': wallaby.compilers.babel()
},
...
setup: (wallaby) => {
            ...
            System.config({
                ...
                packages: {
                    'myPackage': {
                        format: 'cjs',
                        meta: {'*.js': {}}
                    }
                }
            });
            ...
        },

Wallaby.js also renames TypeScript files to .js after it compiles them, so you may need to set the defaultExtension: 'js' setting for your packages:

    ...
    setup: function (wallaby) {
      ...

      System.config({
              ...
              packages: {
                app: {
                  defaultExtension: 'js',
                  ...
                }
              }
            });
      ...
    }

or the defaultJSExtensions: true setting for the whole app:

    ...
    setup: function (wallaby) {
      ...

      System.config({
              ...
              defaultJSExtensions: true,
              ...
            });
      ...
    }