Having trouble configuring Jest for TypeScript integration

Question

Having trouble configuring Jest for TypeScript integration

I am currently implementing unit testing for a typescript project following the guidelines in this example: https://dev.to/muhajirdev/unit-testing-with-typescript-and-jest-2gln

In my project, I have a file named main.ts that exports an isInternalLink function.

Furthermore, there is a main.spec.ts file where I attempt to test the function. However, I encounter 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)

To access the complete example code, you can visit the public repository here:

If anyone has insights on resolving this issue or has a working example to share, I would greatly appreciate it.

typescript jestjs ts-jest

Answer 1

Answer №1

The Jest TypeScript guidance includes information on utilizing babel for preprocessing TypeScript files, as well as references to ts-jest.

To incorporate ts-jest into your project, simply install ts-jest:

npm install --save-dev ts-jest

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

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

Upon completing these steps in your project setup, you should be able to execute the tests successfully:

$ 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.

Answer 2

The Jest TypeScript guidance includes information on utilizing babel for preprocessing TypeScript files, as well as references to ts-jest.

To incorporate ts-jest into your project, simply install ts-jest:

npm install --save-dev ts-jest

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

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

Upon completing these steps in your project setup, you should be able to execute the tests successfully:

$ 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.

Answer 3

Answer №2

If you want to see a demonstration on how to use jestjs with typescript, check out this link: https://github.com/mrdulin/jest-codelab

Here are the devDependencies listed in the package.json file:

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

To set up, create a file named jest.config.js in the root path of your project:

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

Once that's done, refer to the documentation and follow the specified 4 steps outlined here: https://github.com/kulshekhar/ts-jest#getting-started

Answer 4

If you want to see a demonstration on how to use jestjs with typescript, check out this link: https://github.com/mrdulin/jest-codelab

Here are the devDependencies listed in the package.json file:

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

To set up, create a file named jest.config.js in the root path of your project:

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

Once that's done, refer to the documentation and follow the specified 4 steps outlined here: https://github.com/kulshekhar/ts-jest#getting-started

Answer 5

Answer №3

Encountered an issue where my configuration file was named jest.config.ts. After attempting to run the command:

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

Simply changed the name from jest.config.ts to jest.config.js and it worked smoothly...

--

Received assistance from @shadowspan and @slideshowp2 in resolving this issue, much appreciated!

Answer 6

Encountered an issue where my configuration file was named jest.config.ts. After attempting to run the command:

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

Simply changed the name from jest.config.ts to jest.config.js and it worked smoothly...

--

Received assistance from @shadowspan and @slideshowp2 in resolving this issue, much appreciated!

Having trouble configuring Jest for TypeScript integration

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to limit the type of the second argument based on the type of the

Filtering strings with the same suffix

Problem with ngStyle: Error indicating that the expected '}' is missing

The value of type 'string' cannot be assigned to type '"menu" | "selectedMenu" | undefined' as it is not compatible with the specified types

Is there a more efficient method for coding this switch/case in TypeScript?

Using TypeScript and Angular to remove properties from an object

The 'checked' property cannot be bound to 'mat-button-toggle' as it is not recognized as a valid property in Angular 9

What if we had webpack disregard certain syntactic enhancements?

Which option is more beneficial for intercepting API data in Angular 6: interfaces or classes?

What is causing the geolocation heading to remain "null" on Android devices when using Chrome?

A guide on how to identify the return type of a callback function in TypeScript

Limiting the number of items shown in the dropdown panel of an NgSelect

Extending the declaration of JavaScript native methods is not possible when using TypeScript

Using ReactJS with Typescript: attempting to interpret a value as a type error is encountered (TS2749)

The subcategory was not factored into my npm package

Steps for updating the same array in TypeScript

The never-ending scroll feature in Vue.js

Is there a way to modify the style within a TS-File?

Strategies for displaying error messages in case of zero search results

Identify when the Vue page changes and execute the appropriate function