paragon-ts-jest

v20.0.10

Published

3 years ago

A preprocessor with sourcemap support to help use Typescript with Jest

Downloads

0High
0Medium
0Low

davidboy

jest typescript sourcemap react testing

ts-jest

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

ts-jest is a TypeScript preprocessor with source map support for Jest that lets you use Jest to test projects written in TypeScript.

Usage

To use this in your project, run:

npm install --save-dev ts-jest @types/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",
      "json"
    ]
  }
}

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

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.

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.

Default Setup

ts-jest tries to ship with sensible defaults, to get you on your feet as quickly as possible.

Sourcemap support

Sourcemaps should work out of the box. That means your stack traces should have the correct line numbers, and you should be able to step through the TypeScript code using a debugger.

Automatically finds tsconfig.json

ts-jest automatically located your tsconfig file. If you want to compile typescript with a special configuration, you can do that too

Supports synthetic modules

If you're on a codebase where you're using synthetic default imports, e.g.

//Regular imports
import * as React from 'react';

//Synthetic default imports:
import React from 'react';

ts-jest tries to support that. If allowSyntheticDefaultImports is set to true in your tsconfig file, it uses babel to automatically create the synthetic default exports for you - nothing else needed. You can opt-out of this behaviour with the skipBabel flag

Supports automatic of jest.mock() calls

Just like Jest ts-jest automatically uses babel to hoist your jest.mock() calls to the top of your file. You can opt-out of this behaviour with the skipBabel flag

Configuration

If the default setup doesn't address your requirements, you can create a custom setup to suit your project.

tsconfig

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

You can override this behaviour by pointing ts-jest to a custom TypeScript configuration file. You can do this by setting the tsConfigFile option in your global variables under the ts-jest key to path of the custom configuration file (relative to the project's root directory)

{
  "jest": {
    "globals": {
      "ts-jest": {
        "tsConfigFile": "my-tsconfig.json"
      }
    }
  }
}

Warning: Using __TS_CONFIG__ option in globals is deprecated and soon will be removed.

For all available tsc options see TypeScript docs.

Note that if you haven't explicitly set the module property through a separate configuration file with tsConfigFile, 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.

Skipping Babel

If you don't use mocks, or synthetic default imports you can skip the babel-transpilation step. This means jest.mock() calls will not be hoisted to the top, and synthetic default exports will never be created. Simply add skipBabel to your global variables under the ts-jest key:

//This will skip babel transpilation
{
  "jest": {
    "globals": {
      "ts-jest": {
        "skipBabel": true
      }
    }
  }
}

Using `.babelrc`

When using Babel, ts-jest, by default, doesn't use the .babelrc file. If you want ts-jest to use .babelrc, you should set the globals > ts-jest > useBabelrc flag to true in your jest configuration.

{
  "jest": {
    "globals": {
      "ts-jest": {
        "useBabelrc": true
      }
    }
  }
}

Use cases

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.

Angular 2

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"
    }
  }
}

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.

Known Limitations

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>"]
}

TS compiler && error reporting

ts-jest only returns syntax errors from tsc
Non syntactic errors do not show up in jest
If you only want to run jest if tsc does not output any errors, a workaround is tsc --noEmit -p . && jest

Known Limitations for hoisting

If the jest.mock() calls is placed after actual code, (e.g. after functions or classes) and skipBabel is not set, the line numbers in stacktraces will be off. We suggest placing the jest.mock() calls after the imports, but before any actual code.

Current limitations for breakpoints

Breakpoints currently work in WebStorm, but not Visual Studio Code. debugger; statements work in both, and will map the TypeScript code correctly to the transpiled Javascript.

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.