开玩笑没有找到别名路径

Question

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

\n

webpack.config.js\ntsconfig.json\nclient\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 jest.config.js\n|   tsconfig.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 AgentsView\n\xe2\x94\x82   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 AgentsView.tsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 OtherComponent\n\xe2\x94\x82   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 OtherComponent.tsx\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 test\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 AgentsView\n\xe2\x94\x82   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 AgentsView.spec.tsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 OtherComponent\n\xe2\x94\x82   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 OtherComponent.spec.tsx\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n

\n

我的webpack.config.js是这样的

\n

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

\n

我的tsconfig.json我添加了 2 个paths。

\n

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

\n

因此，我尝试./client/jest.config.js按如下方式更新：

\n

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

\n

我的client/test/tsconfig.json是

\n

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

\n

但当我运行测试时仍然出现错误。我不确定我在这里缺少什么，因为这个包含多个tsconfig文件的结构可能会令人困惑。

\n

Answer 1

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

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

请记住，键是正则表达式，因此值可以使用“$1”来使用匹配字符串。

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