时间戳

首页 > 解决方案 > Jest 测试在 tsx 语法上失败

reactjs - Jest 测试在 tsx 语法上失败

问题描述

我目前正在对我的项目实施开玩笑测试。该项目由 ts + tsx 文件组成。以下是我的jest.config.js文件。

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
    }
  },
};

但是当我构建应用程序时，会抛出以下错误并失败。我在这里做错了什么？我尝试使用 ts-jest 和 babel-jest 转换 tsx 文件，但都因此错误而失败。

在此处输入图像描述

标签： reactjstypescriptjestjsts-jest

解决方案

.tsx 文件是用 Babel 而不是 TypeScript 处理的，Babel 不知道: ReactElement类型部分。

^.+\\.ts?$正则表达式不正确，因为它匹配 .t 和 .ts 文件，但不匹配 .tsx。

它应该是：

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

推荐阅读