Ts-jest: create-react-app

[brigand]

Issue :

I'm getting the following error output in a create-react-app project (with --typescript) that hasn't ejected. This is the default test file create-react-app provides.

$ yarn jest

 PASS  src/utils/__tests__/value.test.ts
 FAIL  src/App.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:

    /<project>/src/App.test.tsx:11
        react_dom_1.default.render(<App_1.default />, div);
                                   ^

    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)

Expected behavior :

The file src/App.test.tsx should have the JSX compiled to createElement calls.

Debug log:

log file content

{"context":{"allowJs":false,"logLevel":20,"namespace":"jest-preset","package":"ts-jest","version":"24.0.2"},"message":"creating jest presets not handling JavaScript files","sequence":1,"time":"2019-06-06T19:54:36.471Z"}
{"context":{"logLevel":20,"namespace":"Importer","package":"ts-jest","version":"24.0.2"},"message":"creating Importer singleton","sequence":2,"time":"2019-06-06T19:54:38.045Z"}
{"context":{"allowJs":false,"logLevel":20,"namespace":"jest-preset","package":"ts-jest","version":"24.0.2"},"message":"creating jest presets not handling JavaScript files","sequence":3,"time":"2019-06-06T19:54:38.048Z"}
{"context":{"actualVersion":"24.8.0","expectedVersion":">=24 <25","logLevel":20,"namespace":"versions","package":"ts-jest","version":"24.0.2"},"message":"checking version of jest: OK","sequence":4,"time":"2019-06-06T19:54:38.049Z"}
{"context":{"baseOptions":{},"logLevel":20,"namespace":"jest-transformer","package":"ts-jest","transformerId":1,"version":"24.0.2"},"message":"created new transformer","sequence":5,"time":"2019-06-06T19:54:38.049Z"}
{"context":{"fileName":"/<project>/src/utils/__tests__/value.test.ts","logLevel":20,"namespace":"jest-transformer","package":"ts-jest","transformOptions":{"config":{"automock":false,"browser":false,"cache":true,"cacheDirectory":"/private/var/folders/mc/vh2gs_ds6f7gp71djqt10qq00000gn/T/jest_dx","clearMocks":false,"coveragePathIgnorePatterns":["/node_modules/"],"cwd":"/<project>","dependencyExtractor":null,"detectLeaks":false,"detectOpenHandles":false,"errorOnDeprecated":false,"filter":null,"forceCoverageMatch":[],"globalSetup":null,"globalTeardown":null,"globals":{},"haste":{"computeSha1":false,"providesModuleNodeModules":[],"throwOnModuleCollision":false},"moduleDirectories":["node_modules"],"moduleFileExtensions":["js","json","jsx","ts","tsx","node"],"moduleNameMapper":{},"modulePathIgnorePatterns":[],"name":"5f11714ee9f84e54914f8203a38b73a6","prettierPath":"prettier","resetMocks":false,"resetModules":false,"resolver":null,"restoreMocks":false,"rootDir":"/<project>","roots":["/<project>"],"runner":"jest-runner","setupFiles":[],"setupFilesAfterEnv":[],"skipFilter":false,"snapshotSerializers":[],"testEnvironment":"/<project>/node_modules/jest-environment-jsdom/build/index.js","testEnvironmentOptions":{},"testLocationInResults":false,"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[tj]s?(x)"],"testPathIgnorePatterns":["/node_modules/"],"testRegex":[],"testRunner":"/<project>/node_modules/@jest/core/node_modules/jest-jasmine2/build/index.js","testURL":"http://localhost","timers":"real","transform":[["^.+\\.tsx?$","/<project>/node_modules/ts-jest/dist/index.js"]],"transformIgnorePatterns":["/node_modules/"],"watchPathIgnorePatterns":[]},"instrument":false,"rootDir":"/<project>"},"transformerId":1,"version":"24.0.2"},"message":"computing cache key for /<project>/src/utils/__tests__/value.test.ts","sequence":6,"time":"2019-06-06T19:54:38.050Z"}
{"context":{"logLevel":30,"namespace":"jest-transformer","package":"ts-jest","transformerId":1,"version":"24.0.2"},"message":"no matching config-set found, creating a new one","sequence":7,"time":"2019-06-06T19:54:38.050Z"}
{"context":{"config":{"automock":false,"browser":false,"cache":true,"cacheDirectory":"/private/var/folders/mc/vh2gs_ds6f7gp71djqt10qq00000gn/T/jest_dx","clearMocks":false,"coveragePathIgnorePatterns":["/node_modules/"],"cwd":"/<project>","dependencyExtractor":null,"detectLeaks":false,"detectOpenHandles":false,"errorOnDeprecated":false,"filter":null,"forceCoverageMatch":[],"globalSetup":null,"globalTeardown":null,"globals":{},"haste":{"computeSha1":false,"providesModuleNodeModules":[],"throwOnModuleCollision":false},"moduleDirectories":["node_modules"],"moduleFileExtensions":["js","json","jsx","ts","tsx","node"],"moduleNameMapper":{},"modulePathIgnorePatterns":[],"name":"5f11714ee9f84e54914f8203a38b73a6","prettierPath":"prettier","resetMocks":false,"resetModules":false,"resolver":null,"restoreMocks":false,"rootDir":"/<project>","roots":["/<project>"],"runner":"jest-runner","setupFiles":[],"setupFilesAfterEnv":[],"skipFilter":false,"snapshotSerializers":[],"testEnvironment":"/<project>/node_modules/jest-environment-jsdom/build/index.js","testEnvironmentOptions":{},"testLocationInResults":false,"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[tj]s?(x)"],"testPathIgnorePatterns":["/node_modules/"],"testRegex":[],"testRunner":"/<project>/node_modules/@jest/core/node_modules/jest-jasmine2/build/index.js","testURL":"http://localhost","timers":"real","transform":[["^.+\\.tsx?$","/<project>/node_modules/ts-jest/dist/index.js"]],"transformIgnorePatterns":["/node_modules/"],"watchPathIgnorePatterns":[]},"logLevel":20,"namespace":"backports","package":"ts-jest","transformerId":1,"version":"24.0.2"},"message":"backporting config","sequence":8,"time":"2019-06-06T19:54:38.051Z"}
{"context":{"jestConfig":{"automock":false,"browser":false,"cache":true,"cacheDirectory":"/private/var/folders/mc/vh2gs_ds6f7gp71djqt10qq00000gn/T/jest_dx","clearMocks":false,"coveragePathIgnorePatterns":["/node_modules/"],"cwd":"/<project>","dependencyExtractor":null,"detectLeaks":false,"detectOpenHandles":false,"errorOnDeprecated":false,"filter":null,"forceCoverageMatch":[],"globalSetup":null,"globalTeardown":null,"globals":{"ts-jest":{}},"haste":{"computeSha1":false,"providesModuleNodeModules":[],"throwOnModuleCollision":false},"moduleDirectories":["node_modules"],"moduleFileExtensions":["js","json","jsx","ts","tsx","node"],"moduleNameMapper":{},"modulePathIgnorePatterns":[],"name":"5f11714ee9f84e54914f8203a38b73a6","prettierPath":"prettier","resetMocks":false,"resetModules":false,"resolver":null,"restoreMocks":false,"rootDir":"/<project>","roots":["/<project>"],"runner":"jest-runner","setupFiles":[],"setupFilesAfterEnv":[],"skipFilter":false,"snapshotSerializers":[],"testEnvironment":"/<project>/node_modules/jest-environment-jsdom/build/index.js","testEnvironmentOptions":{},"testLocationInResults":false,"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[tj]s?(x)"],"testPathIgnorePatterns":["/node_modules/"],"testRegex":[],"testRunner":"/<project>/node_modules/@jest/core/node_modules/jest-jasmine2/build/index.js","testURL":"http://localhost","timers":"real","transform":[["^.+\\.tsx?$","/<project>/node_modules/ts-jest/dist/index.js"]],"transformIgnorePatterns":["/node_modules/"],"watchPathIgnorePatterns":[]},"logLevel":20,"namespace":"config","package":"ts-jest","transformerId":1,"version":"24.0.2"},"message":"normalized jest config","sequence":9,"time":"2019-06-06T19:54:38.051Z"}
{"context":{"logLevel":20,"namespace":"config","package":"ts-jest","transformerId":1,"tsJestConfig":{"compiler":"typescript","diagnostics":{"ignoreCodes":[6059,18002,18003],"pretty":true,"throws":true},"isolatedModules":false,"packageJson":{"kind":"file"},"transformers":[],"tsConfig":{"kind":"file"}},"version":"24.0.2"},"message":"normalized ts-jest config","sequence":10,"time":"2019-06-06T19:54:38.051Z"}
{"context":{"logLevel":20,"namespace":"config","package":"ts-jest","transformerId":1,"version":"24.0.2"},"message":"babel is disabled","sequence":11,"time":"2019-06-06T19:54:38.061Z"}
{"context":{"logLevel":20,"namespace":"Importer","package":"ts-jest","requireResult":{"exists":true,"given":"typescript","path":"/<project>/node_modules/typescript/lib/typescript.js"},"version":"24.0.2"},"message":"loaded module typescript","sequence":12,"time":"2019-06-06T19:54:38.267Z"}
{"context":{"logLevel":20,"namespace":"Importer","package":"ts-jest","version":"24.0.2"},"message":"patching typescript","sequence":13,"time":"2019-06-06T19:54:38.267Z"}
{"context":{"actualVersion":"3.4.3","expectedVersion":">=2.7 <4","logLevel":20,"namespace":"versions","package":"ts-jest","version":"24.0.2"},"message":"checking version of typescript: OK","sequence":14,"time":"2019-06-06T19:54:38.268Z"}
{"context":{"logLevel":20,"namespace":"config","package":"ts-jest","transformerId":1,"tsConfigFileName":"/<project>/tsconfig.json","version":"24.0.2"},"message":"readTsConfig(): reading /<project>/tsconfig.json","sequence":15,"time":"2019-06-06T19:54:38.268Z"}
{"context":{"logLevel":20,"namespace":"config","package":"ts-jest","transformerId":1,"tsconfig":{"input":{"compilerOptions":{"target":"es5"},"extends":"./tsconfig.base.json"},"resolved":{"compileOnSave":false,"configFileSpecs":{"includeSpecs":["src"],"validatedIncludeSpecs":["src"],"wildcardDirectories":{"/<project>/src":1}},"errors":[],"fileNames":["/<project>/src/App.test.tsx","/<project>/src/App.tsx","/<project>/src/constants.ts","/<project>/src/helpers.constants.ts","/<project>/src/index.tsx","/<project>/src/react-app-env.d.ts","/<project>/src/routes.tsx","/<project>/src/serviceWorker.ts","/<project>/src/setupProxy.js","/<project>/src/store.ts","/<project>/src/types.ts","/<project>/src/comp/CrossIcon.tsx","/<project>/src/comp/Image.tsx","/<project>/src/comp/Link.tsx","/<project>/src/comp/Logo.tsx","/<project>/src/comp/MessageDisplay.tsx","/<project>/src/comp/PageSegment.tsx","/<project>/src/comp/ScrollToMe.tsx","/<project>/src/comp/Snack.tsx","/<project>/src/comp/SnackOutlet.tsx","/<project>/src/feat/Auth/AuthRefresh.tsx","/<project>/src/feat/Main/Main.tsx","/<project>/src/feat/Main/mainNavItems.tsx","/<project>/src/feat/Review/ReviewContent.tsx","/<project>/src/feat/Review/ReviewHome.tsx","/<project>/src/feat/Review/ReviewItem.tsx","/<project>/src/feat/Review/ReviewMain.tsx","/<project>/src/feat/Review/ReviewPage.tsx","/<project>/src/feat/Review/reviewApis.ts","/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/feat/<project>/src/models/users.model.ts","/<project>/src/utils/api.ts","/<project>/src/utils/cast.ts","/<project>/src/utils/date.ts","/<project>/src/utils/events.ts","/<project>/src/utils/idGen.ts","/<project>/src/utils/imageUtils.ts","/<project>/src/utils/merge.ts","/<project>/src/utils/page.tsx","/<project>/src/utils/time.ts","/<project>/src/utils/typeof.ts","/<project>/src/utils/useCounter.ts","/<project>/src/utils/useMultiMemo.ts","/<project>/src/utils/usePromise.ts","/<project>/src/utils/user.ts","/<project>/src/utils/utils.ts","/<project>/src/utils/validate.ts","/<project>/src/utils/value.ts","/<project>/src/utils/__tests__/value.test.ts"],"options":{"allowJs":true,"allowSyntheticDefaultImports":true,"configFilePath":"/<project>/tsconfig.json","declaration":false,"esModuleInterop":true,"forceConsistentCasingInFileNames":true,"inlineSourceMap":false,"inlineSources":true,"isolatedModules":true,"jsx":1,"lib":["lib.dom.d.ts","lib.dom.iterable.d.ts","lib.esnext.d.ts"],"module":1,"moduleResolution":2,"noEmit":false,"noImplicitReturns":true,"noUnusedLocals":true,"outDir":"$$ts-jest$$","removeComments":false,"resolveJsonModule":true,"skipLibCheck":true,"sourceMap":true,"strict":true,"target":1},"raw":{"compileOnSave":false,"compilerOptions":{"target":"es5"},"extends":"./tsconfig.base.json","include":["src"]},"typeAcquisition":{"enable":false,"exclude":[],"include":[]},"wildcardDirectories":{"/<project>/src":1}}},"version":"24.0.2"},"message":"normalized typescript config","sequence":16,"time":"2019-06-06T19:54:38.281Z"}
{"context":{"fileName":"/<project>/src/utils/value.ts","logLevel":20,"namespace":"jest-transformer","package":"ts-jest","transformOptions":{"config":{"automock":false,"browser":false,"cache":true,"cacheDirectory":"/private/var/folders/mc/vh2gs_ds6f7gp71djqt10qq00000gn/T/jest_dx","clearMocks":false,"coveragePathIgnorePatterns":["/node_modules/"],"cwd":"/<project>","dependencyExtractor":null,"detectLeaks":false,"detectOpenHandles":false,"errorOnDeprecated":false,"filter":null,"forceCoverageMatch":[],"globalSetup":null,"globalTeardown":null,"globals":{},"haste":{"computeSha1":false,"providesModuleNodeModules":[],"throwOnModuleCollision":false},"moduleDirectories":["node_modules"],"moduleFileExtensions":["js","json","jsx","ts","tsx","node"],"moduleNameMapper":{},"modulePathIgnorePatterns":[],"name":"5f11714ee9f84e54914f8203a38b73a6","prettierPath":"prettier","resetMocks":false,"resetModules":false,"resolver":null,"restoreMocks":false,"rootDir":"/<project>","roots":["/<project>"],"runner":"jest-runner","setupFiles":[],"setupFilesAfterEnv":[],"skipFilter":false,"snapshotSerializers":[],"testEnvironment":"/<project>/node_modules/jest-environment-jsdom/build/index.js","testEnvironmentOptions":{},"testLocationInResults":false,"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[tj]s?(x)"],"testPathIgnorePatterns":["/node_modules/"],"testRegex":[],"testRunner":"/<project>/node_modules/@jest/core/node_modules/jest-jasmine2/build/index.js","testURL":"http://localhost","timers":"real","transform":[["^.+\\.tsx?$","/<project>/node_modules/ts-jest/dist/index.js"]],"transformIgnorePatterns":["/node_modules/"],"watchPathIgnorePatterns":[]},"instrument":false,"rootDir":"/<project>"},"transformerId":1,"version":"24.0.2"},"message":"computing cache key for /<project>/src/utils/value.ts","sequence":17,"time":"2019-06-06T19:54:38.284Z"}
{"context":{"fileName":"/<project>/src/utils/typeof.ts","logLevel":20,"namespace":"jest-transformer","package":"ts-jest","transformOptions":{"config":{"automock":false,"browser":false,"cache":true,"cacheDirectory":"/private/var/folders/mc/vh2gs_ds6f7gp71djqt10qq00000gn/T/jest_dx","clearMocks":false,"coveragePathIgnorePatterns":["/node_modules/"],"cwd":"/<project>","dependencyExtractor":null,"detectLeaks":false,"detectOpenHandles":false,"errorOnDeprecated":false,"filter":null,"forceCoverageMatch":[],"globalSetup":null,"globalTeardown":null,"globals":{},"haste":{"computeSha1":false,"providesModuleNodeModules":[],"throwOnModuleCollision":false},"moduleDirectories":["node_modules"],"moduleFileExtensions":["js","json","jsx","ts","tsx","node"],"moduleNameMapper":{},"modulePathIgnorePatterns":[],"name":"5f11714ee9f84e54914f8203a38b73a6","prettierPath":"prettier","resetMocks":false,"resetModules":false,"resolver":null,"restoreMocks":false,"rootDir":"/<project>","roots":["/<project>"],"runner":"jest-runner","setupFiles":[],"setupFilesAfterEnv":[],"skipFilter":false,"snapshotSerializers":[],"testEnvironment":"/<project>/node_modules/jest-environment-jsdom/build/index.js","testEnvironmentOptions":{},"testLocationInResults":false,"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[tj]s?(x)"],"testPathIgnorePatterns":["/node_modules/"],"testRegex":[],"testRunner":"/<project>/node_modules/@jest/core/node_modules/jest-jasmine2/build/index.js","testURL":"http://localhost","timers":"real","transform":[["^.+\\.tsx?$","/<project>/node_modules/ts-jest/dist/index.js"]],"transformIgnorePatterns":["/node_modules/"],"watchPathIgnorePatterns":[]},"instrument":false,"rootDir":"/<project>"},"transformerId":1,"version":"24.0.2"},"message":"computing cache key for /<project>/src/utils/typeof.ts","sequence":18,"time":"2019-06-06T19:54:38.290Z"}
{"context":{"baseOptions":{},"logLevel":20,"namespace":"jest-transformer","package":"ts-jest","transformerId":2,"version":"24.0.2"},"message":"created new transformer","sequence":19,"time":"2019-06-06T19:54:38.373Z"}
{"context":{"fileName":"/<project>/src/App.test.tsx","logLevel":20,"namespace":"jest-transformer","package":"ts-jest","transformOptions":{"config":{"automock":false,"browser":false,"cache":true,"cacheDirectory":"/private/var/folders/mc/vh2gs_ds6f7gp71djqt10qq00000gn/T/jest_dx","clearMocks":false,"coveragePathIgnorePatterns":["/node_modules/"],"cwd":"/<project>","dependencyExtractor":null,"detectLeaks":false,"detectOpenHandles":false,"errorOnDeprecated":false,"filter":null,"forceCoverageMatch":[],"globalSetup":null,"globalTeardown":null,"globals":{},"haste":{"computeSha1":false,"providesModuleNodeModules":[],"throwOnModuleCollision":false},"moduleDirectories":["node_modules"],"moduleFileExtensions":["js","json","jsx","ts","tsx","node"],"moduleNameMapper":{},"modulePathIgnorePatterns":[],"name":"5f11714ee9f84e54914f8203a38b73a6","prettierPath":"prettier","resetMocks":false,"resetModules":false,"resolver":null,"restoreMocks":false,"rootDir":"/<project>","roots":["/<project>"],"runner":"jest-runner","setupFiles":[],"setupFilesAfterEnv":[],"skipFilter":false,"snapshotSerializers":[],"testEnvironment":"/<project>/node_modules/jest-environment-jsdom/build/index.js","testEnvironmentOptions":{},"testLocationInResults":false,"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[tj]s?(x)"],"testPathIgnorePatterns":["/node_modules/"],"testRegex":[],"testRunner":"/<project>/node_modules/@jest/core/node_modules/jest-jasmine2/build/index.js","testURL":"http://localhost","timers":"real","transform":[["^.+\\.tsx?$","/<project>/node_modules/ts-jest/dist/index.js"]],"transformIgnorePatterns":["/node_modules/"],"watchPathIgnorePatterns":[]},"instrument":false,"rootDir":"/<project>"},"transformerId":2,"version":"24.0.2"},"message":"computing cache key for /<project>/src/App.test.tsx","sequence":20,"time":"2019-06-06T19:54:38.374Z"}

