Jest: encountered an unexpected token when using ts-jest in React App

[ChangWenWu]

🐛 Bug Report

Hello, I am facing the issue that an unexpected token error happened when run tests with Jest in a React App.

 FAIL  test/UI.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/jarvis/Downloads/LR15.93_AwesomeCBS_CapitalMonitor/test/UI.test.tsx:21
            .create(<payment_monitoring_detail_1.default translation={stores_1.default().translation} paymentMonitor={stores_1.default().paymentMonitor} currencyStore={stores_1.default().currency} dictionaryStore={stores_1.default().dictionary} 
                    ^

    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.796s
Ran all test suites.

This is my package.json.

{
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@types/enzyme": "^3.10.3",
    "@types/lodash": "^4.14.139",
    "@types/moment": "^2.13.0",
    "@types/react-router-dom": "^4.3.5",
    "@types/react-test-renderer": "^16.9.1",
    "antd-mobile": "^2.3.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-intl": "^3.2.1",
    "react-router-cache-route": "^1.7.0",
    "react-router-dom": "^5.0.1"
  },
  "devDependencies": {
    "@types/jest": "^23.3.14",
    "@types/node": "11.10.4",
    "@types/react": "16.8.6",
    "@types/react-dom": "16.8.2",
    "customize-cra": "^0.2.12",
    "husky": "^1.3.1",
    "lint-staged": "^8.1.5",
    "postcss-normalize": "^7.0.1",
    "postcss-px-to-viewport": "^1.1.0",
    "prettier": "^1.16.4",
    "react-app-rewire-postcss": "^3.0.2",
    "react-app-rewire-typescript": "^2.0.2",
    "react-app-rewired": "^2.1.0",
    "react-scripts": "2.1.5",
    "source-map-explorer": "^1.7.0",
    "ts-import-plugin": "^1.5.5",
    "ts-jest": "^24.1.0",
    "tslint": "^5.13.1",
    "tslint-config-prettier": "^1.14.0",
    "tslint-eslint-rules": "^5.3.1",
    "tslint-react": "^3.6.0",
    "typescript": "3.3.3333"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "linters": {
      "src/**/*.{js,jsx,ts,tsx,json,md}": [
        "yarn lint",
        "prettier --write",
        "git add"
      ]
    }
  },
  "scripts": {
    "analyze": "source-map-explorer build/static/js/main.*",
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "jest --coverage --no-cache",
    "lint": "tslint --fix -c tslint.json './src/**/*.{ts,tsx}'"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

My jest.config.js file.

module.exports = {
  coverageDirectory: '<rootDir>/coverage',
  coverageReporters: ['lcov', 'html'],
  globals: {
    'ts-jest': {
      tsConfigFile: 'tsconfig.json'
    }
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  preset: 'ts-jest',
  testMatch: ['<rootDir>/test/**/?(*.)(spec|test).ts?(x)'],
  transform: {
    "\\.(js|jsx|ts|tsx)$": "ts-jest"
  },
  transformIgnorePatterns: ['<rootDir>/node_modules/']
};

To Reproduce

Run jest

Expected behavior

jest should run success

envinfo

  System:
    OS: macOS 10.15
    CPU: (12) x64 Intel(R) Xeon(R) CPU E5-1650 v2 @ 3.50GHz
  Binaries:
    Node: 8.11.3 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm

[SkaceKamen]

See https://github.com/kulshekhar/ts-jest/issues/937 - you probably have "jsx": "preserve" in your tsconfig.json, which means typescript compiler will just leave jsx tags in the code.

Changing it to "jsx": "react" will fix this, but you should examine if it affects your build process...

[SimenB]

ts-jest is not maintained in this repo - please report issues to them directly