React+Typescript+Webpack项目中的Jest配置错误答案

【问题标题】：Jest configuration error in React+Typescript+Webpack projectReact+Typescript+Webpack项目中的Jest配置错误
【发布时间】：2021-01-22 14:47:51
【问题描述】：

我遇到了以下问题。仅供参考，我是 Jest 的初学者，所以请告诉我配置 Jest 有什么问题。

webpack.config.js

...

resolve: {
  extensions: ['.ts', '.tsx', '.js', '.json', '.scss'],
  alias: {
    'webextension-polyfill-ts': path.resolve(
      path.join(__dirname, 'node_modules', 'webextension-polyfill-ts')
    ),
    reducers: path.resolve(__dirname, 'source/redux'),
    routers: path.resolve(__dirname, 'source/routers'),
    source: path.resolve(__dirname, 'source'),
    ...
  },
},

...

这是package.json中的Jest配置

"jest": {
  ...
  "moduleNameMapper": {
    "^reducers": "<rootDir>/source/redux/$1",
    "^routers": "<rootDir>/source/routers/$1",
    "^source": "<rootDir>/source/$1",
    ...
  }
  ...
}

但是在运行测试文件时出现以下错误。

Configuration error:
    
Could not locate module source-map-support mapped as:
/Volumes/WORK/Development/project/source/$1.
    
Please check your configuration for these entries:
{
  "moduleNameMapper": {
    "/^source/": "/Volumes/WORK/Development/project/source/$1"
  },
  "resolver": undefined
}

【问题讨论】：

标签： javascript reactjs testing webpack jestjs

【解决方案1】：

问题似乎是您为moduleNameMapper 设置了错误的模式。正确的应该是：

{
  "moduleNameMapper": {
    "^reducers/(.*)$": "<rootDir>/source/redux/$1", // You missed the 2nd part `/(.*)`
    // ...
    ...
  }
}

【讨论】：

酷，谢谢！