React测试：如何用Jest+Enzyme访问HOC包裹子组件的状态、方法与生命周期

我来帮你搞定这个Jest+Enzyme测试子组件的问题！你遇到的访问子组件状态、验证方法调用，还有mount后选择器失效的情况，都是React测试里常见的坑，我一步步给你捋清楚：

1. 普通子组件（非HOC包裹） #

当用mount渲染父组件后，你可以通过find()定位到子组件，再用instance()获取组件实例，就能直接访问它的状态和方法了：

// 先导入子组件的引用
import Child from './Child';

const wrapper = mount(<Parent />);
// 用组件引用而非字符串选择器，定位更准确
const childInstance = wrapper.find(Child).instance();

// 获取子组件状态
expect(childInstance.state.selectedId).toEqual('someId');

// 验证子组件方法是否被调用（先mock方法）
Child.prototype.handleChange = jest.fn();
// 触发父组件中会调用子组件方法的动作
wrapper.find('.trigger-btn').simulate('click');
// 验证方法调用情况
expect(childInstance.handleChange).toHaveBeenCalledWith('expectedParam');

2. 被HOC包裹的子组件 #

如果子组件被connect、withRouter这类HOC包裹，直接find(Child)会找不到原始组件——因为HOC会返回一个新的包装组件。这时候可以用dive()方法穿透包装层，或者通过组件显示名称定位：

// 导入未被HOC包裹的原始子组件
import { Child } from './Child';

const wrapper = mount(<Parent />);
// 先找到HOC包装后的组件（比如显示名称是Connect(Child)），再dive()进入原始组件
const childInstance = wrapper.find('Connect(Child)').dive().instance();

// 之后就和普通组件一样操作了
expect(childInstance.state.searchQuery).toBe('test');

如果有多层HOC嵌套，你可以用wrapper.debug()打印完整渲染结构，看清组件层级后再逐层dive()。

要验证componentDidMount、componentDidUpdate这类生命周期，用Jest的spyOn mock方法就行：

// mock子组件的componentDidMount
jest.spyOn(Child.prototype, 'componentDidMount');

const wrapper = mount(<Parent />);
// 验证生命周期方法是否被调用
expect(Child.prototype.componentDidMount).toHaveBeenCalled();

// 若是HOC包裹的组件，记得先dive()再验证
jest.spyOn(OriginalChild.prototype, 'componentDidUpdate');
const wrapper = mount(<Parent />);
wrapper.find('WrappedChild').dive();
expect(OriginalChild.prototype.componentDidUpdate).toHaveBeenCalledWith(prevProps, prevState);

你之前的select [selected]选择器在单个组件渲染时有效，mount父组件后失效，大概率是这几个原因：

• DOM层级变化：mount父组件后，子组件的DOM被嵌套在父组件结构里，你可以用wrapper.debug()打印完整DOM，调整选择器（比如改成wrapper.find('.parent-container').find('select')）。
• 异步渲染延迟：如果子组件在componentDidMount里做了异步操作（比如请求数据），DOM更新会滞后。这时候要等待异步完成再断言：

it('should have correct selected value', async () => {
  const wrapper = mount(<Parent />);
  // 等待异步操作完成（模拟请求返回）
  await new Promise(resolve => setTimeout(resolve, 0));
  wrapper.update(); // 强制更新组件
  // 更可靠的方式是直接访问组件props/状态，而非DOM属性
  expect(wrapper.find(Child).instance().state.selectedId).toEqual('someId');
});

• React的受控组件特性：React的select通常用value属性控制选中状态，而非直接设置DOM的selected属性，你可以直接断言select的value props：

expect(wrapper.find('select').props().value).toEqual('someId');

• 尽量优先测试组件的外部行为（比如用户交互后的渲染结果、回调触发），而非内部状态/生命周期，这样测试更稳定。
• 测试完成后记得清除mock：jest.clearAllMocks()，避免影响其他测试用例。
• 用mount才会触发完整的生命周期，shallow只会渲染当前组件，不会触发子组件的生命周期。

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