Ant-Design Table测试异常：开启responsive后无法检测指定内容

问题描述 #

测试Ant-Design Table组件时，正常情况下能找到文本'Mike'，但给列配置responsive: ['lg']后，测试就无法检测到该文本。尝试修改responsive的断点值（如xs、md）或手动设置window.width都无效，移除该配置后测试恢复正常。

原因分析 #

Ant-Design的responsive列配置是基于视口断点控制列的显示/隐藏：

• lg断点对应视口宽度≥1200px
• 测试环境（如jsdom）默认视口尺寸通常为800x600左右，达不到lg断点要求，因此列会被隐藏
• 直接修改window.width无法触发Antd的断点重新计算，因为Antd依赖窗口resize事件或媒体查询更新断点状态，而jsdom不会自动触发这些事件

另外注意：原测试代码中Table的数据源属性写错了，Antd Table的正确属性是dataSource而非data，虽非核心问题，但建议修正。

解决方案 #

方案1：模拟窗口resize到目标断点 #

使用@testing-library/user-event的resize方法，模拟窗口尺寸调整到lg断点以上，触发Antd的断点检测：

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Table } from 'antd';

it('render correctly name with responsive lg', async () => {
  const dataSource = [
    {
      key: '1',
      name: 'Mike',
      age: 32,
      address: '10 Downing Street',
    },
    {
      key: '2',
      name: 'John',
      age: 42,
      address: '10 Downing Street',
    },
  ];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      responsive: ['lg'],
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];
  
  render(<Table dataSource={dataSource} columns={columns} />);
  
  // 模拟窗口调整到lg断点（1200px）以上
  await userEvent.resize(window, { width: 1200, height: 800 });
  
  expect(screen.getByText('Mike')).toBeInTheDocument();
});

方案2：Mock Antd的断点检测逻辑 #

直接Mock Antd内部的断点检测钩子，强制让它认为当前处于目标断点：

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Table } from 'antd';

// Mock Antd的useBreakpoint钩子，强制返回lg断点状态
jest.mock('antd/es/grid/hooks/useBreakpoint', () => () => ({
  lg: true,
  xs: false,
  sm: false,
  md: false,
  xl: false,
  xxl: false,
}));

it('render correctly name with responsive lg', () => {
  const dataSource = [
    {
      key: '1',
      name: 'Mike',
      age: 32,
      address: '10 Downing Street',
    },
    {
      key: '2',
      name: 'John',
      age: 42,
      address: '10 Downing Street',
    },
  ];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      responsive: ['lg'],
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];
  
  render(<Table dataSource={dataSource} columns={columns} />);
  
  expect(screen.getByText('Mike')).toBeInTheDocument();
});

额外提示 #

如果测试其他断点（如md、xs），只需对应调整resize的宽度或Mock的断点状态即可：

• xs: <576px
• sm: ≥576px
• md: ≥768px
• lg: ≥1200px
• xl: ≥1600px

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