React Material UI测试阶段styled-engine解析异常问题（服务/构建阶段正常）

我之前也碰到过一模一样的情况——在tsconfig里配置了@mui/styled-engine指向styled-engine-sc，webpack构建完全正常，但跑Jest测试就报找不到@emotion/styled的错误。核心原因是Jest不会自动读取tsconfig里的paths配置，它的模块解析逻辑和webpack是分开的，所以得单独给Jest做路径映射配置。

下面是具体的解决步骤：

1. 在Jest配置中添加模块映射 #

找到你的Jest配置文件（通常是jest.config.js，或者在package.json的jest字段里），添加moduleNameMapper配置，把@mui/styled-engine直接映射到@mui/styled-engine-sc的包路径：

module.exports = {
  // 保留你已有的其他配置（比如testMatch、transform等）
  moduleNameMapper: {
    // 关键配置：让Jest加载styled-components版本的样式引擎
    '@mui/styled-engine': '<rootDir>/node_modules/@mui/styled-engine-sc'
  }
};

如果你的项目用的是TypeScript+ts-jest，确保ts-jest已经正确配置，这个映射会覆盖默认的@mui/styled-engine模块，让Jest不再去加载依赖emotion的那个版本。

2. 额外的测试环境配置（可选） #

如果之后还遇到styled-components相关的测试问题，可以补充以下配置：

• 安装@testing-library/jest-dom来增强DOM断言能力
• 在Jest的setupFilesAfterEnv里引入它，同时确保styled-components的模块被正确解析：

module.exports = {
  preset: 'ts-jest',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  moduleNameMapper: {
    '@mui/styled-engine': '<rootDir>/node_modules/@mui/styled-engine-sc',
    '^styled-components$': require.resolve('styled-components')
  }
};

做完这些配置后，重新跑测试应该就能解决找不到@emotion/styled的问题了。

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