Unexpected token for TypeScript decorator

Question

I want to test some code which uses the newly added decorators in TypeScript 5.0 (not experimental decorators), how can I make Jest interpret that code?

I get SyntaxError: Invalid or unexpected token when it meets a @

My jest.config.js looks like this

module.exports = {
  preset: 'ts-jest',
  transform: {
    '^.+\\.(ts|tsx)?$': ['ts-jest', {
      tsConfig: 'tsconfig.esm.json'
    }],
    "^.+\\.(js|jsx)$": "babel-jest",
  }
};

tsconfig.esm.json

{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "outDir": "dist/esm",
    "declaration": true,
    "declarationMap": true,
    "declarationDir": "dist/types",
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "nodenext",
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"]
    }
  },
  "include": ["src/*.ts","src/**/*.ts", "test/*.ts"],
  "exclude": ["node_modules"]
}

and babel.config.js

module.exports = {presets: ['@babel/preset-env']}

Penury

@jonrsharpe I'm not using experimental decorators, I'm using the native decorators included in typescript 5.0^ – Penury

Answer 1

I'm using Jest with SWC and I had the same issue (same error).
And what helped, was creating a ".swcrc" file with this content:

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "decorators": true
    },
    "transform": {
      "legacyDecorator": true
    }
  }
}

And the SWC has support for stage 3 decorators too!

Handbarrow