如何用Jest+Enzyme+React模拟Toolbar组件中子组件的Props？

嘿，我懂你想确保Toolbar组件内部子组件的Props设置完全符合预期，尤其是那些回调函数的逻辑对吧？用Enzyme来做这个测试确实可行，而且不一定非要用setProps——我们可以直接针对内部子组件的Props和回调逻辑来验证，下面给你具体的实现步骤：

1. 基础准备：挂载Toolbar组件 #

首先我们需要把Toolbar组件挂载到Enzyme的wrapper中，这里推荐用mount（如果需要完整渲染嵌套组件）或者shallow（如果只需要浅渲染，避免依赖子组件的实现）。示例代码如下：

import { mount, shallow } from 'enzyme';
import Toolbar from './Toolbar';
import ComponentB from './ComponentB';
import ComponentC from './ComponentC';

describe('Toolbar Component', () => {
  let wrapper;

  beforeEach(() => {
    // 每次测试前重新挂载组件，保证测试隔离
    wrapper = mount(<Toolbar />);
    // 如果用浅渲染的话：wrapper = shallow(<Toolbar />);
  });
});

2. 验证ComponentB的onRenderItem Prop #

首先我们可以检查Toolbar是否正确把自身的renderItem方法传递给了ComponentB：

it('should pass the correct onRenderItem prop to ComponentB', () => {
  // 找到ComponentB实例
  const componentB = wrapper.find(ComponentB);
  // 断言onRenderItem就是Toolbar实例的renderItem方法
  expect(componentB.props().onRenderItem).toBe(wrapper.instance().renderItem);
});

3. 验证ComponentC的onChange回调逻辑 #

因为ComponentC是通过renderItem方法渲染出来的，我们需要先调用onRenderItem拿到ComponentC的元素，再测试它的onChange逻辑：

it('should set up correct onChange logic in ComponentC', () => {
  const componentB = wrapper.find(ComponentB);
  // 调用ComponentB的onRenderItem prop，获取ComponentC的React元素
  const componentCElement = componentB.props().onRenderItem();
  // 把这个元素转换成Enzyme wrapper，方便后续操作
  const componentCWrapper = mount(componentCElement);

  // 模拟一个测试用的event对象，根据你的业务逻辑添加属性
  const mockEvent = { target: { value: 'test-value' } };
  
  // 如果你的anotherMethod是Toolbar的实例方法，我们可以用jest.spyOn来监听它的调用
  const anotherMethodSpy = jest.spyOn(wrapper.instance(), 'anotherMethod');
  
  // 触发ComponentC的onChange回调
  componentCWrapper.props().onChange(mockEvent);
  
  // 断言anotherMethod被正确调用（如果你的逻辑是调用它的话）
  expect(anotherMethodSpy).toHaveBeenCalled();
  
  // 如果你需要验证基于event的逻辑，也可以在这里添加对应的断言
  // 比如检查event是否被正确处理，或者状态是否有变化
});

补充：用浅渲染简化测试 #

如果你不想依赖ComponentB和ComponentC的完整渲染，也可以用shallow来简化：

it('verifies ComponentC onChange with shallow render', () => {
  const shallowWrapper = shallow(<Toolbar />);
  const componentB = shallowWrapper.find(ComponentB);
  
  // 浅渲染renderItem返回的ComponentC
  const componentCShallow = shallow(componentB.props().onRenderItem());
  
  const mockEvent = { target: { value: 'test' } };
  const anotherMethodSpy = jest.spyOn(shallowWrapper.instance(), 'anotherMethod');
  
  componentCShallow.props().onChange(mockEvent);
  
  expect(anotherMethodSpy).toHaveBeenCalled();
});

其实你原本想使用的setProps，更多是用来测试当Toolbar自身的Props变化时，子组件的Props是否会相应更新。而这次的需求是验证内部逻辑生成的子组件Props，所以直接获取子组件Props并测试回调的方式更直接哦～

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