Reactjs 无法解析jest(CRA和自定义CRA)的模块别名
我使用CRA创建一个react应用程序,并添加重新布线的Reactjs 无法解析jest(CRA和自定义CRA)的模块别名,reactjs,create-react-app,Reactjs,Create React App,我使用CRA创建一个react应用程序,并添加重新布线的react应用程序和TypeScript 我将一些模块映射到tsconfig.json { "compilerOptions": { "baseUrl": "./src", "paths": { "@constants/*": ["constants/*"], "@components/*": ["components/*"], "@grid/*": ["components/Grid
react应用程序和TypeScript
我将一些模块映射到tsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@constants/*": ["constants/*"],
"@components/*": ["components/*"],
"@grid/*": ["components/Grid/*"],
"@grid-share/*": ["components/Grid/Share/*"],
"@utils/*": ["util/*"],
"@services/*": ["Services/*"]
}
},
"extends": "../tsconfig.json"
}
并在config overrides.js
const path = require('path');
const { override, addBabelPlugins } = require('customize-cra');
module.exports = override(
...addBabelPlugins(
[
'module-resolver',
{
root: ["./src"],
alias: {
"@constants": "./src/constants",
"@components": "./src/components",
"@grid": "./src/components/grid",
"@utils": "./src/util",
"@services": "./src/Services",
"@grid-share": "./src/components/Grid/Share"
}
}
],
),
);
对于纱线开始
,一切正常,但是对于纱线测试
,它无法解析定义的模块。我应该如何解析jest
的别名模块?好的,我找到了答案。我们需要在package.json中定义相同的模块别名
"jest": {
"moduleNameMapper": {
"@constants/(.*)": "<rootDir>/src/constants/$1",
"@utils/(.*)": "<rootDir>/src/util/$1",
"@grid-share/(.*)": "<rootDir>/src/components/Grid/Share/$1",
"@grid/(.*)": "<rootDir>/src/components/Grid/$1"
}
},
“开玩笑”:{
“moduleNameMapper”:{
“@constants/(.*):”/src/constants/$1“,
“@utils/(.*)”:“/src/util/$1”,
“@grid-share/(.*):”/src/components/grid/share/$1“,
@grid/(.*):“/src/components/grid/$1”
}
},
您是否尝试过设置节点路径=src
而不是使用别名?我在添加节点路径时使用了typescript。env它显示了一个警告,指出它不受欢迎。我只是友好地指出,您不需要重新安装react应用程序,CRA支持它;而且,在将CRA更新到新版本时,重新布线也会带来很多麻烦。这是链接:@ChristopherFrancisco:实际上这不是我能控制的。应用程序已经实现,公司也有一个管理UI模板,迫使我们重新布线