如何在React Testing Library中触发div的userEvent.click事件

React Testing Library的核心是基于用户可见的内容定位元素，而非依赖类名、索引这类实现细节。针对你这种映射生成的卡片组件，有几种简单的测试方式：

1. 通过卡片内的文本直接触发点击 #

因为DOM事件会冒泡，你不需要特意获取外层的div，直接点击卡片内的文本元素（比如名字、部门文字）就能触发父元素的onClick事件。

举个测试示例（假设你已经模拟了navigate函数和测试数据）：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import YourComponent from './YourComponent';
import { EPages } from './constants';

test('点击卡片跳转到对应人物页面', async () => {
  const user = userEvent.setup();
  const mockNavigate = jest.fn();
  // 模拟测试数据
  const mockCrew = [
    { id: 123, name: '诺兰', department: '导演部' },
    { id: 456, name: '汉斯·季默', department: '音乐部' }
  ];

  render(
    <YourComponent 
      credits={{ crew: mockCrew }} 
      maxCreditsResults={2} 
      navigate={mockNavigate} 
    />
  );

  // 通过名字文本定位并点击
  await user.click(screen.getByText('-诺兰'));
  expect(mockNavigate).toHaveBeenCalledWith(`/${EPages.person}/123`);

  // 重置mock后测试第二个卡片
  mockNavigate.mockClear();
  await user.click(screen.getByText('Department: 音乐部'));
  expect(mockNavigate).toHaveBeenCalledWith(`/${EPages.person}/456`);
});

2. 批量测试多个卡片 #

如果需要遍历所有生成的卡片，可以用getAllBy...系列方法获取元素列表，再逐个触发点击：

test('所有卡片点击都能正确跳转', async () => {
  const user = userEvent.setup();
  const mockNavigate = jest.fn();
  const mockCrew = [/* 测试数据 */];

  render(<YourComponent credits={{ crew: mockCrew }} navigate={mockNavigate} />);

  // 获取所有名字文本元素（匹配以"-"开头的文本）
  const cardNameElements = screen.getAllByText(/-.*$/);
  
  for (let i = 0; i < cardNameElements.length; i++) {
    await user.click(cardNameElements[i]);
    expect(mockNavigate).toHaveBeenCalledWith(`/${EPages.person}/${mockCrew[i].id}`);
    mockNavigate.mockClear();
  }
});

3. 强制获取外层div元素（不推荐，但可选） #

如果一定要直接获取div本身，可以结合文本查询和角色定位：

// 通过名字文本找到对应的div容器
const nolanCard = screen.getByRole('generic', {
  name: /诺兰.*导演部/
});
await user.click(nolanCard);

或者用within限定查询范围：

const nolanNameText = screen.getByText('-诺兰');
const nolanCard = within(nolanNameText.parentElement).getByRole('generic');
await user.click(nolanCard);

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