Config files

Relevant package.json versions:

{
  "@types/jest": "^24.0.13",
  "ts-jest": "^24.0.2",
  "jest": "^24.8.0",
  "tsc": "^1.20150623.0",
  "typescript": "3.4.3",
  "react-scripts": "2.1.8",
}

jest.config.js (same error with testEnvironment: 'node')

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

// tsconfig.json
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "target": "es5"
  }
}

// tsconfig.base.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "noImplicitReturns": true,
    "noUnusedLocals": true
  },
  "include": ["src"]
}

// server/tsconfig.json
{
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "target": "es6",
    "outDir": "../dist-server",
    "sourceMap": true,
    "noEmit": false,
    "module": "commonjs",
    "rootDir": "../",
    "typeRoots": ["../node_modules/@types", "./types"]
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules", "**/*.spec.ts", "**/*.json"]
}

[venil7]

It's been ten days and not a single comment from maintainer, this issue basically stops me from having any tests

[larrybotha]

@brigand and @venil7 have a look at an answer on this issue: https://github.com/kulshekhar/ts-jest/issues/937#issuecomment-456814377

I was having the same issue with the latest CRA as this issue describes.

Using "jsx": "react" in tsconfig.json fixed compile issues.

No idea how preserve differs from react.

EDIT: alternatively you can use babel-jest instead of ts-jest, and without modifying your tsconfig.json, as babel now supports TypeScript.

