typescript - 让 Jest 使用 ts-jest 和 webpack 识别和解析模块别名需要什么？

Question

我有一个要测试的 .ts 文件。

前端/游戏/index.ts

import App from '@/views/app';
let app = new App({
  el: "#app",
});
export default app;

我想在 index.ts 中导入的文件是前端/游戏/views/app.vue 。 Webpack-dev-server、eslint 和(我假设)ts-loader 都能够使用 @ 别名解析模块导入，因为我的构建或开发步骤没有错误。

但是，当我运行 jest 时，出现以下错误:

   TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    frontend/game/index.ts:1:17 - error TS2307: Cannot find module '@/views/app'.

    1 import App from '@/views/app';
                      ~~~~~~~~~~~~~

它指的是我的file.spec.js文件的第一行:

前端/测试/游戏/模型/file.spec.js

import App from '@/views/app';

我已遵循 typescript module resolution documentation, 的建议以及articles specifically about setting up webpack/typescript/jest projects.

他们的建议通常围绕在 3 个地方设置别名:

1. webpack 配置，在 resolve.alias 下。我的:

webpack.config.js

module.exports = {
  entry: './frontend/game/index.ts',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'staticfiles')
  },
  resolve: {
    extensions: [ '.ts', '.js', '.vue', '.scss', '.sass'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, 'frontend/game/')
    }
  },

1. Jest Config，在 moduleNameMapper 下。我的:

package.json(我的 jest 配置所在的位置)

 "jest": {
    "verbose": true,
    "moduleFileExtensions": [
      "js",
      "json",
      "vue",
      "ts"
    ],
    "moduleDirectories": [
      "node_modules",
      "<rootDir>/frontend/game"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.ts$": "<rootDir>/node_modules/ts-jest"
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/frontend/game/$1",
      "\\.(css|less|sass|scss)$": "<rootDir>/frontend/tests/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/frontend/tests/fileMock.js"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!local-echo).+\\.js$"
    ]
  },

1. Typescript 配置，利用 baseUrl 结合 paths。我的:

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./built/",
    "sourceMap": true,
    "strict": false,
    "noImplicitReturns": true,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["frontend/game/*"]
    }
  },
  "include": [
    "./frontend/**/*"
  ]
}

据我所知，我完全按照说明进行了操作。在 github 和 stackoverflow 上四处窥探之后，我没有发现我做错了什么，或者现在是否有一些错误。我已经尝试将 .vue 扩展名添加到导入中，尝试路径实验​​的各种组合(即从 paths 对象中删除“前端”，放置和替换前和后-path 斜杠等)和切换设置(例如 esModuleInterop)，但无济于事。

如何让 Jest 识别我的模块别名？

编辑:令人着迷的是，在 import 语句之前立即添加 //@ts-ignore 会导致此错误“消失”，然后 jest 成功导入文件。

EDIT2:tsignore 这一步让我怀疑 jest 导入 .vue 文件的能力，所以我在 this issue on github 中进行了探索。以及 typescript recommendations在 .vue 文件上。但是，我已经有一个与他们的建议相同的 vue-shims.d.ts 文件。只是为了实验，我把它复制了整个应用程序，但无论我把它放在哪里，都没有效果。

Answer 1

您需要添加一个 jest.config.js 和 modulesNameMapper 配置匹配您的 Webpack。看看这篇易于理解的文章:https://alexjover.com/blog/enhance-jest-configuration-with-module-aliases/