I want to test a RadioGroup Component, initially, the first option is selected, this is tested and it seems to work fine.
Afterwards, the second option is clicked, the desired behaviour now would be to verify the second option if it has property checked
set on true but it’s not working.
it('should select second option', () => {
renderWithProviders(
<RadioButtonGroup
options={options}
label={label}
onChange={onChange}
selectedValue={options[0].value}
/>
);
const testId = options[1].value.replace(/ +/g, '-');
const secondOption = screen.getByTestId(testId);
expect(secondOption).toBeInTheDocument();
expect(secondOption).toHaveProperty('checked', false); // this works fine
fireEvent.click(secondOption);
expect(secondOption).toHaveProperty('checked', true); // this is still false
});