如何用Testing-Library测试AG-Grid？列头测试异常求助

我之前测试Ag Grid React组件时也碰到过几乎一模一样的问题——浏览器里表格显示完全正常，但Testing Library就是找不到后面几列的表头。折腾了一阵才发现，罪魁祸首是Ag Grid默认开启的虚拟列渲染特性：它为了性能优化，只会渲染当前视口内的列，超出视口的列不会真正挂载到DOM里，这就导致测试工具找不到这些元素。

结合你的场景，给你几个可行的解决方案：

1. 禁用虚拟列渲染 #

最简单直接的办法就是在AgGridReact组件里添加suppressColumnVirtualisation={true}属性，强制Ag Grid渲染所有列，不管它们是否在视口内：

<AgGridReact 
  columnDefs={[ 
    { field: "make" }, 
    { field: "model" }, 
    { field: "price" }, 
    { field: "color" }, 
  ]} 
  rowData={[{ make: "Toyota", model: "Celica", price: "35000", color: "blue" }]} 
  pagination={true}
  suppressColumnVirtualisation={true}
></AgGridReact>

修改后再跑测试，所有表头应该都能被getByText找到。

2. 用异步查询等待Grid完全就绪 #

有时候即使禁用了虚拟渲染，Grid的渲染可能还是有延迟，这时候应该用Testing Library的异步查询方法（比如findByText）或者waitFor来等待元素加载完成，而不是用同步的getByText：

import { render, waitFor, findByText } from '@testing-library/react';

// 方法一：用findByText（本身就是异步的，会自动等待）
test('renders all the headers', async () => { 
  const { findByText } = render(<GridExample />); 
  expect(await findByText("Make")).toBeInTheDocument();
  expect(await findByText("Model")).toBeInTheDocument();
  expect(await findByText("Price")).toBeInTheDocument();
  expect(await findByText("Color")).toBeInTheDocument();
});

// 方法二：用waitFor包裹同步断言
test('renders all the headers', async () => { 
  const { getByText } = render(<GridExample />); 
  await waitFor(() => {
    expect(getByText("Make")).toBeInTheDocument();
    expect(getByText("Model")).toBeInTheDocument();
    expect(getByText("Price")).toBeInTheDocument();
    expect(getByText("Color")).toBeInTheDocument();
  });
});

3. 调整测试时的Grid容器宽度 #

如果你不想禁用虚拟渲染（比如要测试真实的虚拟化场景），可以在测试时给Grid的父容器设置足够宽的样式，让所有列都能显示在视口内：

test('renders all the headers', async () => { 
  const { getByText } = render(
    <div style={{ width: '1000px', minWidth: '1000px' }}>
      <GridExample />
    </div>
  ); 
  await waitFor(() => {
    expect(getByText("Price")).toBeInTheDocument();
    expect(getByText("Color")).toBeInTheDocument();
  });
});

至于你提到的在线沙箱里测试找不到表头的问题，本质也是一样的——默认容器宽度不够，加上上面的任意一种方法应该就能解决。

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