Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

create-react-app

See original GitHub issue

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"]
}