React组件子元素数量测试方法咨询

没问题，我来帮你搞定这个测试需求！针对你这种Modal嵌套RadioGroupField，再嵌套RadioOption的结构，我们可以用React Testing Library（现在React测试的主流工具）来实现，而且尽量遵循测试用户行为而非组件内部结构的原则，这样测试更健壮。

核心思路 #

我们的目标是验证RadioGroupField里的RadioOption数量，本质上就是数这个组里的单选框（radio）元素有多少个——毕竟用户看到的就是这些单选选项，测试它们的数量最直接。

具体步骤&代码示例 #

假设你的父组件（包含Modal）叫UttakInfoModal，我们分两种情况处理：

情况1：Modal默认是打开的

import { render, screen, within } from '@testing-library/react';
import UttakInfoModal from './UttakInfoModal';

test('验证RadioGroupField中的选项数量', () => {
  // 渲染父组件
  render(<UttakInfoModal fieldId="some-field-id" />);

  // 方法1：通过RadioGroup的name属性定位容器
  const radioGroup = screen.getByRole('radiogroup', { 
    name: /some-field-id\.resultat/i // 匹配你设置的name属性
  });

  // 方法2：如果给RadioGroupField加了data-testid，更直接
  // const radioGroup = screen.getByTestId('resultat-radio-group');

  // 在radio组内查询所有单选框元素
  const radioOptions = within(radioGroup).queryAllByRole('radio');

  // 断言数量符合预期（比如你预期有3个选项）
  expect(radioOptions).toHaveLength(3);
});

情况2：Modal默认是关闭的

这种情况需要先触发打开Modal的操作，比如点击按钮：

import { render, screen, within, fireEvent } from '@testing-library/react';
import UttakInfoModal from './UttakInfoModal';

test('Modal打开后验证RadioOption数量', () => {
  render(<UttakInfoModal fieldId="some-field-id" />);

  // 找到打开Modal的按钮并点击
  const openModalBtn = screen.getByRole('button', { name: /打开uttak信息面板/i });
  fireEvent.click(openModalBtn);

  // 现在Modal显示了，再查询radio选项
  const radioOptions = within(screen.getByRole('radiogroup')).queryAllByRole('radio');
  expect(radioOptions).toHaveLength(2);
});

关键注意事项 #

• 尽量避免直接查询自定义组件（比如RadioOption）的实例，因为一旦组件内部重构（比如改了组件名或结构），测试就会失效。优先基于用户可见的元素（radio输入框、label文本）来查询。
• within()方法很实用，它能让我们限定查询范围，避免页面其他地方的radio元素干扰测试结果。
• 如果你的RadioOption的label文本有辨识度，也可以通过label来筛选，比如：

  const specificOption = screen.getByLabelText(/UttakInfoPanel.SykdomSkadenDokumentertAngiAvklartPeriode/i);
  

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