RN引入@reduxjs/toolkit/query/react时测试报找不到react-dom模块

安全阿岳

2026-8-27

问题产生原因

入口适配场景错配：@reduxjs/toolkit/query/react是RTK Query为React Web环境提供的入口，内部依赖的react-redux逻辑会引用react-dom包实现状态更新批处理。React Native运行时的Metro打包器会自动做依赖适配，把这部分逻辑替换为RN原生的批处理实现，所以应用正常运行时不会报错；但Jest执行单元测试时走Node原生模块解析逻辑，不会应用Metro的RN适配规则，解析到对应文件时就会抛出找不到react-dom的错误。
版本冲突与Monorepo依赖解析问题：你当前使用的@reduxjs/toolkit@1.6.1版本发布时间较早，没有提供RN环境的独立导出入口，且自身嵌套依赖的react-redux版本和你项目手动安装的react-redux@8.0.2存在版本差，Lerna的依赖提升逻辑会打乱嵌套依赖的解析路径，进一步触发模块引用错误。
替换为@reduxjs/toolkit/query入口能通过测试的原因是：该入口是框架无关的核心逻辑层，不包含React相关的UI绑定代码，不会引入react、react-dom相关依赖，自然不会触发模块查找错误，但这个入口不会生成适配RN的hooks等能力，不适合作为生产环境的长期方案。

修复方案

优先升级依赖版本（推荐）：将@reduxjs/toolkit升级到1.9.0及以上版本，该版本后RTK专门为React Native提供了独立适配入口，内部批处理逻辑直接对接RN原生能力，完全不依赖react-dom，不管是运行时还是测试环境都不会出现模块找不到的问题。引入方式替换为：

import { createApi } from '@reduxjs/toolkit/query/react-native';

若暂时无法升级RTK版本，修改Jest配置适配RN环境：
1. 在Jest配置中增加模块映射规则，强制所有react-redux引用指向项目根目录安装的版本，避免嵌套依赖版本冲突，同时将react-dom映射为空mock模块；
2. 调整transformIgnorePatterns配置，让Babel正常处理RTK的ESM导出代码，避免解析异常。示例配置如下：

// jest.config.js
module.exports = {
  // 保留原有其他配置
  moduleNameMapper: {
    '^react-redux$': '<rootDir>/node_modules/react-redux',
    '^react-dom$': '<rootDir>/__mocks__/react-dom.js'
  },
  transformIgnorePatterns: [
    'node_modules/(?!(@reduxjs/toolkit)/)'
  ]
}

对应的react-dom mock文件只需要导出空对象即可：

// __mocks__/react-dom.js
export default {};

解决Monorepo下的依赖版本冲突：在项目根目录的package.json中增加版本强制规则，yarn环境使用resolutions字段，npm/pnpm环境使用overrides字段，强制整个仓库内所有依赖引用的react-redux版本统一为你项目安装的8.0.2版本，避免嵌套安装旧版本react-redux带来的多余依赖。

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