jest配置下引入@mui/material报TypeError: (0 , _style.default) is not a function如何解决

原有moduleNameMapper配置中的正则style$匹配范围过宽，会拦截所有导入路径以style结尾的模块，包括@mui内部用于处理样式逻辑的JS模块（比如各组件目录下的style.js功能性文件）。这类模块被替换为导出空对象的mock文件后，代码调用其内部导出的方法时就会抛出TypeError: (0 , _style.default) is not a function错误。

方案1：收窄样式文件匹配规则（推荐） #

将原规则修改为仅匹配实际样式文件后缀，避免误拦截正常JS模块：

// .jestrc.json
{
  ...
  "moduleNameMapper": {
    "\\.(css|less|scss|sass|styl)$": "<rootDir>/tests/mock.ts"
  }
}

方案2：添加@mui路径优先匹配规则 #

如果需要保留style$的原有匹配逻辑，可以在规则前新增@mui路径的直通规则，注意moduleNameMapper会按从上到下的顺序匹配：

// .jestrc.json
{
  ...
  "moduleNameMapper": {
    "^@mui/(.*)$": "<rootDir>/node_modules/@mui/$1",
    "style$": "<rootDir>/tests/mock.ts"
  }
}

方案3：适配mock文件导出 #

如果以上方案都不适用，可以修改mock文件的导出形式，兼容mui的调用逻辑：

// mock.ts
// 导出默认函数匹配调用逻辑
export default () => {}
// 若存在其他命名导出调用，可按需补充对应导出
export const styled = () => () => {}

内容的提问来源于stack exchange，提问作者user16435030