没有找到别名路径

Question

我最近创建了一个别名路径来导入我的组件，这样我就可以避免导入像../../../../componentFolder这样的组件，而是导入@src/componentFolder。我的问题是，我的单元测试停止工作，因为它没有找到导入组件的路径。下面是我的文件结构。

webpack.config.js
tsconfig.json
client
├── jest.config.js
|   tsconfig.json
├── src
│   ├── AgentsView
│   |   ├── AgentsView.tsx
│   ├── OtherComponent
│   |   ├── OtherComponent.tsx
├── test
│   ├── AgentsView
│   |   ├── AgentsView.spec.tsx
│   ├── OtherComponent
│   |   ├── OtherComponent.spec.tsx
│   ├── tsconfig.json

我的webpack.config.js是这样的

module.exports = {
resolve: {
extensions: ['.mjs', '.js', '.ts', '.tsx', '.scss'],
alias: {
'@src': path.resolve(__dirname, './client/src/'),
'@components': path.resolve(__dirname, './client/src/components/'),
}
}, ...etc

和我的tsconfig.json我添加了2paths到它。

"compilerOptions": {
"jsx": "react",
"sourceMap": true,
"moduleResolution": "node",
"baseUrl": "client",
"paths": {
"@src/*": ["./src/*"],
"@components/": ["./src/components/*"]
},
},
"exclude": ["node_modules", "build"]

所以，我试着更新我的./client/jest.config.js如下:

module.exports = {
transform: {
'^.+\.tsx?$': 'ts-jest'
},
globals: {
'ts-jest': {
tsconfig: './client/test/tsconfig.json',
diagnostics: {
ignoreCodes: [151001]
}
}
},
setupFilesAfterEnv: ['./test/toolkit/Setup.js', 'jest-canvas-mock'],
testRegex: '/test/.*spec\.(jsx?|tsx?)$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
reporters: ['default', 'jest-junit'],
collectCoverage: true,
coverageDirectory: '../target/coverage/client',
coverageReporters: ['lcov'],
restoreMocks: true,
moduleNameMapper: {
'^@src(.*)': './src',
'^@components(.*)': './src/components',
}
};

我的client/test/tsconfig.json是

"compilerOptions": {
"moduleResolution": "node",
"baseUrl": "../",
"paths": {
"~/*": ["./*"],
"@src/*": ["./src/*"],
"@components/": ["./src/components/*"]
}
},

但是当我运行测试时，我仍然得到错误。我不确定我在这里缺失的确切位置，因为这个具有多个tsconfig文件的结构可能会令人困惑。

Answer 1

您的jest.config.js错误。模块名称映射器应该是:

moduleNameMapper: {
'^@src/(.*)': '<rootDir>/src/$1',
'^@components/(.*)': '<rootDir>/src/components/$1',
}

记住，键是一个正则表达式，所以值可以使用"$1"使用匹配字符串

顺便说一句，注意我使用<rootDir>/src而不是./src，我记得如果我不使用rootDir, jest就会出现问题。

Answer 2

我在Typescript代码中使用ts-jest,tsconfig-paths和tsconfig-paths-jest，因此它可以从我的tsconfig中读取路径。Json文件，而不是让我在2个不同的位置设置值。这些就在我的包裹里。

const tsconfig = require('./tsconfig.json');
const moduleNameMapper = require('tsconfig-paths-jest')(tsconfig);
module.exports = {
moduleNameMapper,
preset: 'ts-jest',
testEnvironment: 'node',
rootDir: './',
...
}