Наше приложение импортирует файлы с использованием синтаксиса стиля 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"?
"@(.*)$": "<rootDir>/public/js/$1"
преобразует @babel/code-frame
в
"<rootDir>/public/js/babel/code-frame"
которого нет. Вам нужно сделать свой рисунок более конкретным и сделать
"@/(.*)$": "<rootDir>/public/js/$1"
Обратите внимание на добавление /
в начале. Таким образом, он по-прежнему будет соответствовать вашим @/widgets/widget
, но он не будет соответствовать другим облачным пакетам.
((^(?!@babel).*$)((?!@)(.*)$))
, Но по какой-то причине это не сработало.