在 react-testing-library 中的 fireEvent.click 之后测试是否仅在 radiogroup 组件中选择了 1 个单选按钮

Question

我想测试在单选按钮上 fireEvent.click 之后只有 1 个单选按钮被点击。

到目前为止，我已尝试获取所有单选按钮并寻找代码来检查如果仅选中单选按钮如何计数。

it("should check if only 1 radiobutton was clicked", () => { 
    const handleChange = jest.fn();
    const { container } = render(
      <React.Fragment>
        <Radiobutton onClick={handleChange} isChecked label="Dummy Radio1" />
        <Radiobutton
          onClick={handleChange}
          isChecked={false}
          label="Dummy Radio2"
        />
        <Radiobutton
          onClick={handleChange}
          isChecked={false}
          label="Dummy Radio3"
        />
      </React.Fragment>
    );
    const dialogContainer = getAllByRole(container, "radio");
    dialogContainer[0].setAttribute("aria-checked", "true");
    dialogContainer.forEach(key => {
      // 
      // Code to check if only 1 radiobutton was clicked
      // 
    });
});

我的radiobutton.js

<div
      className="radiobutton"
      role="radio"
      onClick={onClick}
      onKeyDown={onKeyPress}
      aria-checked={isChecked}
      tabIndex={0}
      value={label}
    >
      <span className="radiobutton__label">{label}</span>
    </div>

Answer 1

您可以这样使用 fireEvent and then use .checked with a filter：

it("should click on text", () => { 
    const handleChange = jest.fn();
    const { container } = render(<Radiogroup onClick={handleChange} />);
    const dialogContainer = getAllByRole(container, "radio");

    const checkedItemsBeforeClick = dialogContainer.filter(el=>el.checked)
    expect(checkedItems.length).toEqual(0)
    fireEvent.click(dialogContainer[0]);

    const checkedItemsAfterClick = dialogContainer.filter(el=>el.checked)
    expect(checkedItems.length).toEqual(1)
});

更新：

由于您没有使用 input 元素，因此您需要执行以下操作：

const RadioButtonGroup ()=>{
 const [selectedId, setSelectedId] = useState('select_1')
 const handleChange = (ev)=>{
     setSelectedId(ev.target.id)
 }
return (
<React.Fragment>
    <Radiobutton id="select_1 onClick={handleChange} isChecked={selectedId==="select_1"} label="Dummy Radio1" />
    <Radiobutton
      onClick={handleChange}
      isChecked={selectedId==="select_2"} 
      label="Dummy Radio2"
    />
    <Radiobutton
      onClick={handleChange}
      isChecked={false}
      label="Dummy Radio3"
      isChecked={selectedId==="select_2"} 
    />
  </React.Fragment>
)
};

并确保将 id 属性传递给 Radiobutton。希望对您有所帮助。

在 react-testing-library 中的 fireEvent.click 之后测试是否仅在 radiogroup 组件中选择了 1 个单选按钮

test if only 1 radiobutton is selected in a radiogroup component after fireEvent.click in react-testing-library

reactjs

testing

jestjs

react-testing-library