[christian-eriksson]

The problem with "jsx": "react" is that is the app is created with create-react-app script and is not ejected running yarn start will reset the "jsx" setting.

It seems to me like one would need to run another preprocessor after ts-jest to transpile the *.jsx into .js. Haven't figured out how though.

[christian-eriksson]

I've tried to create a minimum example:

If we switch "jsx": "preserve" to "jsx": "react" in the tsconfig.json yarn test works. Otherwise we get the error described by @brigand

// src/MyComponent.tsx
import React from 'react';

export default class MyComponent extends React.Component {
    constructor(props: any) {
      super(props);
    }
    render() {
      return (<div><p>My Test Component</p></div>);
    }
  }

// src/__test__/MyComponent.test.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import MyComponent from '../MyComponent';

let container: any = 0;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

test('can render', () => {
  act(() => {
    ReactDOM.render(<MyComponent />, container);
  });
});

// package.json
{
  "name": "jest-ts-test",
  "description": "minimal project for jest typescript test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest --config=jest.config.json"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "@types/react": "^16.8.17",
    "@types/jest": "^24.0.13",
    "@types/react-dom": "16.8.4",
    "jest": "24.7.1",
    "ts-jest": "^24.0.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "typescript": "3.4.5"
  }
}

// jest.config.json
{
  "roots": [
    "src"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "preserve" // change to "jsx": "react" and it works
  },
  "include": [
    "src"
  ]
}

