Preprocessors

Manual Config

Note that you don’t need a preprocessor to use Babel or Webpack with wallaby.js. You may read how to use the listed technologies in the corresponding docs sections.

Wallaby.js supports Karma-like preprocessors to transform the contents of your files before feeding them to the test runner.

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

    tests: [
      'test/**/*Spec.js'
    ],

    preprocessors: {
      '**/*.js': file => require('babel')
                            .transform(file.content, {sourceMap: true, filename: file.path}),
      '**/*.jsx': file => require('babel')
                            .transform(file.content, {sourceMap: true, filename: file.path})
    }
  };
};

Wallaby preprocessors are extremely simple – you specify a function or an array of functions to run for each file which satisfy a given pattern:

'**/*.js': file => file.content + '\n// modified once'

or

'**/*.js': [file => file.content + '\n// modified 1', file => file.content + '\n// modified 2']

The preprocessor function may take one or two arguments (making it sync or async):

'**/*.js': file => file.content + '// modified'

'**/*.js': (file, done) => done(file.content + '// modified')

In case of one argument the preprocessor result is expected immediately. In case of two arguments the preprocessor is async and the second argument is the callback that is invoked when the preprocessor result is ready.

The first argument is a file object.

The file.content property contains the current content of the file.

The file.path property contains the current path to the file.

The file.rename(newPath) function allows you to rename/move the file.

The file.changeExt(newExt) function is just a shortcut for the rename function allowing you to change the file extension. For example, file.changeExt('js') will change the file extension from whatever it is to .js.

For example, the following preprocessor runs a react tools transformation to all jsx files and renames them to *.jsx.js files.

'**/*.jsx': file => require('react-tools')
                     .transformWithDetails(file.rename(file.path + '.js').content,
                                           {sourceMap: true})

The result of a preprocessor can be:

• a string: a modified content of the file,
• an object: with code and map (or sourceMap) properties, where code is the file modified content and map is the source map of the transformation.
• an error: error object of Error type (passed to done callback or thrown from sync preprocessor).

Please note that if the transformation produces a JavaScript file that you are interested to see the coverage for, then returning the source map is essential. Otherwise, the reported coverage and error stacks may not be correct.

Writing a custom preprocessor

If your preprocessor is more complex than a simple inline function, you may want to consider creating a separate module and also publishing it. Have a look at wallaby-ng-html2js-preprocessor for an example.