如何使用 userEvent 测试 MUI ToggleButtonGroup？

Question

我正在使用 MUI ToggleButtonGroup 组件，如下所示：

<ToggleButtonGroup
        color="primary"
        value={mode}
        exclusive
        onChange={changeHandler}
        fullWidth
        className="mt-4"
      >
        <ToggleButton value="login">Login</ToggleButton>
        <ToggleButton value="register">Register</ToggleButton>
      </ToggleButtonGroup>

单击“注册”按钮时，它在用户界面中运行良好。 我想用 React Testing Library 编写一个适当的测试。

这是我所拥有的：

setup();
    heading = screen.getByRole("heading", { level: 2 });
const registerButton = screen.getByRole("button", { name: /register/i });
    userEvent.click(registerButton);

    expect(heading).toHaveTextContent("Register");

问题的关键似乎是userEvent.click以某种方式不调用changeHandler 。 是否有某种类型的冒泡或我需要关注的事情？

这是相关组件的prettyDOM log ：

 <button
      aria-pressed="false"
      class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-fullWidth MuiToggleButton-sizeMedium MuiToggleButton-primary MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-j4p6el-MuiButtonBase-root-MuiToggleButton-root"
      tabindex="0"
      type="button"
      value="register"
    >
      Register
      <span
        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
      />
    </button> <h2
      class="MuiTypography-root MuiTypography-h5 css-ag7rrr-MuiTypography-root"
    >
      Login
    </h2>

Answer 1

向组件添加一个 id：<ToggleButton id={ ${data.value} }> {data.label}

测试用例：

describe("ToggleButtonGroupComponent onChange Testing", () => {

const onChange = vi.fn(); it("toggle group change value and new value updated and last value no more checked", () => { const { container } = render(<ToggleButtonGroupComponent {...props} onChange={onChange} />); // Before change selection const allValueToggleButton = QueryAttributeById(container, "ssh") as HTMLInputElement; expect(allValueToggleButton.value).toEqual("ssh"); // Change selection const withValueToggleButton = QueryAttributeById(container, "http") as HTMLInputElement; fireEvent.click(withValueToggleButton); expect(withValueToggleButton.value).toEqual("http"); // Old value is no more checked expect(allValueToggleButton.value).toEqual("ssh"); }); });