Encountered an unexpected token error while using Jest with TypeScript, expecting a semicolon instead

I have been struggling to configure jest for use with typescript and despite trying several solutions, I am still facing issues. The error

SyntaxError: Unexpected token, expected ";"
keeps popping up, indicating that the configuration may not be compatible with typescript code. Here is the screenshot of the error message: https://i.sstatic.net/iGBCa.png

If anyone has any recommendations or suggestions, I would greatly appreciate it!

This is my package.json:

"jest": {
    "preset": "ts-jest",
    "testEnvironment": "node",
    "collectCoverageFrom": [
      "**/*.js",
      "**/*.ts",
      "!__tests__/util.ts",
      "!coverage/**",
      "!**/node_modules/**"
    ],
    "transform": {
      "^.+\\.tsx?$": "babel-jest"
    },
    "verbose": true,
    "automock": false,
    "clearMocks": true,
    "setupFilesAfterEnv": [
      "jest-extended"
    ],
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }

Here is my tsconfig.json file:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": false,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": false,
    "target": "esnext",
    "types": ["@emotion/core", "@types/jest", "jest"],
    "rootDir": ".",
    "baseUrl": ".",
    "noImplicitAny": false,
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Answer №1

It seems like the issue lies within the transform settings - currently, you have jest set to utilize babel-jest for handling tsx files, but it might be more suitable to use ts-jest instead.

If you prefer, you could potentially eliminate the transform setup altogether since the ts-jest preset can manage both ts and tsx formats automatically.

Answer №2

try using the esbuild-jest package

  transform: {
    '\\.[jt]sx?$': 'esbuild-jest',
  },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Surveying in TypeScript-React

I am currently working on incorporating a polling feature in React using TypeScript. This polling function is required to make a REST API call to retrieve a record from DynamoDB and then continue polling every 30 seconds until the 'Status' field ...

Angular 2 Component attribute masking

In my Angular 2 component called Foobar, I have defined a property named foobar: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-foobar', templateUrl: './foobar.component ...

Faulty deduction can occur when implementing the return statement in an identity function, or when incorporating an optional parameter

Encountering strange behavior while working on identity functions in a wizard system schema. Using a constrained identity function for inference is causing issues with one property that cannot be inferred when using the following: When the return value fr ...

Is there a way to assign a null value to an empty material UI text field when submitting the form, rather than an empty string?

One issue I am facing is that the default value of the text field is zero, but when I submit the form, the value of the text field becomes an empty string instead. This is not the intended behavior as I want the value to remain zero in the end. How can I r ...

Utilizing properties from the same object based on certain conditions

Here's a perplexing query that's been on my mind lately. I have this object with all the styles I need to apply to an element in my React app. const LinkStyle = { textDecoration : 'none', color : 'rgba(58, 62, 65, 1)', ...

Prisma Remix is throwing a TypeError: "The function (0, import_prisma.createNote) is not defined as a function."

In my project, I wrote a function using the prisma client which is being called from the notes.tsx route in remix. export async function createNote(entity: { title: string, description: string }) { const note = await prisma.note.create({ data: ...

Guide to setting up Cosmos DB database connection using NestJS version 9.0.0

I'm encountering issues when attempting to include the Cosmos DB connection module in nestjs v9, as I'm facing dependency errors. Nest is unable to resolve the dependencies of the AzureCosmosDbCoreModule (COSMOS_DB_CONNECTION_NAME, ?). Please ens ...

Having trouble with Angular 2 and ng2-file-upload when trying to load it using SystemJS

Currently, I am utilizing systemJS for package management in my project. In order to configure systemJS, I have included the following lines in the configuration file: { map: { 'ng2-file-upload': 'node_modules/ng2-file-upload' }, p ...

The current enablement status does not support the experimental syntax 'flow' (7:8):

Utilizing a Mono repo to share react native components with a react app has presented some challenges. When attempting to use a react native component from react, an error keeps popping up that I can't seem to resolve. I've attempted to follow t ...

Ways to elegantly replace an object with thorough validation of its embedded properties

Consider the following code snippet: interface Human{ name:string age:number dimensions : { height:number width:number } } const base : Human ={ name:"Base", age:12, dimensions : { height:190, width:99 } }; const child ...

Conditional Skipping of Lines in Node Line Reader: A Step-by-Step Guide

I am currently in the process of developing a project that involves using a line reader to input credit card numbers into a validator and identifier. If I input 10 numbers from four different credit card companies, I want to filter out the numbers from thr ...

Retrieving information from a JSON object in Angular using a specific key

After receiving JSON data from the server, I currently have a variable public checkId: any = 54 How can I extract the data corresponding to ID = 54 from the provided JSON below? I am specifically looking to extract the values associated with KEY 54 " ...

The issue of a mocked MobX store in Jest not resetting between tests is causing problems

I have a straightforward login component and a MobX store that holds user information. I am testing the integration using Jest. The application is built with Create React App, so my tests are based on that. This is what my Login component looks like: cons ...

Uncovering the mystery of retrieving form values from dynamic HTML in Angular 2

As a beginner in Angular 2, I am facing challenges extracting values from Dynamic HTML. My task involves having some Form Inputs and injecting Dynamic HTML within them that contain additional inputs. I followed the example by @Rene Hamburger to create the ...

Tips for removing a row from a DataGrid column with the click of a button

I am facing a challenge with my data table that contains users. I am trying to implement a delete button for each row, but it seems like the traditional React approach may not work in this situation. Currently, I am utilizing the DataGrid component in the ...

Ionic - Smooth horizontal tab scrolling for sorted categories

Currently, we are developing a web/mobile application that includes horizontal scroll tabs to represent Categories. While this feature works well on mobile devices, it requires additional functionality for web browsers. Specifically, we need to add two arr ...

Storing basic input values for a function

I am currently working on developing a versatile method that is capable of accepting any number of parameters, while storing the input type for future use. Let's take a look at an example: const customizedFunction = <A extends any[]>(innerFunct ...

What is the process of creating a for loop in FindById and then sending a response with Mongoose?

Is there a way to get all the data in one go after the for loop is completed and store it in the database? The code currently receives user object id values through req.body. If the server receives 3 id values, it should respond with 3 sets of data to th ...

Unable to load HomeComponent in Angular 4 due to an error

Currently working on creating an app using the "An API of Ice and Fire". Encountering an issue with a displayed error message "ERROR Error: "[object Object]"" when attempting to redirect to homeComponent. Attached are screenshots displaying the error: B ...

Leveraging global attributes beyond Vue components - Vue 3

I have created custom service instances in main.ts app.config.globalProperties.$service1 = new Service1(); app.config.globalProperties.$service2 = new Service2(); While I can use these instances inside Vue components, I also want to be able to utilize the ...