如何在单元测试中mock getRowNode()以测试OnCellValueChanged？

问题根源 #

报错cannot read properties of undefined(reading 'getRowNode')本质是this.api未被初始化，而非getRowNode方法的mock有问题——你只spy了rowNode，但没确保组件实例中的api对象存在并包含该方法。

具体修复步骤 #

1. 先确保this.api是有效mock对象 #

根据你使用的测试框架，先给组件实例的api属性赋值一个包含getRowNode的mock对象：

• 以Jest为例：

// 定义mock的行节点对象
const mockRowNode = {
  id: 'test-id',
  data: { /* 测试所需数据 */ }
};

// 创建mock的api对象，绑定getRowNode方法
const mockApi = {
  getRowNode: jest.fn().mockReturnValue(mockRowNode)
};

// 给组件实例的api属性赋值（根据组件类型调整）
// Vue组件示例
wrapper.vm.api = mockApi;
// React组件示例（Enzyme）
component.instance().api = mockApi;
// Angular组件示例
component.api = mockApi;

2. 确保mock在事件触发前完成初始化 #

调整测试执行顺序，先完成api的mock赋值，再触发OnCellValueChanged事件：

// 初始化mock
const mockApi = { getRowNode: jest.fn().mockReturnValue(mockRowNode) };
wrapper.vm.api = mockApi;

// 触发单元格值变更事件
wrapper.vm.OnCellValueChanged({ id: 'test-id', /* 其他事件参数 */ });

// 断言方法调用情况
expect(mockApi.getRowNode).toHaveBeenCalledWith('test-id');

3. 适配组件中api的赋值逻辑 #

如果组件的api是通过props传入或生命周期初始化的，要在测试中模拟这个过程：

• 若为props传入：创建组件时直接传入mockApi

// Vue示例
const wrapper = mount(YourComponent, {
  props: {
    api: mockApi
  }
});
// React示例
const wrapper = shallow(<YourComponent api={mockApi} />);

• 若为生命周期赋值：确保测试时钩子被正确触发，或直接手动覆盖api属性。

常见误区提醒 #

• 不要只mockgetRowNode方法，忽略api对象本身的存在——必须先让this.api指向有效mock对象，才能调用其方法。
• 检查事件参数中的id是否为有效值，避免id!断言后仍为undefined（可添加断言验证id不为空）。

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