如何在反应测试库中测试单选按钮（用户可以select其他单选按钮）

Question

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

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

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

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

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

单选按钮应成组使用，因此当单击其中一个按钮时，select 将变为当前 select 的按钮。要测试单选按钮是否被删除select，只需 select 另一个按钮。

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

但是，作为测试，这并没有多大价值，因为您只是在测试单选按钮是否按预期工作（我们已经知道它们可以工作）。您应该专注于围绕这些按钮测试您自己的逻辑。

如何在反应测试库中测试单选按钮（用户可以select其他单选按钮）

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

reactjs

jestjs

react-testing-library