typescript - Cần những gì để cho phép Jest, sử dụng ts-jest và webpack, nhận diện và phân tích các bí danh module?

Tôi có một tệp .ts mà tôi muốn thử nghiệm.

giao diện/người chơi/index.ts

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

Tệp mà tôi muốn nhập trong index.ts là frontend/game/views/app.vue. Webpack-dev-server, eslint và (tôi giả sử) ts-loader đều có khả năng giải quyết việc nhập module với alias @, vì không có lỗi nào trong các bước build hoặc phát triển của tôi.

Tuy nhiên, khi tôi chạy jest, tôi nhận được lỗi sau:

   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';
                      ~~~~~~~~~~~~~

Nó đề cập đến dòng đầu tiên của tệp file.spec.js của tôi:

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

import App from '@/views/app';

Tôi đã theo các khuyến nghị của tài liệu giải quyết module TypeScript, cũng như các bài viết về việc thiết lập dự án webpack/typescript/jest.

Các khuyến nghị của họ thường xoay quanh việc thiết lập bí danh ở 3 nơi:

1. cấu hình webpack, dưới resolve.alias. Của tôi:

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

2. Cấu hình Jest, dưới moduleNameMapper. Của tôi:

package.json (nơi chứa cấu hình jest của tôi)

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

3. Cấu hình Typescript, sử dụng baseUrl kết hợp với paths. Của tôi:

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/**/*"
  ]
}

Theo những gì tôi có thể nhận thấy, tôi đã làm theo hướng dẫn chính xác như chỉ định. Sau khi dò xét trên GitHub và StackOverflow, tôi vẫn không phát hiện được mình sai ở đâu, hay liệu có lỗi nào đang tồn tại hay không. Tôi đã thử nghiệm bằng cách thêm phần mở rộng .vue vào lệnh import, thử các tổ hợp đường dẫn khác nhau (ví dụ: loại bỏ "frontend" khỏi đối tượng paths, đặt và thay đổi các dấu gạch chéo trước và sau đường dẫn, v.v.), và bật/tắt các cài đặt như esModuleInterop, nhưng đều không thành công.

Làm thế nào để tôi có thể khiến Jest nhận diện các bí danh module của mình?

CHỈNH SỬA: Thật thú vị, thêm //@ts-ignore ngay trước câu lệnh import, khiến lỗi này "tự biến mất," và jest sau đó nhập tệp thành công.

EDIT2: Bước tsignore khiến tôi nghi ngờ khả năng của jest trong việc import một tệp .vue hoàn toàn, vì vậy tôi đã khảo sát vấn đề đó trong issue này trên Github cũng như các khuyến nghị của TypeScript về các tệp .vue. Tuy nhiên, tôi đã có một tệp vue-shims.d.ts giống hệt với những khuyến nghị của họ. Chỉ để thử nghiệm, tôi đã sao chép nó khắp ứng dụng, nhưng dù đặt nó ở đâu, cũng không có tác dụng gì.

Câu trả lời #1

Bạn cần thêm một file jest.config.js với cấu hình modulesNameMapper phù hợp với Webpack của bạn. Hãy xem bài viết dễ hiểu này: https://alexjover.com/blog/enhance-jest-configuration-with-module-aliases/