测试时ToggleButtonGroup值无法获取？如何访问及初始化设置

一、组件渲染时的正确设置 #

先修正组件代码里的关键问题，确保ToggleButtonGroup的value属性正确绑定和更新：

1. 修正拼写错误 #

ToggleButtonGroup上的onChange属性存在拼写错误，需改为正确的回调函数名：

<ToggleButtonGroup 
  data-testid='alertButtonGroup'
  size='sm' 
  type="radio" 
  name="alerts"
  value={processAlerts}
  onChange={handleAlertChange} // 修正拼写错误
>

2. 匹配测试用的data-testid #

测试代码中需要获取runningButton，但组件内第一个ToggleButton的data-testid不匹配，需调整：

<ToggleButton 
  data-testid='runningButton' // 改为测试中使用的ID
  id="tbg-radio-1" 
  value={'Y'}
  variant={outlineSuccess}
>
  Running
</ToggleButton>

3. 优化State初始化与更新逻辑 #

初始processAlerts设为空字符串会导致组件无默认选中项，建议和接口返回的默认值对齐，并简化更新逻辑：

// 初始值设为接口可能返回的默认值，比如'Y'
const [processAlerts, setProcessAlerts] = useState<string>('Y');
const [controls, setControls] = useState<any>({
  processAlerts: 'Y',
});

// 合并useEffect，避免重复更新
useEffect(() => {
  Service.getControls()
    .then(data => {
      setControls(data);
      setProcessAlerts(data.processAlerts);
    });
}, []);

二、测试时如何访问切换后的值 #

ToggleButtonGroup渲染后是一个div容器，本身没有value属性，真实的选中状态存储在内部的radio输入框中，可通过以下方式断言：

1. 修正测试代码中的元素获取 #

确保setup函数能正确获取目标元素：

const setup = () => {
  const utils = render(
    <BrowserRouter>
      <Page/>
    </BrowserRouter>
  );

  // 正确获取容器和按钮
  const buttonGroup = utils.getByTestId('alertButtonGroup');
  const runningButton = utils.getByTestId('runningButton');
  const suspendedButton = utils.getByTestId('suspendedButton');

  return {
    buttonGroup, runningButton, suspendedButton,
    ...utils
  }
}

2. 断言选中的Radio输入框 #

点击按钮后，对应的radio输入框会被标记为checked，可通过角色定位并断言：

test('should toggle alerts', async () => {
  const { runningButton, suspendedButton } = setup();

  // 点击运行按钮，断言对应radio被选中
  await fireEvent.click(runningButton);
  const runningRadio = screen.getByRole('radio', { name: /running/i });
  expect(runningRadio).toBeChecked();

  // 点击暂停按钮，断言状态切换
  await fireEvent.click(suspendedButton);
  const suspendedRadio = screen.getByRole('radio', { name: /suspended/i });
  expect(suspendedRadio).toBeChecked();
});

3. 可选：断言按钮的Active状态 #

Bootstrap的ToggleButton选中时会添加active类，也可通过这个类验证状态：

await fireEvent.click(runningButton);
expect(runningButton).toHaveClass('active');
expect(suspendedButton).not.toHaveClass('active');

4. Mock接口数据（可选） #

如果组件依赖接口返回的初始值，测试时需mock接口避免真实请求：

jest.mock('./path/to/Service', () => ({
  getControls: jest.fn().mockResolvedValue({ processAlerts: 'N' }),
}));

// 测试前清空mock
beforeEach(() => {
  jest.clearAllMocks();
});

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