如何在react测试库中测试单选按钮(用户可以选择其他单选按钮)

Question

我是react和在react中编写测试用例的新手。我有两个单选按钮(IPV4和IPV6(。我想测试用户是否可以选择另一个单选按钮。我不知道该在单选按钮上应用哪个事件监听器，是更改事件还是单击事件？

我把我的问题分解为两部分：1(我正在检查是否可以选择或取消选择一个单选按钮2(我是否可以选择另一个单选键。我只在第1部分失败了，所以请帮帮我。这是我的代码和测试用例。

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>
)
}

这是我的测试用例：在这里，我正在尝试选择和取消选择单选按钮，但这给了我错误，所以我如何检查用户是否可以选择另一个选项？

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()      
})

错误输出：

Received element is  checked:
<input class="hidden" id="ipv4" name="ipVersion" readonly="" tabindex="0" type="radio" value="ipv4" checked=""/>

当我调试IPV4单选按钮时，这是输出：●控制台

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"
/>

当我没有通过checkedVersion:"ipv4"作为道具时，单选按钮不会被选中。

我哪里错了。这是对的还是错的？

Answer 1

单选按钮用于分组，因此当单击其中一个按钮时，将取消选择当前选定的按钮。要测试某个单选按钮是否被取消选择，只需选择另一个即可。

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()     
})

然而，作为一项测试，这并没有带来多大价值，因为您只是在测试单选按钮是否按预期工作(我们已经知道它们确实如此(。您应该专注于围绕这些按钮测试您自己的逻辑。