开玩笑找不到别名路径

Posted 2023-02-22

【中文标题】开玩笑找不到别名路径

【英文标题】：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 文件的结构可能会令人困惑。

【参考方案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，我会遇到玩笑的问题。