React测试报错：Cannot read properties of null (reading 'checked')

核心问题分析 #

报错说明你用queryByLabelText('Male')拿到的是null——根本没找到对应的单选按钮，后续访问checked自然报错。主要原因和解决办法如下：

1. 测试时未传入必要的fieldConfig属性 #

你的组件靠fieldConfig?.options循环渲染单选按钮，但测试里渲染<RadioGroupWrapper touched={true} />时，没传fieldConfig，组件根本不会渲染Male/Female选项，自然查不到元素。

修改测试代码，传入包含选项的fieldConfig：

describe("Radio group test cases", ()=>{
    test("Radio group change value and new value updated and last value no more checked", () => {
        // 模拟fieldConfig，包含Male和Female选项
        const mockFieldConfig = {
            options: [
                { displayValue: 'Male' },
                { displayValue: 'Female' }
            ]
        };

        // 传入必要props，同时设置defaultValue确保默认选中Male
        render(<RadioGroupWrapper 
            touched={true} 
            fieldConfig={mockFieldConfig}
            defaultValue="Male"
        />);
    
        // 改用getByLabelText，它会等待元素出现，找不到直接报错，比queryBy更适合断言元素存在的场景
        const radionButtonMale = screen.getByLabelText('Male') as HTMLInputElement;
        expect(radionButtonMale.checked).toEqual(true);
    
        // 切换选项
        const radionButtonFemale = screen.getByLabelText('Female') as HTMLInputElement;
        fireEvent.click(radionButtonFemale);
        expect(radionButtonFemale.checked).toEqual(true);
    
        // 验证原选项已取消选中
        expect(radionButtonMale.checked).toEqual(false);
    });
})

2. 组件的默认选中逻辑要确保生效 #

你的组件里value={!value ? defaultValue : value}，如果测试时没传defaultValue，就算渲染了选项，也不会有默认选中的单选按钮，后续断言checked: true也会失败。所以测试时必须传入defaultValue="Male"，确保初始状态正确。

3. 避免用setTimeout，改用RTL的查询规则 #

React Testing Library的getBy*系列方法会自动等待元素出现（默认超时1000ms），不需要手动加setTimeout。queryBy*是同步查询，找不到就返回null，只适合断言元素不存在的场景。

额外检查点 #

• 确认组件的onChange事件是否正确绑定（你现在注释掉了onChange={onChange}，测试时切换选项可能不会同步更新状态，记得打开这个绑定）
• 检查FormControlLabel的label属性是否确实是option.displayValue，确保和测试里的查询文本完全一致（大小写、空格都要匹配）

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