Javascript 使用Jest和Web包别名进行测试

我希望在使用jest时能够使用webpack别名来解析导入，最好是引用

webpack.alias

，以避免重复

笑话：

  "jest": {
    "modulePaths": ["src"],
    "moduleDirectories": ["node_modules"],
    "moduleNameMapper": {
      "^@shared$": "<rootDir>/shared/",
      "^@components$": "<rootDir>/shared/components/"
    }
  },

进口：

import Ordinal from '@shared/utils/Ordinal.jsx';
import Avatar from '@components/common/Avatar.jsx';

由于某些原因，

@

会导致问题，因此当删除时（在alias和import中），它可以找到

共享的
，但
组件仍然无法解决

 FAIL  src/shared/components/test/Test.spec.jsx
  ● Test suite failed to run

    Cannot find module '@shared/utils/Ordinal.jsx' from 'Test.jsx'

我已经试过使用，并且
FWIW，尝试切换别名顺序，保持更具体的向上和不太具体的向下，例如

"moduleNameMapper": {
  "^@components$": "<rootDir>/shared/components/",
  "^@shared$": "<rootDir>/shared/"
}

“moduleNameMapper”：{
“^@components$”：“/shared/components/”，
“^@shared$”：“/shared/”
}
因为我在再次阅读之前遇到了同样的问题，这次我更仔细地阅读了文档。正确的配置应为：

  "jest": {
    "moduleNameMapper": {
      "^@shared(.*)$": "<rootDir>/shared$1",
      "^@components(.*)$": "<rootDir>/shared/components$1"
    }
  },

“开玩笑”：{
“moduleNameMapper”：{
“^@shared（.*）$”：“/shared$1”，
“^@components（.*）$”：“/shared/components$1”
}
},
这似乎已被修复

以下是工作设置：

版本

const paths = {
  APP_DIR: path.resolve(__dirname, '..', 'src'),
};

exports.resolveRoot = [paths.APP_DIR, 'node_modules'];

exports.aliases = {
  '@root': path.resolve(paths.APP_DIR, ''),
  '@components': path.resolve(paths.APP_DIR, 'components'),
};

“玩笑”：“~20.0.4”

“网页包”：“^3.5.6”

package.json

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

没有一个规定的答案对我有效

能够使用以下模式解决问题：

笑话版本25+

moduleNameMapper: {
    '^Screens(.*)': '<rootDir>/src/screens/$1',
    '^Components(.*)': '<rootDir>/src/components/$1',
    '^Assets(.*)': '<rootDir>/src/assets/$1',
    '^Services/(.*)': '<rootDir>/src/services/$1',
  },

moduleNameMapper:{
“^Screens（.*）：”/src/Screens/$1“，
“^Components（.*）：”/src/Components/$1“，
“^Assets（.*）：”/src/Assets/$1“，
“^Services/（.*）：”/src/Services/$1“，
},
此解决方案对我很有效：

moduleNameMapper: {
    '^Screens(.*)': '<rootDir>/src/screens/$1',
    '^Components(.*)': '<rootDir>/src/components/$1',
    '^Assets(.*)': '<rootDir>/src/assets/$1',
    '^Services/(.*)': '<rootDir>/src/services/$1',
  },

moduleNameMapper:{
“^Screens（.*）：”/src/Screens/$1“，
“^Components（.*）：”/src/Components/$1“，
“^Assets（.*）：”/src/Assets/$1“，
“^Services/（.*）：”/src/Services/$1“，
},
这真是太疯狂了，但当我尝试在package.json中映射模块时，如下所示：

"jest": {
  "moduleNameMapper": {
    '@root/(.*)': '<rootDir>/../$1'
  }
}

使用：
“玩笑”：“^26.5.3”
和
“网页”：“4.41.5”
我能够正确地将
jest.config.js
中的webpack/typescript别名与以下模式匹配：

网页包配置：

module.exports = {
   // the rest of your config
    resolve: {
      alias: {
        'components': path.resolve(__dirname, 'js/app/components'),
        'modules': path.resolve(__dirname, 'js/app/modules'),
        'types': path.resolve(__dirname, 'js/types'),
        'hooks': path.resolve(__dirname, 'js/app/hooks'),
        'reducers': path.resolve(__dirname, 'js/app/reducers'),
        '__test-utils__': path.resolve(__dirname, 'js/app/__test-utils__') 
      }
    },
}

Jest.config.js：

  moduleNameMapper: {
    '^types/(.*)$':  '<rootDir>/js/types/$1',
    '^components/(.*)$': '<rootDir>/js/app/components/$1',
    '^modules/(.*)$':  '<rootDir>/js/app/modules/$1',
    '^hooks/(.*)$':  '<rootDir>/js/app/hooks/$1',
    '^reducers/(.*)$':  '<rootDir>/js/app/reducers/$1',
    '^__test-utils__/(.)$': '<rootDir>/js/app/__test-utils__/$1' 
  }

对于任何使用
@
作为其模块的
根
，您必须更加具体，因为其他lib可以在节点模块中使用
@

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

moduleNameMapper:{
“^@/（.*）$”：“/src/$1”
},

它转换为“任何与
@/
匹配的内容都应发送到
/src/
假设您的网页别名位于“已解析路径”块中的webpack.yml中

要在jest中添加相同的别名，如果jest配置在package.json中：


“开玩笑”：{
“模块目录”：{
".",
“/shared/components/”，
“/shared/”，
“节点_模块”
}
}
由于您使用了webpack-2，您是否在env:test中使用了
transform-es2015-modules-commonjs
？请参阅：
@
符号可能重复表示a，通常在您的第三方软件包路径中进行搜索。与leo的答案结合使用时，仍然会出现相同的错误。您是否可以共享完整信息e代码，最好是github？不幸的是，它不是一个私有的公司存储库。你能用最小可行的代码创建一个git repo吗？这个问题是可复制的？我也收到了同样的错误消息。我在创建了一个非常小的项目。我尝试了别名方法。不走运。我可能错过了一些东西示例。感谢任何帮助。我尝试实现此配置，但仍然存在相同的问题。它找不到导入的文件：
无法从“Test.jsx”中找到模块“@shared/utils/Ordinal.jsx”
。我必须使用
“modulePath:[“src”]
解析路径。然后，是的，此解决方案成功：
“^Commons$”：/Commons“
我遇到了与OP相同的问题，@mayid的解决方案最终为我解决了这个问题。如果你像我一样完全是新手，这个配置可以在你的
包.json
文件中找到。注意，配置可能位于
jest.config.js
中。
  moduleNameMapper: {
    '^types/(.*)$':  '<rootDir>/js/types/$1',
    '^components/(.*)$': '<rootDir>/js/app/components/$1',
    '^modules/(.*)$':  '<rootDir>/js/app/modules/$1',
    '^hooks/(.*)$':  '<rootDir>/js/app/hooks/$1',
    '^reducers/(.*)$':  '<rootDir>/js/app/reducers/$1',
    '^__test-utils__/(.)$': '<rootDir>/js/app/__test-utils__/$1' 
  }

    "paths": {
      "config": ["config/dev", "config/production"],
      "components/*": ["js/app/components/*"],
      "modules/*": ["js/app/modules/*"],
      "types/*": ["js/types/*"],
      "hooks/*": ["js/app/hooks/*"],
      "reducers/*": ["js/app/reducers/*"],
      "__test-utils__/*": ["js/app/__test-utils__/*"]
    }

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