使用Jest和@testing-library/react如何断言React中li元素的key属性值

数据老陈

2026-9-28

核心原因

key是React内部用于虚拟DOM协调的专属属性，不会被渲染到真实DOM中，因此无法通过DOM元素的属性查询直接校验。你可以通过以下两种方案验证key是否正确设置：

方案1：直接捕获组件创建时的props验证（推荐）

通过模拟React.createElement，你可以直接捕获到传给<li>元素的所有属性（包括内部用的key），直接校验值即可。

在你的测试文件中新增如下测试用例：

it('should set correct key attribute for li elements', () => {
  // 先模拟返回测试数据
  mockGetPersons.mockReturnValue([
    { id: '1', name: { familyName: 'Duck', givenName: 'Donald' } },
    { id: '2', name: { familyName: 'Duck', givenName: 'Dagobert' } },
  ]);

  // 模拟React.createElement，保留原始逻辑的同时捕获调用参数
  const originalCreateElement = React.createElement;
  const liPropsList: Record<string, any>[] = [];
  jest.spyOn(React, 'createElement').mockImplementation((type, props, ...children) => {
    if (type === 'li' && props?.key) {
      liPropsList.push({ key: props.key, ...props });
    }
    return originalCreateElement(type, props, ...children);
  });

  render(<PersonList />);

  // 校验key值
  expect(liPropsList).toHaveLength(2);
  expect(liPropsList[0].key).toBe('1');
  expect(liPropsList[1].key).toBe('2');

  // 恢复mock避免影响其他测试
  jest.restoreAllMocks();
});