Jest "encountered an unexpected token" on TSX/JSX syntax in CI

Jest ran your file through Node without first transforming TypeScript or JSX, so the parser hit syntax it does not understand. The caret in the error points at the first interface, type annotation, or <Component /> it could not parse.

What this error means

A test fails at load with "Jest encountered an unexpected token" and a snippet showing the offending TypeScript or JSX line. It often appears after adding a .tsx file without a matching transform.

Jest output

Details:

    /home/runner/work/app/src/Button.tsx:3
    export const Button = ({ label }: Props) => <button>{label}</button>;
                                       ^

    SyntaxError: Unexpected token, expected ";"

Common causes

No transform compiles the TypeScript or JSX

The transform config has no entry for .tsx/.ts, so Jest hands raw source to Node, which cannot parse type annotations or JSX.

babel-jest lacks the TypeScript or React preset

babel-jest runs but the Babel config is missing @babel/preset-typescript or @babel/preset-react, so the syntax passes through untransformed.

How to fix it

Add a transform for TypeScript and JSX

Install ts-jest or babel-jest with the right presets.
Map .ts/.tsx to the transform in the Jest config.
Re-run so Jest compiles the file before executing it.

jest.config.js

// jest.config.js
module.exports = {
  transform: { '^.+\\.tsx?$': 'ts-jest' },
};

Or add the Babel presets

If you transform with babel-jest, declare the TypeScript and React presets so the syntax compiles.

babel.config.js

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
};

How to prevent it

Keep a transform mapped for every source extension your tests import.
Match the Babel/ts-jest presets to the syntax you actually use.
Run the test command locally before pushing so a missing transform surfaces early.