使用 ts-jest 转换导入

Question

上下文：我在我的项目中使用了 jest、typescript、babel 和 material-ui。

我一直在调查我们的单元测试的性能问题，这似乎是由大多数单元测试导入整个 material-ui 引起的，因为我们从 @[ 导入它们=25=]。我一直在尝试使用 babel 插件来解决这个问题，无论是使用自定义插件还是 babel-plugin-transform-imports 包，它似乎也能满足我的要求。

问题是这个插件似乎从来没有被调用过。我们使用的是 ts-jest，因此它会同时通过 babel 和 typescript 编译器。但似乎 typescript 可能会在 babel 转换它们之前解析所有导入。

我考虑过只使用 babel 来完成所有的 typescript 编译，但是后来将 jest build 进程与我们使用的主要 build 进程分开维护。无论如何，我目前都无法正确地将其设置为运行。我也在考虑做一个自定义的笑话转换器，但这似乎比 babel 插件更脆弱，更难维护。

Jest配置：

"preset": "ts-jest",
"globals": {
  "ts-jest": {
    "babelConfig": {
        "presets": [
            "@babel/react",
            "@babel/env"
        ],
        "plugins": [
            "@babel/plugin-transform-spread",
            "./customPlugin.js"
        ]
    },
    "isolatedModules": true
  }
},
"testEnvironment": "jsdom",
"collectCoverageFrom": [
  <coverage paths>
],
"setupFiles": [
  <setup files>
],
"moduleFileExtensions": [
  "ts",
  "tsx",
  "js"
],
"moduleNameMapper": {
   <mappers>
},
"coverageDirectory": "./test/coverage",
"testResultsProcessor": "./node_modules/jest-html-reporter",
"transform": {
  "^.+\.tsx?$": "ts-jest",
  ".+\.jsx?$": "babel-jest",
  "\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileTransformer.js"
},
"testRegex": "/src/.*\.spec\.(ts|tsx)$",
"snapshotSerializers": [
  "enzyme-to-json/serializer"
]

我的 tsconfig 文件：

{
  "compilerOptions": {
    "sourceMap": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react",
    "lib":[ "es2015", "dom" ,"es2017"],
    "target": "es5",
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "baseUrl":  ".",
    "paths": {
      <custom paths>
    }
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "**/*.spec.ts",
    "**/*.spec.tsx"
  ]
}

Answer 1

看来我误解了打字稿编译器的输出。打字稿编译器正在将我所有的导入语句转换为要求，所以我正在寻找 ImportDeclaration 访问者的 babel 插件最终没有做任何事情。

我还发现 ts-jest 也有一个选项可以在打字稿上指定一个 ast 转换器： https://kulshekhar.github.io/ts-jest/docs/processing/

https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers

https://levelup.gitconnected.com/writing-typescript-custom-ast-transformer-part-1-7585d6916819

使用 ts-jest 转换导入

Transforming imports while using ts-jest

typescript

jestjs

babeljs

babel-jest

ts-jest