如何编写测试用例，通过循环访问Mock函数生成的批量数据测试组件？

问题背景 #

我需要编写测试用例，验证通过函数生成的批量数组数据在组件中的渲染场景。Mock数据生成函数位于mockData文件夹：

export const generateNotificationMockMany = (count) => (
    [...new Array(count)].map((index) => ({
            'group': `group number ${index}`,
            'message': `msg for group number ${index}`,
            'datetime': '',
        }),
    ));

我已经写出了基础测试用例，但不清楚如何循环获取函数生成的所有数据来完善测试逻辑：

it('renders properly for the many variant', ()=>{
        render(<NotificationMenu notifications={notificationsMock}/>)
    });

完善测试用例的方案 #

核心思路 #

1. 调用生成函数创建不同数量的测试数据（覆盖边界值、常规值）
2. 循环遍历生成的每条数据，断言组件是否正确渲染对应内容

完整测试代码示例 #

// 导入依赖和目标组件
import { generateNotificationMockMany } from '../mockData';
import { render, screen } from '@testing-library/react';
import NotificationMenu from '../NotificationMenu';

describe('NotificationMenu 批量数据渲染测试', () => {
  // 测试多种数据数量场景：空数据、单条数据、多条常规数据
  [0, 1, 3, 5].forEach((count) => {
    it(`正确渲染 ${count} 条通知`, () => {
      // 生成指定数量的Mock通知数据
      const mockNotifications = generateNotificationMockMany(count);
      // 渲染组件并传入数据
      render(<NotificationMenu notifications={mockNotifications} />);

      // 获取所有渲染的通知项（假设组件中给每个通知项设置了data-testid="notification-item"）
      const renderedItems = screen.getAllByTestId('notification-item');
      // 先验证通知数量是否匹配
      expect(renderedItems.length).toBe(count);

      // 循环验证每条通知的内容是否正确
      mockNotifications.forEach((notification, index) => {
        const currentItem = renderedItems[index];
        // 验证group字段文本
        expect(currentItem).toHaveTextContent(notification.group);
        // 验证message字段文本
        expect(currentItem).toHaveTextContent(notification.message);
      });

      // 额外测试空数据场景的提示文本
      if (count === 0) {
        expect(screen.getByText('暂无通知')).toBeInTheDocument();
      }
    });
  });
});

注意事项 #

• 如果你的通知组件没有设置data-testid，可以根据实际DOM结构替换查询方式，比如screen.getAllByRole('listitem')（如果通知是列表项）
• 可以根据业务需求添加更多测试场景，比如极大数量的数据渲染正确性（单元测试侧重功能正确性，性能测试可单独进行）

内容的提问来源于stack exchange，提问作者Ali A.