Wallaby.js supports continuous testing and real-time code coverage for TypeScript via a built-in TypeScript compiler, for browser and node.js.

No special configuration is required, unless you need to override TypeScript compiler settings defined in your tsconfig.json, or use some special TypeScript version (different from the one installed in your project node_modules).

module.exports = function (w) {

  return {
    files: [
      'src/**/*.ts'
    ],

    tests: [
      'test/**/*Spec.ts'
    ]
  };
};

You may find the working sample of wallaby.js configuration for TypeScript in this repository.

If you’re writing tests for a browser application, and using Webpack plus compiling TypeScript to CommonJs, you may also find this sample useful.

typescript

TypeScript compiler settings

If your project has a tsconfig.json file, wallaby.js will automatically use TypeScript compiler options configured in the file. Please note that to perform TypeScript compilation faster, wallaby.js changes some TypeScript compiler options (see the details below).

You may also override some of the compiler options by passing their values in wallaby TypeScript compiler options.

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

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

    compilers: {
      '**/*.ts?(x)': wallaby.compilers.typeScript({
        module: 'commonjs',
        jsx: 'React'
      })
    },

    ...
  };
};

Wallaby also sets few default compiler settings that are not replaced by tsconfig.json compiler settings (to perform TypeScript compilation faster).

        noLib: true,
        noResolve: true,
        declaration: false,
        noEmitOnError: false

If you want wallaby to stop overriding them, then you may to do it in your wallaby.js config by adding the useStandardDefaults: true setting. For example, if you have noEmitOnError set to true in your tsconfig.json and would like wallaby apply that value, you may do this:

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

    compilers: {
      '**/*.ts?(x)': wallaby.compilers.typeScript({ useStandardDefaults: true })
    },

    ...
  };
};

It may be useful if you want to stop running tests when TypeScript compilation fails (for any reason).

TypeScript compiler version

By default, wallaby.js is using your project local TypeScript compiler version (from the project node_modules/typescript), if there’s no local version, then wallaby falls back to the embedded TypeScript compiler version which is v2.0.7.

If you want to use a different version, you may pass TypeScript compiler via typescript options property. For example, the following config will make wallaby.js use TypeScript compiler from your installed node modules (which is the default option when you don’t specify the setting at all):

  module.exports = function (w) {

    return {
      files: [
        'src/**/*.ts'
      ],

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

      compilers: {
        '**/*.ts': w.compilers.typeScript({
            typescript: require('typescript')
        })
      }
    };
  };

External modules

By default, when compiling to ES3/ES5, TypeScript compiler compiles modules to CommonJs.

If you’d like to use a different module system, such as AMD (for require.js), UMD or SystemJs, you need to specify the module setting in the compiler config (or your tsconfig.json file):

module.exports = function (w) {

  return {
    files: [
      'src/**/*.ts'
    ],

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

    compilers: {

      '**/*.ts': w.compilers.typeScript({ module: 'amd' })
    }

  };
};

You may find the working sample of wallaby.js configuration for TypeScript with AMD and require.js in this repository.

Ordering source files with reference comments

If you are using reference comments in your source files (and not using an enforced module dependency mechanism, such as CommonJs with node.js/webpack/browserify), wallaby.js may still automatically sort your source files so you don’t need to list them in a correct order in your files list, but use broader patterns instead.

To make wallaby sort the files based on reference comments, you need to pass orderFilesByReferenceComments option to your TypeScript compiler settings:

  module.exports = function (w) {

    return {
      files: [
        'src/**/*.ts'
      ],

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

      compilers: {
        '**/*.ts': w.compilers.typeScript({ orderFilesByReferenceComments: true })
      }
    };
  };

In this case, if you have a file a.ts that looks like

///<reference path="./b.ts"/>
///<reference path="./c.ts"/>
...

wallaby.js will order your files to load b.ts and c.ts files before loading a.ts.

Using with Babel

Sometimes you may need to compile your code with Babel after TypeScript compilation. You may use wallaby preprocessor to do it:

  module.exports = function (w) {

    return {
      files: [
        ...
      ],

      tests: [
        ...
      ],

      ...

      preprocessors: {
        '**/*.js': file => require('babel-core').transform(
                                     file.content,
                                     {sourceMap: true, presets: ['es2015']})
      }
    };
  };

If you hit an issue with missing function names after the double transformation, you may use this solution.

Node.js

If you are using TypeScript with node.js, you will need to configure wallaby TypeScript compiler to use CommonJs modules. You may do it in your tsconfig.json file, or in your wallaby.js config file:

  module.exports = function (w) {

    return {
      files: [
        'src/**/*.ts'
      ],

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

      env: {
        type: 'node'
      },

      compilers: {
        '**/*.ts': w.compilers.typeScript({ module: 'commonjs' })
      }
    };
  };

You may find the working sample of wallaby.js configuration for TypeScript and node.js in this repository (wallaby-node.js configuration file).