如何使用 React 测试库来模拟点击 Material UI RadioGroup 选项？

Question

如何编写反应测试库测试脚本来验证单击 Material UI 单选按钮？以下是我遇到的问题的再现。

import React from 'react';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';

export default function RadioButtonsGroup() {
  const [value, setValue] = React.useState('female');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <FormControl component="fieldset">
      <FormLabel component="legend">Gender</FormLabel>
      <RadioGroup aria-label="gender" name="gender1" value={value} onChange={handleChange}>
        <FormControlLabel value="female" control={<Radio />} label="Female" />
        <FormControlLabel value="male" control={<Radio />} label="Male" />
        <FormControlLabel value="other" control={<Radio />} label="Other" />
        <FormControlLabel value="disabled" disabled control={<Radio />} label="(Disabled option)" />
      </RadioGroup>
    </FormControl>
  );
}

和测试

import { render, screen, fireEvent } from "@testing-library/react";
import RadioButtonsGroup from "./demo";

test("can click Male radio option", () => {
  render(<RadioButtonsGroup />);
  const maleLabel = screen.getByLabelText(/Male/);
  fireEvent.click(maleLabel);
  expect(maleLabel).toBeChecked();
});

Answer 1

嘿 - 按角色获取应该可以帮助你。尝试：

const button = screen.getByRole("radio", { name: "Male" });

这样您就可以访问标签为 Male 的单选按钮。

那你可以做

 const leftClick = { button: 0 };

 userEvent.click(button, leftClick);

 expect(button.checked).toBe(true);

不过我发现的一件事是 .checked 属性不能很好地与 Typescript 一起使用，所以如果你正在编写 typescript，你可能会收到关于 .checked 的警告不存在

如何使用 React 测试库来模拟点击 Material UI RadioGroup 选项？

How can I use React Testing Library to simulate clicking on Material UI RadioGroup option?

reactjs

react-testing-library