React+Antd3.x表格行选择单元测试报错：无法触发点击事件

问题背景 #

我有一个React应用，使用@testing-library/jest-dom做单元测试，UI基于Antd 3.x实现。页面内包含表格和「Lift Hold」按钮，按钮仅在表格某一行被勾选时启用。但编写的单元测试执行失败，报错信息如下：

● should enable the lift hold button after checkbox selection and note input
Unable to fire a "click" event - please provide a DOM element.

源码片段 #

import {Modal, Button, Form, Input, DatePicker, Table, Card, Tooltip} from 'antd';
// ... 省略其他代码
return (
  <>
    <Form>
     {/* ... 省略其他表单内容 */}
     <Card>
         <Table
              data-testid={'lift-hold-grid'}
              className="holdListResultsTable"
              rowSelection={rowSelection}
              columns={columns}
              dataSource={dataSourcee}
              components={{
                body: {
                  row: showRestorationTooltip
                }
              }}
            />
     </Card>
     {/* ... 省略其他内容 */}
     <div style={{/* ... 省略样式 */}}>
       <Button data-testid={'lift-hold-button'} disabled={/* ... 省略禁用逻辑 */} onClick={/* ... 省略点击事件 */}>
           Lift Hold
       </Button>
     </div>
    </Form>
  </>
)

测试代码片段 #

import { render } from "@testing-library/react";
import { Provider } from "react-redux";
import thunk from "redux-thunk";

function renderWithReduxAndThunk(ui, initialState) {
   const createdStore = createStore(rootReducer, initialState, applyMiddleware(thunk));
   return {
       ...render(<Provider store={createdStore}>{ui}</Provider>),
       createdStore,
    }
}

const changedState = {
   // ... 省略初始状态配置
}
it('should enable the lift hold button after checkbox selection and note input', () => {
   const { container, getByTestId } = renderWithReduxAndThunk(<LegalHoldLiftScreen />, changedState);
   const checkBox = container.querySelector('.ant-checkbox-input');
   fireEvent.click(checkBox);
   const downloadButton = getByTestId('lift-hold-button');
   expect(downloadButton).toBeTruthy();
   expect(downloadButton).not.toBeDisabled();
});

问题原因与修复方案 #

核心问题 #

报错的直接原因是container.querySelector('.ant-checkbox-input')未找到有效DOM元素，返回了null，导致fireEvent.click无法触发点击操作。

具体修复措施 #

1. 替换原生DOM查询为Testing Library专属方法
   避免依赖Antd内部类名（类名可能随版本变更），改用Testing Library提供的语义化查询方式，比如通过角色查找复选框：

   import { screen } from '@testing-library/react';
   
   // 替换原有的checkbox查询逻辑
   const checkBox = screen.getByRole('checkbox');
   // 若存在多个复选框，取第一个表格行的复选框
   // const checkBoxes = screen.getAllByRole('checkbox');
   // fireEvent.click(checkBoxes[0]);
   fireEvent.click(checkBox);
   

2. 确保表格数据源非空
   检查changedState中传入的dataSourcee是否包含有效数据，如果表格为空，不会渲染行复选框，自然无法查询到目标元素。测试时需保证表格至少有一行数据。

3. 添加异步等待逻辑
   勾选复选框后，按钮状态的更新依赖Redux状态同步，属于异步过程，需用waitFor等待断言条件满足：

   import { waitFor } from '@testing-library/react';
   
   it('should enable the lift hold button after checkbox selection and note input', async () => {
       const { getByTestId } = renderWithReduxAndThunk(<LegalHoldLiftScreen />, changedState);
       const checkBox = screen.getByRole('checkbox');
       fireEvent.click(checkBox);
       
       const liftHoldButton = getByTestId('lift-hold-button');
       await waitFor(() => {
           expect(liftHoldButton).not.toBeDisabled();
       });
   });
   

4. 校验按钮禁用逻辑的正确性
   确认按钮disabled属性绑定的状态是否正确关联了表格选中行的Redux状态，确保勾选操作能同步更新该状态，进而触发按钮启用。

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