Material UI React评分组件Jest测试失败，求正确测试方案

问题说明 #

之前测试Material UI评分组件时，使用user.click()结合toBeChecked()报错，提示该方法不适用于非单选框组件；改用fireEvent.change()也无法更新组件状态。

解决方案 #

Material UI的Rating组件基于自定义元素实现，并非原生radio/checkbox控件，因此不能用toBeChecked()验证选中状态，也无法通过fireEvent.change()直接修改值。正确做法是：

• 用userEvent.click()触发星星选择（符合真实用户交互）
• 通过检查元素的aria-selected属性验证选中状态（MUI选中的星星会设置该属性为true）
• 最终通过验证提交回调的参数确认Formik状态是否正确更新

修改后的测试代码 #

it('rendering and submitting a basic Formik form', async () => {
    const handleSubmit = jest.fn()

    render(<GeneralFormik schema={schema2} submitHandler={handleSubmit} />)
    const user = userEvent.setup()

    // 定位并点击4星元素
    const fourStar = screen.getByLabelText(/4 Stars/i)
    await user.click(fourStar)

    // 验证该星星已被选中（检查aria-selected属性）
    expect(fourStar).toHaveAttribute('aria-selected', 'true')

    // 点击提交按钮
    await user.click(screen.getByRole('button', { name: /submit/i }))

    // 验证提交参数是否正确
    await waitFor(() => {
        expect(handleSubmit).toHaveBeenCalledWith({
            rating_field: 4
        })
    })
})

关键说明 #

1. 移除不必要的act包裹：userEvent和render内部已自动处理React更新的异步逻辑，无需手动包裹act
2. 抛弃toBeChecked()：该方法仅适用于原生表单控件，MUI Rating组件用ARIA属性标识选中状态
3. 依赖真实交互验证：通过点击操作模拟用户行为，再通过提交回调确认最终状态，更贴近真实使用场景

内容的提问来源于stack exchange，提问作者The Old County