运行Jest测试Antd组件时出现TypeError: (0 , _stylis.compile) is not a function错误

问题背景 #

测试渲染Ant Design组件时触发以下错误：

TypeError: (0 , _stylis.compile) is not a function

测试代码：

test('testing', () => {
  render(<Test />)
})

堆栈追踪：

at normalizeStyle (node_modules/@ant-design/cssinjs/lib/hooks/useStyleRegister.js:38:63)
    at node_modules/@ant-design/cssinjs/lib/hooks/useStyleRegister.js:245:22
    at node_modules/@ant-design/cssinjs/lib/hooks/useGlobalCache.js:35:37
    at Entity.update (node_modules/@ant-design/cssinjs/lib/Cache.js:25:23)
    at node_modules/@ant-design/cssinjs/lib/hooks/useGlobalCache.js:23:17

核心原因 #

结合你的依赖版本，问题出在两个方面：

1. 版本不兼容：你使用的antd@5.0.4（Ant Design 5）与@ant-design/pro-components@2.3.41不匹配——该版本的pro-components是为Ant Design 4开发的，会引入与Ant Design 5冲突的cssinjs依赖，导致stylis模块加载异常。
2. 测试环境配置缺失：Ant Design 5的@ant-design/cssinjs依赖stylis@4+，但Jest/jsdom环境默认可能无法正确解析该模块的导出结构。

解决方案 #

方案一：升级pro-components到兼容Ant Design 5的版本

这是最彻底的解决方式：

• 卸载旧版本：

  npm uninstall @ant-design/pro-components
  

• 安装适配Ant Design 5的最新版：

  npm install @ant-design/pro-components@latest
  

方案二：临时配置Jest兼容stylis模块

如果暂时无法升级pro-components，可通过Jest配置修复模块解析问题：

1. 修改jest.config.js，添加模块别名：

module.exports = {
  // 保留原有配置
  moduleNameMapper: {
    ...(module.exports.moduleNameMapper || {}),
    'stylis': 'stylis/dist/stylis.min.js',
  },
};

2. 或者在测试文件顶部手动模拟stylis的核心方法：

jest.mock('stylis', () => ({
  compile: jest.fn(() => ''),
  serialize: jest.fn(() => ''),
  stringify: jest.fn(() => ''),
}));

验证步骤 #

1. 删除node_modules和锁文件（package-lock.json/yarn.lock）
2. 重新安装依赖：npm install
3. 重新运行测试：npm test

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