如何Mock AG Grid的gridApi方法（如setQuickFilter）进行单元测试？

错误原因 #

你碰到的Error: <spyOn> : could not find an object to spy upon for setQuickFilter()，本质是测试环境中未正确提供带有setQuickFilter方法的gridApi实例，导致spyOn无法找到目标对象进行监听。

具体Mock与测试方案 #

以下是基于Jest框架（适配Vue/React组件测试）的两种可行方案：

方案1：手动Mock gridApi并注入组件 #

直接创建包含setQuickFilter方法的Mock对象，在组件挂载前注入到对应上下文或props中：

Vue组件测试示例

import { mount } from '@vue/test-utils';
import YourComponent from '@/components/YourComponent.vue';

describe('clearQuickFilter', () => {
  it('调用gridApi.setQuickFilter并传入空字符串', () => {
    // 创建Mock的gridApi对象
    const mockGridApi = {
      setQuickFilter: jest.fn()
    };

    // 挂载组件时注入mock对象（根据组件接收gridApi的方式选择）
    const wrapper = mount(YourComponent, {
      // 若组件通过props接收gridApi
      props: { gridApi: mockGridApi },
      // 若组件通过AG Grid的provide获取gridApi
      global: {
        provide: {
          'agGridVue': { api: mockGridApi }
        }
      }
    });

    // 调用组件的clearQuickFilter方法
    wrapper.vm.clearQuickFilter();

    // 验证方法调用正确性
    expect(mockGridApi.setQuickFilter).toHaveBeenCalledWith('');
  });
});

React组件测试示例

import { render, screen, fireEvent } from '@testing-library/react';
import YourComponent from './YourComponent';

describe('clearQuickFilter', () => {
  it('触发清除操作后调用gridApi.setQuickFilter("")', () => {
    // 创建Mock的setQuickFilter方法与gridApi对象
    const mockSetQuickFilter = jest.fn();
    const mockGridApi = { setQuickFilter: mockSetQuickFilter };

    // 渲染组件并传入mock的gridApi
    render(<YourComponent gridApi={mockGridApi} />);

    // 触发清除操作（比如点击清除按钮）
    fireEvent.click(screen.getByText('清除筛选'));

    // 验证方法调用
    expect(mockSetQuickFilter).toHaveBeenCalledTimes(1);
    expect(mockSetQuickFilter).toHaveBeenCalledWith('');
  });
});

方案2：Mock AG Grid全局模块（针对模块导入场景） #

如果组件通过导入AG Grid模块使用gridApi，可直接Mock整个模块返回预设实例：

// Jest中Mock AG Grid模块
jest.mock('ag-grid-community', () => ({
  ...jest.requireActual('ag-grid-community'),
  GridApi: jest.fn().mockImplementation(() => ({
    setQuickFilter: jest.fn()
  }))
}));

describe('clearQuickFilter', () => {
  it('正确调用setQuickFilter', () => {
    const wrapper = mount(YourComponent);
    const mockGridApi = wrapper.vm.gridApi;
    
    wrapper.vm.clearQuickFilter();
    
    expect(mockGridApi.setQuickFilter).toHaveBeenCalledWith('');
  });
});

关键注意事项 #

• 若组件通过onGridReady回调获取gridApi，测试时需手动触发该回调并传入Mock的gridApi。
• 单元测试需隔离外部依赖，所有第三方库实例均应Mock，保证测试稳定性与执行速度。

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