开玩笑找不到别名路径答案

【问题标题】：Jest not finding alias path开玩笑找不到别名路径
【发布时间】：2021-11-17 23:29:06
【问题描述】：

我最近创建了一个别名路径来导入我的组件，这样我就可以避免导入像 ../../../../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 我添加了 2 个paths。

"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 文件的结构可能会令人困惑。

【问题讨论】：

标签： javascript reactjs webpack jestjs ts-jest

【解决方案1】：

我使用带有 Typescript 代码的 ts-jest、tsconfig-paths 和 tsconfig-paths-jest，因此它可以从我的 tsconfig.json 文件中读取路径，而不是让我在 2 个不同的位置设置值。然后这些在我的 package.json 中作为 devDependencies。

const tsconfig = require('./tsconfig.json');
const moduleNameMapper = require('tsconfig-paths-jest')(tsconfig);

module.exports = {
    moduleNameMapper,
    preset: 'ts-jest',
    testEnvironment: 'node',

    rootDir: './',
    ...
}

【讨论】：

【解决方案2】：

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

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

记住，key是正则表达式，所以value可以使用"$1"来匹配字符串。

顺便说一句，请注意我使用了<rootDir>/src 而不是./src，我记得如果我不使用 rootDir，我会遇到玩笑的问题。

【讨论】：