Jest не может найти @ babel / code-frame при попытке использовать @ alias

1

Наше приложение импортирует файлы с использованием синтаксиса стиля import ES2015, используя встроенную поддержку Webpack 4.6.0 для модулей ES2015. Мы также используем псевдоним, чтобы сократить наши относительные пути к файлам.

Webpack.conf.js

resolve: {
        extensions: ['.js', '.json', '.less'],
        alias: {
            '@': resolve('public/js'),
            'handlebars': 'handlebars/dist/handlebars.js',
        },
        modules: ['less', 'node_modules']
    },

example.js

import widget from '@/widgets/widget';

файловая структура

- webpack.conf.js
- .babelrc
- test/
- public/
- - js/
- - - widgets/
- - - - widget.js

Когда я импортировал пример example.js, который имеет import alias'd, Jest выдает ошибку, "не может разрешить модуль" @/widgets/widget ".

Согласно замечательно определенной статье, а также документации Jest, решение заключается в использовании ModuleNameMapper конфигурации Jest ModuleNameMapper для настройки соответствующего псевдонима ". Я попытался сделать это:

package.json

  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "@(.*)$": "<rootDir>/public/js/$1"
    },
    "verbose": true,
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "globals": {
      "NODE_ENV": "test"
    },
    "moduleFileExtensions": [
      "js"
    ],
    "moduleDirectories": [
      "node_modules"
    ]
  },

Также как правильно настроить babel:

.babelrc

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "test": {
                    "plugins": ["transform-es2015-modules-commonjs"]
                }
            }
        ],
        "es2015",
        "stage-2"
    ],
    "plugins": [
        "syntax-dynamic-import"
    ]
}

Теперь, когда я запускаю Jest (с флагом --no-cache всякий случай), я получаю эту ошибку:

test/test.test.js
  ● Test suite failed to run

    Configuration error:

    Could not locate module @babel/code-frame (mapped as /home/calebjay/Documents/ide/public/js/babel/code-frame)

    Please check:

    "moduleNameMapper": {
      "/@(.*)$/": "/home/calebjay/Documents/ide/public/js/$1"
    },
    "resolver": undefined

Я не могу найти @babel/code-frame где @babel/code-frame нибудь за пределами package-lock.json, и просто для хихиканья я package-lock.json все упоминания @{{anything}} и снова проверил тесты, тот же результат.

Является ли шутка каким-то образом перешагивает Babel? Как я могу заставить свои тесты работать с Jest, используя псевдонимы?

EDIT: Чтобы сузить то, что вызывается @babel/code-frame, я попытался удалить es2015 и stage-2 из .babelrc, чтобы не повлиять. Я попытался удалить свойство transform Jest config в package.json, чтобы не повлиять. Я попытался исключить env.test.plugins свойство из .babelrc, никакого эффекта. Такая же ошибка.

EDIT2: Думаю, может потребоваться какой-то другой пакет, я проверил package.json. Кажется, jest-message-util требует @babel/code-frame. Я вижу @babel/code-frame в моих node_modules, хотя... поэтому, возможно, проблема в том, что jester говорит "хорошо, все экземпляры @, превращаются в public/js"?

Теги:
jestjs
webpack
babeljs

1 ответ

3
Лучший ответ
"@(.*)$": "<rootDir>/public/js/$1"

преобразует @babel/code-frame в

"<rootDir>/public/js/babel/code-frame"

которого нет. Вам нужно сделать свой рисунок более конкретным и сделать

"@/(.*)$": "<rootDir>/public/js/$1"

Обратите внимание на добавление / в начале. Таким образом, он по-прежнему будет соответствовать вашим @/widgets/widget, но он не будет соответствовать другим облачным пакетам.

  • 0
    Да, это было это! Я пошел по более веселому пути и попытался ((^(?!@babel).*$)((?!@)(.*)$)) , Но по какой-то причине это не сработало.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню