How to use jest with typescript

Question

I have pretty straightforward question: "How to configure typescript with jest". I know that there are plenty resources for this. But no one solution worked for me.

Here is my jest.config.js:

module.exports = {
    roots: [
        '<rootDir>'
    ],
    transform: {
        "^.+\\.ts$": "ts-jest"
    },
    testMatch: ['<rootDir>/tests/**/*.ts'],
    moduleFileExtensions: ['ts', 'js'],
    modulePaths: [
        '<rootDir>/src/js/'
    ],
    moduleNameMapper: {
        'Services(.*)': '<rootDir>/src/js/$1'
    },
};

First problem is that module name mapper does not work. I added both modulePaths and moduleNameMapper but no one works. It just simple says: "Can not find module ...".

Another problem is that when I fake module name mapper (for example 'i': '<rootDir>/src/js/State.ts' and make it work, I have " Unexpected token export". But I followed this guide https://basarat.gitbooks.io/typescript/docs/testing/jest.html and I have the same code as on that example. I tried using babel for jest - the same.

Of course, I tried googling. But no success. I tried different ways - no result. I spent almost 2 hours on it. I know that there should be a simple solution for this as jest and typescript are popular packages.

Update: Here is my tsconfig.js

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es2015",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

ford04 · Accepted Answer · 2019-09-16 15:54:11Z

2

With the information you provided, I would guess that the problem is twofold:

Adjust the moduleNameMapper regex
Unexpected token export might indicate a wrong tsconfig.json configuration (e.g. module)

1.) Wrap 'Services(.*)' with regex boundaries ^$, resulting in '^Services(.*)$'. Otherwise it can cause weird errors, as all matching sub-strings of the module name are replaced. Also I am not sure, if you are rather meaning '^Services/(.*)$' (including "/")? As your dummy replacement alias changes the error type, your config seems to have an incorrect regex match, but works in other regards.

2.) Node cannot understand ES module syntax without special flags. Your error indicates, there is probably a transpile step from import/export to CommonJS require missing. Check your module property in tsconfig.json/ your test config, if it is set to "CommonJS". Consider the default value which depends on target property: target === "ES3" or "ES5" ? "CommonJS" : "ES6".

Update:

If you use baseUrl and paths alias configuration in tsconfig.json, make sure to also setup moduleNameMapper in jest config. This is a bit redundant, so ts-jest offers a helper to extract the values from TS config. You can have a look at this example.

Hope, that gets your problem solved, otherwise a complete code example would be helpful.

edited Sep 16, 2019 at 15:54

answered Sep 16, 2019 at 11:48

ford04

75.8k26 gold badges219 silver badges176 bronze badges

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

13 Comments

FreeLightman Over a year ago

I added my tsconfig.js file content. Also I tried to set "module" key to a dummy string like "dfsfd" and when I ran jest it did not give my any error. Looks like I have wrong "transform" value in jest.config.js.

FreeLightman Over a year ago

I tried to change moduleNameMapper to '^Services/(.*)$' - no result. I event tried '^Services/i$' and used import a from Services/i - no result, it gives Cannot find module 'Services/i'. I really can not get a clue what I am doing wrong.

ford04 Over a year ago

"when I ran jest it did not give my any error" - that means, it works when you leave out module property or set a dummy value? As a last guess, I see by your config you also use react - do you use css modules imports, which could trigger unexpected token errors, if not mocked out in jest? I would need a minimal sample here to see better what's going on...

FreeLightman Over a year ago

Finally got a solution. Path mapping should have been setup in tsconfig.json

FreeLightman Over a year ago

No, react is there as a result of copying.

|

Collectives™ on Stack Overflow

How to use jest with typescript

1 Answer 1

Update:

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update:

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related