4

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

前端/游戏/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 都能够使用@别名解析模块导入，因为在我的构建或开发步骤中没有错误。

但是，当我运行 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模块解析文档的建议，以及专门关于设置 webpack/typescript/jest 项目的文章。

他们的建议通常围绕在 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 配置，在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$"
    ]
  },
  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对象中删除“前端”，放置和替换路径前和路径后的斜杠等），并切换设置，例如esModuleInterop，无济于事。

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

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

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

4

1 回答 1

-1

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

于 2019-08-04T16:19:16.340 回答