使用create-react-app配置preact别名后，测试时无法找到react模块

你遇到的问题核心很明确：项目运行时依赖 Webpack 解析别名，所以能正常渲染，但测试用的 Jest 有独立的模块解析逻辑，它不会自动读取 Webpack 的 alias 配置。Jest 不知道你把 react 映射到了 preact-compat-enzyme，自然就会抛出"找不到模块"的错误。

你需要在 Jest 的配置中添加 moduleNameMapper 规则，对应 Webpack 里的别名设置，让 Jest 知道如何解析这些模块。这里有两种常用配置方式：

方式1：在 package.json 中直接添加 Jest 配置 #

打开项目根目录的 package.json，新增 jest 字段，把 Webpack 的别名转成 Jest 识别的映射规则：

{
  "jest": {
    "moduleNameMapper": {
      "^react$": "preact-compat-enzyme",
      "^react-dom$": "preact-compat-enzyme",
      "^react-dom/server$": "preact-render-to-string",
      "^react-addons-test-utils$": "preact-test-utils",
      "^react-addons-transition-group$": "preact-transition-group"
    }
  }
}

方式2：创建独立的 Jest 配置文件 #

如果你的项目已经 eject，也可以在根目录新建 jest.config.js 文件，写入以下配置：

module.exports = {
  moduleNameMapper: {
    '^react$': 'preact-compat-enzyme',
    '^react-dom$': 'preact-compat-enzyme',
    '^react-dom/server$': 'preact-render-to-string',
    '^react-addons-test-utils$': 'preact-test-utils',
    '^react-addons-transition-group$': 'preact-transition-group'
  }
};

• 确认所有相关依赖都已正确安装：运行 npm list preact-compat-enzyme preact-render-to-string preact-test-utils preact-transition-group，确保这些包都在依赖列表里。
• 如果测试文件中有特殊的深层导入（比如 react/lib/xxx 这类），可能需要补充对应的映射规则，但常规项目一般不会用到这类导入。

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