Jest preprocessor for Typescript/ES6

Question

I am trying to test A Typescript Class Using Jest. Since I need to use es6's async/await I need the typescript class to be compiled to es6 first and then to es5 using babel. What do I need to add to the preprocessor in order to achieve this. My current preprocessor looks like this:

const tsc = require('typescript');

module.exports = {
    process: function(src, path) {
        if (path.endsWith('.ts') || path.endsWith('.tsx')) {
            return tsc.transpile(
                src,
                {
                    module: tsc.ModuleKind.CommonJS,
                    jsx: tsc.JsxEmit.React
                },
                path,
                []
            );
        }
        return src;
    }
};

Do I need to add target: tsc.ScriptTarget.ES6? When I do so I get an unexpected identifier = error in the processed code which looks like the transpiled version of my .ts class. What I gathered from this is that my preprocessor is compiling data to es6 but my es6 is not being transpiled to es5. Also is there any readymade preprocessor which can do this?

Community · Accepted Answer · 2017-05-23 12:17:39Z

5

If you're looking for a custom config, this might be your answer: https://stackoverflow.com/a/40070453/4909970

However, in my experience ts-jest works fine. Just make sure you specify jest settings for ts-jest "target": "ES6" in __TS_CONFIG__ or just add your current typescript config.

You package.json will look somethings like this:

"jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/ts-jest/preprocessor.js",
    "globals": {
        "__TS_CONFIG__": "tsconfig.json"
    }
}

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Nov 5, 2016 at 14:05

pavloko

1,0009 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mjwrazor Over a year ago

You have to use this "globals" in the package.json if you want to use Webstorm's integration.

reflog · Accepted Answer · 2016-09-15 06:29:54Z

4

I'd recommend using https://www.npmjs.com/package/ts-jest which is a much cleaner solution. A preprocessor that does the work for you...

answered Sep 15, 2016 at 6:29

reflog

7,6851 gold badge45 silver badges48 bronze badges

Comments

Nahush Farkande · Accepted Answer · 2016-11-07 04:57:22Z

The solution to this problem that I am currently using is

const tsc = require('typescript');

const babel = require('babel-core');
const jestPreset = require('babel-preset-jest');
const es2015 = require('babel-preset-es2015');
const stage3 = require('babel-preset-stage-3');

module.exports = {
    process: function (src, path) {
        if (path.endsWith('.ts') || path.endsWith('.tsx')) {
            var es6Code = tsc.transpile(
                src,
                {
                    target: tsc.ScriptTarget.ES6,
                    module: tsc.ModuleKind.CommonJS,
                    jsx: tsc.JsxEmit.React
                },
                path,
                []
            );
            return babel.transform(es6Code, {
                auxiliaryCommentBefore: ' istanbul ignore next ',
                    presets: [jestPreset, es2015, stage3],
                retainLines: true
            }).code;
        }
        return src;
    }
};

So what I am doing here is I am taking the transpiled code generated by the typescript compiler and passing it through babel, which in turn is converting my code from es6 to es5.

Collectives™ on Stack Overflow

Jest preprocessor for Typescript/ES6

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related