ts-jest

Note: Looking for collaborators. Want to help improve ts-jest?

Table of Contents

• Versioning
• Usage
  • Coverage
  • React Native
• Options
  • Known limitations for TS compiler options
• Tips
  • Importing packages written in TypeScript
• How to Contribute
  • Quickstart to run tests (only if you're working on this package)
• License

Versioning

From version "jest": "17.0.0" we are using same MAJOR.MINOR as Jest. For "jest": "< 17.0.0" use "ts-jest": "0.1.13". Docs for it see here.

Usage

To use this in your project, run:

npm install --save-dev ts-jest

Modify your project's package.json so that the jest section looks something like:

{
  "jest": {
    "transform": {
      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ]
  }
}

This setup should allow you to write Jest tests in Typescript and be able to locate errors without any additional gymnastics.

Coverage

Prior to version 20.0.0, coverage reports could be obtained using the inbuilt coverage processor in ts-jest. Starting with version 20.0.0, ts-jest delegates coverage processing to jest and no longer includes a coverage processor.

To generate coverage results, set the mapCoverage property in the jest configuration section to true.

Please note that the outDir property in the jest configuration section is removed in coverage mode, due to #201.

React Native

There is a few additional steps if you want to use it with React Native.

Install babel-jest and babel-preset-react-native modules.

npm install -D babel-jest babel-preset-react-native

Ensure .babelrc contains:

{
  "presets": ["react-native"],
  "sourceMaps": "inline"
}

In package.json, inside jest section, the transform should be like this:

"transform": {
  "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
  ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
}

Fully completed jest section should look like this:

"jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ]
  }

If only testing typescript files then remove the js option in the testRegex.

You might want to use ES6 default imports, which will allow you to write things like import React from 'react';

In that case you can add the following to your .tsconfig

        "allowSyntheticDefaultImports": true

This will make ts-loader send the compiled typescript code through babel, and the above import will resolve.

This configuration will allow debugger statements to work properly in both WebStorm and VSCode. Breakpoints currently only work in WebStorm.

Options

By default this package will try to locate tsconfig.json and use its compiler options for your .ts and .tsx files.

But you are able to override this behaviour and provide another path to your config for TypeScript by using __TS_CONFIG__ option in globals for jest:

{
  "jest": {
    "globals": {
      "__TS_CONFIG__": "my-tsconfig.json"
    }
  }
}

Or even declare options for tsc instead of using separate config, like this:

{
  "jest": {
    "globals": {
      "__TS_CONFIG__": {
        "module": "commonjs",
        "jsx": "react"
      }
    }
  }
}

Note that if you haven't explicitly set the module property in the __TS_CONFIG__ setting (either directly or through a separate configuration file), it will be overwritten to commonjs (regardless of the value in tsconfig.json) since that is the format Jest expects. This only happens during testing.

When using Jest with Angular (a.k.a Angular 2) apps you will likely need to parse HTML templates. If you're unable to add html-loader to webpack config (e.g. because you don't want to eject from angular-cli) you can do so by defining __TRANSFORM_HTML__ key in globals for jest.

{
  "jest": {
    "globals": {
      "__TRANSFORM_HTML__": true
    }
  }
}

You'll also need to extend your transform regex with html extension:

{
  "jest": {
    "transform": {
      "^.+\\.(ts|tsx|js|html)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    }
  }
}

For all available options see TypeScript docs.

Known limitations for TS compiler options

• You can't use "target": "ES6" while using node v4 in your test environment;
• You can't use "jsx": "preserve" for now (see progress of this issue);
• If you use "baseUrl": "<path_to_your_sources>", you also have to change jest config a little bit:

"jest": {
  "moduleDirectories": ["node_modules", "<path_to_your_sources>"]
}

Tips

Importing packages written in TypeScript

If you have dependencies on npm packages that are written in TypeScript but are not published in ES5 you have to tweak your configuration. For example you depend on a private scoped package @foo/bar you have to add following to your Jest configuration:

{
  // ...
  "transformIgnorePatterns": [
    "<rootDir>/node_modules/(?!@foo)"
  ]
  // ...
}

By default Jest ignores everything in node_modules. This setting prevents Jest from ignoring the package you're interested in, in this case @foo, while continuing to ignore everything else in node_modules.

How to Contribute

If you have any suggestions/pull requests to turn this into a useful package, just open an issue and I'll be happy to work with you to improve this.

Quickstart to run tests (only if you're working on this package)

git clone https://github.com/kulshekhar/ts-jest
cd ts-jest
npm install
npm test

Note: If you are cloning on Windows, you may have to run git config --system core.longpaths true for Windows to stop complaining about long filenames.

License

Copyright (c) Authors. This source code is licensed under the MIT license.