如何在React中使用babel-plugin-rewire？及相关测试报错排查

看起来你在测试React组件时遇到了babel-plugin-rewire的方法调用错误，我来帮你一步步排查解决：

1. 先确认babel-plugin-rewire的安装与配置是否正确 #

首先确保你已经安装了依赖：

npm install --save-dev babel-plugin-rewire

然后在你的babel配置文件（.babelrc或babel.config.js）中针对测试环境添加这个插件：

{
  "env": {
    "test": {
      "plugins": ["babel-plugin-rewire"]
    }
  }
}

注意：如果用的是Create React App，默认无法直接修改babel配置，你需要用react-app-rewired配合customize-cra来添加插件，或者执行npm run eject后修改配置。

2. 检查组件的导出与导入方式 #

如果你的Header组件是用高阶组件（比如react-redux的connect）包裹后默认导出的，直接调用Header.__Rewire__会找不到方法——因为此时导出的是被包裹后的组件，而非原始组件。

你需要先获取原始组件：

// 如果是用connect包裹的组件，通过WrappedComponent访问原始组件
import Header from './Header';

Header.WrappedComponent.__Rewire__('profileAction', (a) => { a(); });

如果你的组件是命名导出的原始组件，直接导入命名导出即可：

import { Header } from './Header'; // 导入原始命名导出的组件
Header.__Rewire__('profileAction', (a) => { a(); });

3. 排查测试环境的兼容性问题 #

你使用的PhantomJS 1.9.8版本非常老旧，对ES6+特性的支持很差，很可能导致rewire注入的方法无法正常工作。建议你更换为现代的无头浏览器，比如ChromeHeadless：

• 安装karma-chrome-launcher（如果用Karma）或者直接在Jest中配置testEnvironment: 'jsdom'
• 彻底移除PhantomJS相关依赖，改用ChromeHeadless运行测试

4. 检查webpack打包配置（如果自行配置webpack） #

如果你的测试环境webpack开启了代码压缩、tree-shaking等优化，可能会把rewire注入的__Rewire__方法误删。确保测试环境的webpack配置中：

module.exports = {
  mode: 'development',
  optimization: {
    minimize: false,
    usedExports: false
  }
}

5. 验证组件是否被正确注入rewire方法 #

在测试代码中先打印组件对象，确认__Rewire__是否存在：

import Header from './Header';
console.log(Header); // 查看控制台输出，确认是否有__Rewire__方法

如果输出中没有这个方法，说明rewire插件没有正确生效，回到第一步检查babel配置。

最后，给你调整后的测试代码示例（假设Header是被connect包裹的组件）：

it('should dispatch profileAction', (done) => {
  // 访问原始组件并rewire依赖
  Header.WrappedComponent.__Rewire__('profileAction', (a) => { 
    a();
    done(); // 记得调用done结束异步测试
  });
  
  // 触发组件中调用profileAction的逻辑
  // ...你的测试逻辑
  
  // 测试结束后重置依赖，避免影响其他测试
  Header.WrappedComponent.__ResetDependency__('profileAction');
});

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