我希望在使用jest时能够使用webpack别名来解析导入,最好是引用webpack.aliases
以避免重复。
Jest conf:
"jest": {
"modulePaths": ["src"],
"moduleDirectories": ["node_modules"],
"moduleNameMapper": {
"^@shared$": "<rootDir>/shared/",
"^@components$": "<rootDir>/shared/components/"
}
},
Webpack别名:
exports.aliases = {
'@shared': path.resolve(paths.APP_DIR, 'shared'),
'@components': path.resolve(paths.APP_DIR, 'shared/components'),
};
进口:
import Ordinal from '@shared/utils/Ordinal.jsx';
import Avatar from '@components/common/Avatar.jsx';
由于某些原因,@
会导致问题,因此当删除时(在别名和导入中),它可以找到shared
,但components
仍然无法解决。
FAIL src/shared/components/test/Test.spec.jsx
● Test suite failed to run
Cannot find module '@shared/utils/Ordinal.jsx' from 'Test.jsx'
我尝试使用jest-webpack-alias、babel-plugin-module-resolver和Jest/Webpack docs
9条答案
按热度按时间k4emjkb11#
这似乎已被修复。
下面是一个工作设置:
版本
"jest": "~20.0.4"
"webpack": "^3.5.6"
包.json
webpack.shared.js
j5fpnvbx2#
由于我遇到了同样的问题,我才再次阅读,这一次更仔细的文件。正确的配置应为:
8ftvxx2r3#
使用:
"jest": "^26.5.3",
和"webpack": "4.41.5",
,我能够正确地匹配我在jest.config.js
中的webpack/typescript别名:Webpack配置:
Jest.config.js:
以下是对这些符号的解释:
(.*)$
:捕获精确匹配之后的任何内容(目录)$1
:将其Map到我指定的目录中的这个值。和tsconfig.json:
gtlvzcf84#
对于任何使用
@
作为其模块的root
的人,您必须更加具体,因为其他库可以在节点模块中使用@
。它的意思是“任何与
@/
匹配的内容都应该发送到<rootDir>/src/<rest of the path>
sqxo8psd5#
FWIW,尝试切换别名顺序,保持更具体的向上和不太具体的向下,例如。
fruv7luv6#
没有一个建议的答案对我有用。
可以用下面的模式解决它:
Jest版本25+
0mkxixxg7#
这是一个真实的的疯狂,但当我试图像这样Mappackage.json中的模块时:
它不工作。
但是当我在
jest.config.js
中做同样的事情时,它可以工作:b5buobof8#
这个解决方案对我来说很好:
js81xvg69#
假设您的webpack别名位于webpack.yml中的“resolved_paths”块中。
要在jest中添加相同的别名,如果您的jest配置位于package.json中,请使用moduleDirectories: