如何使用Jest/Enzyme测试AgGridReact？onGridReady回调未触发

Hey there! Testing AgGridReact components can feel a bit tricky when lifecycle callbacks like onGridReady don’t fire as expected. Let’s break down the most common fixes and approaches to get your test working:

1. Use mount Instead of shallow #

AgGridReact is a complex component with deep internal logic—shallow rendering only renders the top-level component and skips child component lifecycle methods. Switch to mount to fully render the grid and trigger its initialization flow:

import { mount } from 'enzyme';
// ... rest of your imports

describe('YourGridComponent', () => {
  it('fires onGridReady when mounted', () => {
    const mockOnGridReady = jest.fn();
    const wrapper = mount(<YourGridComponent onGridReady={mockOnGridReady} />);
    // ... assertions here
  });
});

2. Wait for Async Initialization #

AgGrid initializes asynchronously, so your test might be checking for the callback before it’s had a chance to fire. Use async/await with a microtask delay to let React and AgGrid finish their setup:

it('triggers onGridReady after async initialization', async () => {
  const mockOnGridReady = jest.fn();
  const wrapper = mount(<YourGridComponent onGridReady={mockOnGridReady} />);
  
  // Wait for async updates to complete
  await new Promise(resolve => setTimeout(resolve, 0));
  wrapper.update(); // Refresh the enzyme wrapper to reflect latest state
  
  expect(mockOnGridReady).toHaveBeenCalled();
  // You can also assert on the grid API/columnApi passed to the callback
  expect(mockOnGridReady).toHaveBeenCalledWith(expect.objectContaining({
    api: expect.any(Object),
    columnApi: expect.any(Object)
  }));
});

3. Manually Trigger onGridReady (Fallback) #

If the above doesn’t work (sometimes due to AgGrid version quirks or test environment constraints), you can directly access the AgGridReact instance and trigger the callback manually:

it('triggers onGridReady when manually invoked', () => {
  const mockOnGridReady = jest.fn();
  const wrapper = mount(<YourGridComponent onGridReady={mockOnGridReady} />);
  
  // Find the AgGridReact instance and call onGridReady
  const agGridComponent = wrapper.find(AgGridReact).instance();
  agGridComponent.onGridReady({ 
    api: {}, // Mock grid API if your callback uses it
    columnApi: {} 
  });
  
  expect(mockOnGridReady).toHaveBeenCalled();
});

4. Ensure Your Component Passes the Callback Correctly #

Double-check that your component is properly forwarding the onGridReady prop to AgGridReact. A common mistake is wrapping the callback but forgetting to invoke it:

// Correct: Forward the callback directly
const YourGridComponent = ({ onGridReady }) => (
  <AgGridReact
    onGridReady={onGridReady}
    rowData={[]}
    columnDefs={[]}
  />
);

// Also works if you need to add custom logic:
const YourGridComponent = ({ onGridReady }) => {
  const handleGridReady = (params) => {
    // Your custom logic here (e.g., storing grid API in state)
    onGridReady(params); // Don't forget to call the original callback!
  };
  
  return (
    <AgGridReact
      onGridReady={handleGridReady}
      rowData={[]}
      columnDefs={[]}
    />
  );
};

5. Check Your Test Environment #

AgGrid relies on browser APIs, so make sure your Jest config uses the jsdom test environment (this is default in newer Jest versions). If you’re using an older setup, add this to your jest.config.js:

module.exports = {
  testEnvironment: 'jsdom',
  // ... other config options
};

Give these steps a shot—most of the time, switching to mount and waiting for async updates does the trick. If you’re still running into issues, feel free to share more details about your component code or AgGrid version!

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