React+TS+MUI项目RTL测试报错及绝对导入问题求助

1. 修复MUI styled组件的SyntaxError错误 #

这个错误是因为Jest默认不转译node_modules里的ES模块代码，但MUI v5的styled相关依赖使用了ES模块语法，导致Jest无法识别import语句。

解决方法：在项目根目录的package.json中添加Jest配置，让Jest转译MUI及相关依赖：

"jest": {
  "transformIgnorePatterns": [
    "/node_modules/(?!(@mui|@emotion/react|@emotion/styled)/)"
  ]
}

通过transformIgnorePatterns排除@mui、@emotion/react和@emotion/styled，让babel-jest对这些包进行转译，解决模块语法不兼容问题。

2. 修复绝对导入路径无法识别的问题 #

首先确认你已经在tsconfig.json中配置了绝对导入的基础路径，比如：

"compilerOptions": {
  "baseUrl": "src",
  "paths": {
    "components/*": ["components/*"]
  }
}

接下来需要让Jest识别这些绝对路径，在package.json的jest配置里添加moduleNameMapper：

"jest": {
  // 保留上面的transformIgnorePatterns配置
  "moduleNameMapper": {
    "^components/(.*)$": "<rootDir>/src/components/$1"
  }
}

如果有多个绝对导入的根目录（比如utils、hooks），可以扩展配置：

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

或者更简洁的写法（适用于baseUrl为src的情况）：

"moduleNameMapper": {
  "^(components|utils|hooks)$": "<rootDir>/src/$1",
  "^(components|utils|hooks)/(.*)$": "<rootDir>/src/$1/$2"
}

修改完配置后，重启测试命令即可生效。

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