Что необходимо, чтобы Jest, используя ts-jest и webpack, распознавал и анализировал псевдонимы модулей? - PullRequest
Новая
       26

Что необходимо, чтобы Jest, используя ts-jest и webpack, распознавал и анализировал псевдонимы модулей?

2 голосов
/ 04 июня 2019

У меня есть файл .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 способны разрешить импорт модуля с псевдонимом @, поскольку в моих этапах сборки или разработки ошибок нет.

Однако, когда я запускаю 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 файла:

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

import App from '@/views/app';

Я выполнил рекомендации документации по разрешению модуля машинописи, , а также статейв частности, о настройке проектов webpack / typescript / jest.

Их рекомендации, как правило, связаны с настройкой псевдонима в 3 местах:

  1. config 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 config) 

 "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$"
    ]
  },
Конфигурация 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 распознавать псевдонимы моего модуля?

EDIT: увлекательно, добавление //@ts-ignore непосредственно перед оператором импорта приводит к тому, что эта ошибка "исчезает", "и Jest затем успешно импортирует файл.

EDIT2: шаг tsignore заставил меня с подозрением относиться к способности jest вообще импортировать файл .vue, поэтому я исследовал, что в эта проблема на github , а также на машинописи рекомендации на .vue файлах.Однако у меня уже есть файл vue-shims.d.ts, идентичный их рекомендациям.Просто чтобы поэкспериментировать, я скопировал все приложение, но независимо от того, куда я его положил, эффекта не было.

...