Jest test fails at tsx syntax

user_1488814 0
Viewed 226

I've currently implementing jest test to my project. The project consist of ts + tsx files. following is my jest.config.js file.

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  cacheDirectory: ".jest-cache",
  coverageDirectory: ".jest-coverage",
  coverageReporters: ["html", "text"],
  testMatch: ["**/target/**/components/**/__tests__/**/*.[jt]s?(x)"],
  transformIgnorePatterns: [
    "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)",
    "/app-extensions/"
  ],
  transform: {
    "^.+\\.jsx?$": "babel-jest",
    "^.+\\.ts?$": "ts-jest",
    '^.+\\.tsx?$': "babel-jest"
  },
  moduleNameMapper: {
    "\\.(css|jpg|png|svg)$": "<rootDir>/empty-module.js"
  },
  coverageThreshold: {
    global: {
      branches: 100,
      functions: 100,
      lines: 100,
      statements: 100
    }
  },
};

But when I build the application, the following error throws and fails. What am I doing wrong here? I tried transforming the tsx files using ts-jest and babel-jest but all fails at this error.

enter image description here

ts-jest jestjs typescript reactjs
1 Answers

.tsx files are processed with Babel instead of TypeScript, and Babel is unaware of : ReactElement type part.

^.+\\.ts?$ regular expression is incorrect because it matches .t and .ts files but not .tsx.

It should be:

  transform: {
    "^.+\\.jsx?$": "babel-jest",
    '^.+\\.tsx?$': "ts-jest"
  },
user_37315010
Related