使用react-testing-library测试listbox组件的方法及示例咨询

以下示例覆盖查看选项列表、选择选项两类核心测试场景，你可以根据你的组件实际props调整适配：

前置准备 #

测试前先导入必要的测试工具和你的Listbox组件：

import { render, screen, fireEvent } from '@testing-library/react';
import Listbox from './你的Listbox组件路径';

我们假设你的Listbox组件接收三个核心props：

• options：选项数组，每一项包含label（展示文本）和value（选项值）
• onChange：选项变化时的回调函数
• multiple：可选，是否支持多选，默认false

测试场景1：验证选项列表正常渲染展示 #

这个测试用来确认所有传入的选项都能正常展示在页面上，不会出现漏渲染的情况：

test('listbox 渲染所有传入的选项', () => {
  // 构造测试用选项
  const testOptions = [
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' },
    { label: '选项3', value: '3' },
  ];

  render(<Listbox options={testOptions} onChange={() => {}} />);

  // 遍历验证每个选项的文本都存在于页面中
  testOptions.forEach(option => {
    expect(screen.getByText(option.label)).toBeInTheDocument();
  });
});

测试场景2：验证单选场景下选择功能正常 #

这个测试用来确认点击选项后，能正确选中目标选项，且回调函数能拿到正确的选中值：

test('单选listbox点击选项后正确触发选中逻辑', () => {
  const testOptions = [
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' },
  ];
  // 构造mock回调函数用来监听选中结果
  const mockOnChange = jest.fn();

  render(<Listbox options={testOptions} onChange={mockOnChange} />);

  // 模拟点击选项2
  fireEvent.click(screen.getByText('选项2'));

  // 验证回调函数被调用，且拿到的选中值正确
  expect(mockOnChange).toHaveBeenCalledWith('2');
  // 如果你的组件选中后会给选项加选中态的类名或者aria属性，可以加如下验证，比如aria-selected
  expect(screen.getByText('选项2')).toHaveAttribute('aria-selected', 'true');
  expect(screen.getByText('选项1')).toHaveAttribute('aria-selected', 'false');
});

测试场景3：验证多选场景下选择功能正常（如果你的组件支持多选） #

如果你的Listbox支持多选，可以用这个测试验证多选项选中、取消选中的逻辑：

test('多选listbox支持同时选中多个选项', () => {
  const testOptions = [
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' },
    { label: '选项3', value: '3' },
  ];
  const mockOnChange = jest.fn();

  render(<Listbox options={testOptions} onChange={mockOnChange} multiple />);

  // 模拟依次点击选项1和选项3
  fireEvent.click(screen.getByText('选项1'));
  fireEvent.click(screen.getByText('选项3'));

  // 验证回调最后拿到的是两个选中值的数组
  expect(mockOnChange).toHaveBeenLastCalledWith(['1', '3']);
  // 验证两个选项的选中态正确
  expect(screen.getByText('选项1')).toHaveAttribute('aria-selected', 'true');
  expect(screen.getByText('选项3')).toHaveAttribute('aria-selected', 'true');
  expect(screen.getByText('选项2')).toHaveAttribute('aria-selected', 'false');
});

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