Question

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

frontend / game / index.ts

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

我要导入index.ts的文件是 frontend/game/views/app.vue。 Webpack-dev-server，eslint和ts-loader都能够使用别名@解决模块导入问题，因为在我的构建或开发步骤中没有错误。

但是，当我开玩笑时，出现以下错误：

   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文件的第一行：

frontend / tests / game / models / file.spec.js

import App from '@/views/app';

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

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

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/')
    }
  },

Jest Config，位于moduleNameMapper下。我的：

package.json （我的笑话配置所在的位置）

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

使用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对象中删除“前端”，放置和替换路径前和路径后的斜杠等），并将设置esModuleInterop切换为无用。

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

编辑：引人入胜的是，在import语句之前添加//@ts-ignore，导致此错误“消失”，然后开玩笑地成功导入了文件。

EDIT2：tsignore步骤使我怀疑jest能否导入.vue文件，因此我在this issue on github和{{1}的typescript recommendations中进行了探索。 }文件。但是，我已经有一个.vue文件，与他们的建议相同。为了进行实验，我将其复制到了整个应用程序中，但是无论放在哪里，都没有效果。

Answer 1

您需要添加jest.config.js且配置与Webpack匹配的modulesNameMapper。看看这篇容易消化的文章：https://alexjover.com/blog/enhance-jest-configuration-with-module-aliases/

使用ts-jest和webpack的Jest能够识别并解析模块别名有什么必要？

1 个答案: