Ant Design组件如何绑定 data-testid

1. Antd 组件支持 `data-*` 属性吗？

大多数 Antd 组件（例如 Button、Input、Select 等）底层都会渲染为原生 DOM 元素，它们会把 未知属性（例如 data-testid）透传到最终的 DOM 上。所以，你直接写：

import { Button } from "antd";

export default function App() {
  return (
    <Button data-testid="submit-button" type="primary">
      提交
    </Button>
  );
}

测试时：

import { render, screen } from "@testing-library/react";

test("找到按钮", () => {
  render(<App />);
  expect(screen.getByTestId("submit-button")).toBeInTheDocument();
});

✅ 这样就能直接获取到。

2. 例外情况（Form.Item / 特殊组件）

有些组件（比如 Form.Item、Table、Modal）不会直接渲染为简单的 div 或 input，而是会包一层，这时候要注意：

(1) `Form.Item`

<Form.Item
  label="用户名"
  name="username"
>
  <Input data-testid="username-input" />
</Form.Item>

👉 data-testid 要绑定在 具体的 Input 上，而不是 Form.Item，否则找不到。

(2) `Table`

如果你需要给 某一行或某一列加上 data-testid，可以用 render 来透传：

<Table
  dataSource={[{ key: 1, name: "张三" }]}
  columns={[
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
      render: (text) => <span data-testid={`user-${text}`}>{text}</span>,
    },
  ]}
/>

(3) `Modal`

Modal 会被挂载到 document.body，你可以加到 Modal 的 props 里：

<Modal
  open
  title="提示"
  data-testid="my-modal"
>
  内容
</Modal>

⚠️ 注意：Modal 的内容默认是挂在 body 下的 Portal，要用 screen.getByTestId("my-modal")。

3. 推荐的写法规范

为了避免 testid 随便写，建议定义一个 testid 映射表，方便维护：

// testids.ts
export const TEST_IDS = {
  LOGIN: {
    USERNAME: "login-username-input",
    PASSWORD: "login-password-input",
    SUBMIT: "login-submit-button",
  },
};

使用时：

<Input data-testid={TEST_IDS.LOGIN.USERNAME} />
<Button data-testid={TEST_IDS.LOGIN.SUBMIT}>登录</Button>

测试时：

expect(screen.getByTestId(TEST_IDS.LOGIN.SUBMIT)).toBeEnabled();

这样避免了字符串散落在代码里。

4. 如果 antd 组件不透传 props？

极少数情况下，某些 antd 组件不直接透传到 DOM，比如自定义封装的 Select.Option。这时可以用 className + getByRole/getByText，或者在 render 里自己加 data-testid。

👉 总结一下：

大多数 antd 组件支持直接写 data-testid
复杂组件（Form.Item, Table, Modal）要在子元素上加 testid
推荐统一 testid 映射表，避免硬编码

Ant Design组件如何绑定 data-testid

1. Antd 组件支持 data-* 属性吗？