Babel

Caution

You don’t need to configure Babel if you are using Jest >= v24, Angular CLI >= v8.2, Vitest, node:test , Create-React-App >= v3, Vue CLI >= v4, or NX Workspaces >= v8. Wallaby will automatically configure Babel for you.

To make Wallaby transpile your code with Babel, you need to add the following to your wallaby.js configuration file:

wallaby.js

module.exports = function (wallaby) {
  return {
    ...

    compilers: {
      '**/*.js': wallaby.compilers.babel(),
    },
  };
};

All files that satisfy files and tests patterns will be tested against the compilers pattern, and those that match will be compiled.

Babel compiler options

If you have a .babelrc configuration file (or a "babel": {} section in your package.json file), then it will be automatically used by wallaby babel compiler (unless you are passing any settings to wallaby.compilers.babel).

If you don’t have the file or you would like to override ALL of its settings, you may just pass them to the wallaby.compilers.babel function argument in your wallaby config.

module.exports = function (wallaby) {
  return {
    ...

    compilers: {
      '**/*.js': wallaby.compilers.babel({
        presets: ['react'],
      }),
    },
  };
};

Please note, that if you are passing ANY babel settings to the wallaby.compilers.babel in your wallaby config file, then .babelrc/package.json settings will not be used. If you would like to use both, then you will need to pass babelrc: true flag. Note that in this case, if some presets, transforms or plugins are defined in both wallaby config and .babelrc, they may be applied twice.

module.exports = function (wallaby) {
  return {
    ...
    compilers: {
      '**/*.js': wallaby.compilers.babel({
        babelrc: true,
        presets: ['react']
      })
    }
  };
};

Babel environment

If you are using different environment settings in your babel configuration and need to pass some process.env settings to Babel compiler, you may do it by setting the properties right in wallaby.js configuration file. For example:

 // whenever wallaby loads the config file (and later uses babel),
 // babel will know that we are in the `test` env
 process.env.BABEL_ENV = 'test';

 module.exports = function (wallaby) {
   return {
     files: [...],
     tests: [...],
     compilers: {...}
     ...
   };
 };

Babel compiler version

By default, wallaby.js is using your project’s local Babel version (from the project node_modules/@babel/core, or node_modules/babel-core, or node_modules/babel).

If you want to use a different version, you may pass babel compiler reference via babel options property. For example, the following config will make wallaby.js use babel compiler from node modules installed in the parent folder:

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

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

    compilers: {
      '**/*.js': wallaby.compilers.babel({
        babel: require('../node_modules/@babel/core'),
        presets: ['react'],
      }),
    },
  };
};