cannot setup jest with typescript

Question

I'm following this example to set up some basic unit testing for a typescript project: https://dev.to/muhajirdev/unit-testing-with-typescript-and-jest-2gln

I have a main.ts exporting a isInternalLink function

and a main.spec.ts that tries to test it

but I get the following error:

C:\data\devel\apps\tmp\jest-typescript\src\main.spec.ts:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { isInternalLink } from './main.js';
SyntaxError: Unexpected token {
  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)

This is the public repo with the complete example: https://gitlab.com/opensas/jest-typescript

Can anybody point me in the right direction, or provide a working example?

shadowspawn · Accepted Answer · 2019-09-08 05:36:38Z

The Jest TypeScript documentation covers using babel to preprocess the TypeScript files, and also links to ts-jest.

To add ts-jest to your project, install ts-jest:

npm install --save-dev ts-jest

and add this to your package.json to preprocess the TypeScript files:

  "jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json"
    ]}

After doing this in your project I was able to run the tests:

$ npx jest
 PASS  src/main.spec.ts
  ✓ should return false given external link (2ms)
  ✓ should return true given internal link

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.096s, estimated 2s
Ran all test suites.

thanks a lot, the problem was the jest.config.ts fiie, jest only accepts .js or .json config files
Ha, I missed that you had a transform setup but in wrong file.

Lin Du · Accepted Answer · 2019-09-08 05:06:26Z

6

Here is a demo use jestjs with typescript: https://github.com/mrdulin/jest-codelab

devDependencies of package.json:

"jest": "^24.8.0",
"ts-jest": "^24.0.2",
"typescript": "^3.5.3"

In the root path of the project, create jest.config.js:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node'
};

That's all setup. You can find the documentation and follow the 4 steps here: https://github.com/kulshekhar/ts-jest#getting-started

edited Sep 8, 2019 at 5:06

answered Sep 8, 2019 at 4:58

Lin Du

104k138 gold badges338 silver badges574 bronze badges

2 Comments

opensas Over a year ago

thanks a lot, the problem was the jest.config.ts fiie, jest only accepts .js or .json config files

Goran_Ilic_Ilke Over a year ago

Not working in my ts react starter,only whit imports with asterisk as before.

opensas · Accepted Answer · 2019-09-09 02:32:36Z

2

The problem was that my config file was jest.config.ts, after trying with:

npx jest --config jest.config.ts
Usage: jest.js [--config=<pathToConfigFile>] [TestPathPattern]
[...]
The --config option requires a JSON string literal, or a file path with a .js or .json extension.
Example usage: jest --config ./jest.config.js

I just renamed jest.config.ts to jest.config.js and it went fine...

--

I could solve it with @shadowspan and @slideshowp2 help, thanks!

answered Sep 9, 2019 at 2:32

opensas

64.3k91 gold badges268 silver badges421 bronze badges

1 Comment

Ehsan Sarshar Over a year ago

it's not a solution

Collectives™ on Stack Overflow

cannot setup jest with typescript

3 Answers 3

2 Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Related