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

Question

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

\n

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

\n

import React from \'react\'    \nimport constants from \'LookingGlass/constants\'    \nimport { Label, RadioButton } from \'LookingGlass/common/components\'\n    \nexport const componentTestId = \'SelectorIPVersion\'\n    \nexport default function SelectorIPVersion(props = {}) {\n    const { checkedVersion, onChange, disabled } = props\n    \n    const { choices, groupName, label } = constants.SelectorIPVersion\n    \n    const _onChange = (e) => {\n        onChange && onChange(e.target.value)\n    }\n    \n    let selectorChoices = choices.map((c) => {\n        return (\n            <RadioButton\n                key={c.value}\n                id={c.value}\n                name={groupName}\n                value={c.value}\n                label={c.label}\n                checked={c.value === checkedVersion}\n                onChange={_onChange}\n                disabled={disabled}\n            />\n        )\n    })\n    \n    return (\n        <div data-testid={componentTestId}>\n            <Label text={label} />\n    \n            {selectorChoices}\n        </div>\n    )\n}\n

\n

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

\n

const renderComponent = (props) => render(<SelectorIPVersion {...props} />)\n\ntest(\'Verify that user can select another version\', () => {\n    const { getByRole, debug } = renderComponent({ checkedVersion: \'ipv4\' })\n    \n    const radio = getByRole(\'radio\', { name: \'IPv4\' })\n    expect(radio).toBeChecked()\n    debug(radio)\n    fireEvent.click(radio)\n    expect(radio).not.toBeChecked()      \n})\n

\n

错误输出：

\n

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

\n

当我调试 IPV4 单选按钮时，这是输出：\n\xe2\x97\x8f 控制台

\n

console.log node_modules/@testing-library/react/dist/pure.js:94\n  <input\n    checked=""\n    class="hidden"\n    id="ipv4"\n    name="ipVersion"\n    readonly=""\n    tabindex="0"\n    type="radio"\n    value="ipv4"\n  />\n

\n

当我不通过 checkVersion: \'ipv4\' 作为 props 单选按钮时，未选中。

\n

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

\n

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

然而，作为一个测试，这并没有带来太大的价值，因为您只是测试单选按钮是否按预期工作（我们已经知道它们是这样做的）。您应该专注于测试您自己围绕这些按钮的逻辑。