[christian-eriksson]

Found a fix for my example, to run babel-jest after ts-jest install the required packages:

$ yarn add --dev babel-jest @babel/core @babel/preset-env @babel/preset-react

configure jest:

// jest.config.json
{
  "roots": [
    "src"
  ],
  "preset": "ts-jest",
  "testEnvironment": "jsdom",
  "globals": {
    "ts-jest": {
      "babelConfig": {
        "presets": ["@babel/preset-env", "@babel/preset-react"]
      }
    }
  }
}

I also had to add "module": "esnext" to the compilerOptions in tsconfig.json so the final example:

// tsconfig.json
{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "preserve",
    "module": "esnext"
  },
  "include": [
    "src"
  ]
}

// package.json
{
  "name": "jest-ts-test",
  "description": "minimal project for jest typescript test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest --config=jest.config.json"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "@types/jest": "^24.0.13",
    "@types/react": "^16.8.17",
    "@types/react-dom": "16.8.4",
    "babel-jest": "^24.8.0",
    "jest": "24.7.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "ts-jest": "^24.0.2",
    "typescript": "3.4.5"
  }
}

No changes to src/MyComponent.tsx nor src/__test__/MyComponent.test.tsx.

[CodingDive]

I had the same problem and tried @SirSkorpan's solution to no avail. I fixed the issue as seen in this sample repository. It is quite minimalistic so you may want to fork it to try to replicate the issues you are experiencing. https://github.com/ReasonableDeveloper/jest-unexpected-token-issue

The solution was to specify the jest configuration inline https://github.com/facebook/create-react-app/issues/2537#issuecomment-406166713. Since I no longer have an external jest.config.json, I'm wondering if I even still need ts-jest.

Edit: I uninstalled ts-jest as not a lot of customizations were required for my setup. I try to always keep a tsc -w process running and the tests even automatically rerun after changes to code when simply running yarn test with a standard TypeScript CRA app.

[mubaidr]

You can also specify relative config for babel, like: https://github.com/kulshekhar/ts-jest/issues/1045#issuecomment-528720170

[ahnpnl]

Hi, I tried create-react-app latest and they don't use ts-jest by default anymore so I gonna close this issue because it's irrelevant to this preset.

I have setup a sample repo for react here if you are interested in using ts-jest together with babel for a React project.

Happy testing !