how to test radio button in react testing library(User can select other radio button) - reactjs

Question

I am new to react and writing test case in react. I have two radio buttons (IPV4 and IPV6). I want to test that a user can select another radio button or not. I don't know which event listener to apply on radio button, is it change event or click event?
I broke down my problem into two parts: 1) I am checking whether I can select or deselect one radio button or not 2) I can select another radio button or not. I failed in my 1 part only so please help me. Here is my code and test case.
import React from 'react'
import constants from 'LookingGlass/constants'
import { Label, RadioButton } from 'LookingGlass/common/components'
export const componentTestId = 'SelectorIPVersion'
export default function SelectorIPVersion(props = {}) {
const { checkedVersion, onChange, disabled } = props
const { choices, groupName, label } = constants.SelectorIPVersion
const _onChange = (e) => {
onChange && onChange(e.target.value)
}
let selectorChoices = choices.map((c) => {
return (
<RadioButton
key={c.value}
id={c.value}
name={groupName}
value={c.value}
label={c.label}
checked={c.value === checkedVersion}
onChange={_onChange}
disabled={disabled}
/>
)
})
return (
<div data-testid={componentTestId}>
<Label text={label} />
{selectorChoices}
</div>
)
}
Here is my test case:
Here i am trying select and deselect the radio button but this is giving me error so how can I check that user can select another option or not?
const renderComponent = (props) => render(<SelectorIPVersion {...props} />)
test('Verify that user can select another version', () => {
const { getByRole, debug } = renderComponent({ checkedVersion: 'ipv4' })
const radio = getByRole('radio', { name: 'IPv4' })
expect(radio).toBeChecked()
debug(radio)
fireEvent.click(radio)
expect(radio).not.toBeChecked()
})
Output of Error:
Received element is checked:
<input class="hidden" id="ipv4" name="ipVersion" readonly="" tabindex="0" type="radio" value="ipv4" checked=""/>
When I debug the IPV4 radio button this is the output:
● Console
console.log node_modules/#testing-library/react/dist/pure.js:94
<input
checked=""
class="hidden"
id="ipv4"
name="ipVersion"
readonly=""
tabindex="0"
type="radio"
value="ipv4"
/>
And when I don't pass checkedVersion: 'ipv4' as props radio button is not checked.
Where am I wrong. Is it right or wrong?

Answer 1

Radio buttons are meant to be used in groups, so that when clicking on one of them deselects the currently selected one. To test that a radio button is deselected simply select the other one.
test('Verify that user can select another version', () => {
const { getByRole } = renderComponent({ checkedVersion: 'ipv4' })
const ipv4Radio = getByRole('radio', { name: 'IPv4' })
const ipv6Radio = getByRole('radio', { name: 'IPv6' })
expect(ipv4Radio).toBeChecked()
fireEvent.click(ipv6Radio)
expect(ipv4Radio).not.toBeChecked()
expect(ipv6Radio).toBeChecked()
})
However, as a test this doesn't bring much value since you're just testing that radio buttons work as expected (we already know they do). You should focus on testing your own logic around these buttons instead.