如何用Jest和Testing Library测试React ag-Grid的三类事件

针对你的React组件RunAsSelectGrid，以下是用Jest和Testing Library编写onGridReady、onSelectionChanged、onFirstDataRendered三个事件测试用例的具体方案：

前置修正 #

首先修复现有测试的基础问题：

• 在测试文件顶部导入screen：import { screen } from '@testing-library/react';
• 不要手动模拟onGridReady事件，ag-Grid渲染时会自动触发该事件，只需等待组件完成渲染即可

1. 测试onGridReady #

onGridReady的核心作用是初始化gridApi，我们可以通过验证依赖gridApi的功能是否正常，间接确认该事件已触发：

test('triggers onGridReady and initializes grid functionality', async () => {
  const handleChange = jest.fn();
  render(
    <RunAsSelectGrid
      name="test"
      values={mockValues}
      handleChange={handleChange}
      selectedValues={[]}
      valueProp="parameterValue"
      counter={1}
    />
  );

  // 等待grid容器渲染完成，间接验证onGridReady已执行并初始化了gridApi
  await waitFor(() => {
    expect(screen.getByRole('grid')).toBeInTheDocument();
  });
});

2. 测试onSelectionChanged #

该事件会在选中状态变化时触发并调用handleChange，我们可以通过模拟点击复选框，验证handleChange的调用是否符合预期：

test('triggers onSelectionChanged and calls handleChange correctly', async () => {
  const handleChange = jest.fn();
  render(
    <RunAsSelectGrid
      name="test"
      values={mockValues}
      handleChange={handleChange}
      selectedValues={[]}
      valueProp="parameterValue"
      counter={1}
    />
  );

  // 等待所有复选框渲染完成：索引0是表头全选框，1是value1行，2是value2行
  const checkboxes = await waitFor(() => screen.getAllByRole('checkbox'));
  
  // 测试单行选中
  fireEvent.click(checkboxes[1]);
  expect(handleChange).toHaveBeenCalledWith('test', ['value1']);

  // 测试全选功能
  fireEvent.click(checkboxes[0]);
  expect(handleChange).toHaveBeenCalledWith('test', ['value1', 'value2']);
});

3. 测试onFirstDataRendered #

该事件会在首次数据渲染后设置初始选中行并调用handleChange，我们可以验证初始选中值是否生效，以及handleChange是否被正确调用：

test('triggers onFirstDataRendered and sets initial selected values', async () => {
  const handleChange = jest.fn();
  const initialSelected = ['value2'];
  
  render(
    <RunAsSelectGrid
      name="test"
      values={mockValues}
      handleChange={handleChange}
      selectedValues={initialSelected}
      valueProp="parameterValue"
      counter={1}
    />
  );

  // 验证onFirstDataRendered触发了handleChange
  await waitFor(() => {
    expect(handleChange).toHaveBeenCalledWith('test', initialSelected);
  });

  // 验证对应行的复选框被选中
  const checkboxes = await waitFor(() => screen.getAllByRole('checkbox'));
  expect(checkboxes[2]).toBeChecked();
});

完整测试代码 #

整合后的完整测试文件如下：

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

const mockValues = [
  { parameterValue: 'value1', displayName: 'Display 1' },
  { parameterValue: 'value2', displayName: 'Display 2' },
];

describe('RunAsSelectGrid', () => {
  test('initializes with correct column definitions and row data', () => {
    render(
      <RunAsSelectGrid
        name="test"
        values={mockValues}
        handleChange={jest.fn()}
        selectedValues={[]}
        valueProp="parameterValue"
        counter={1}
      />
    );

    expect(screen.getByText('Select All')).toBeInTheDocument();
    expect(screen.getByText('Display 1')).toBeInTheDocument();
    expect(screen.getByText('Display 2')).toBeInTheDocument();
  });

  test('triggers onGridReady and initializes grid functionality', async () => {
    const handleChange = jest.fn();
    render(
      <RunAsSelectGrid
        name="test"
        values={mockValues}
        handleChange={handleChange}
        selectedValues={[]}
        valueProp="parameterValue"
        counter={1}
      />
    );

    await waitFor(() => {
      expect(screen.getByRole('grid')).toBeInTheDocument();
    });
  });

  test('triggers onSelectionChanged and calls handleChange on row selection', async () => {
    const handleChange = jest.fn();
    render(
      <RunAsSelectGrid
        name="test"
        values={mockValues}
        handleChange={handleChange}
        selectedValues={[]}
        valueProp="parameterValue"
        counter={1}
      />
    );

    const checkboxes = await waitFor(() => screen.getAllByRole('checkbox'));
    
    fireEvent.click(checkboxes[1]);
    expect(handleChange).toHaveBeenCalledWith('test', ['value1']);

    fireEvent.click(checkboxes[0]);
    expect(handleChange).toHaveBeenCalledWith('test', ['value1', 'value2']);
  });

  test('triggers onFirstDataRendered and sets initial selected values', async () => {
    const handleChange = jest.fn();
    const initialSelected = ['value2'];
    
    render(
      <RunAsSelectGrid
        name="test"
        values={mockValues}
        handleChange={handleChange}
        selectedValues={initialSelected}
        valueProp="parameterValue"
        counter={1}
      />
    );

    await waitFor(() => {
      expect(handleChange).toHaveBeenCalledWith('test', initialSelected);
    });

    const checkboxes = await waitFor(() => screen.getAllByRole('checkbox'));
    expect(checkboxes[2]).toBeChecked();
  });
});

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