如何用酶为材料 ui Radio 编写测试答案

【问题标题】：how to write test with enzyme for material ui Radio如何用酶为材料 ui Radio 编写测试
【发布时间】：2021-02-26 23:40:18
【问题描述】：

我使用 Material UI 中的 RadioGroup 并想用 jest 和酵素编写测试代码这是我的代码：

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";  


const ThemeColorSwitcher = ({setDarkState,theme: { _theme, _light, _dark }}) => {
   
  const handleChange = (event) => {
    setDarkState(event.target.value);
  };

  

  return (
    <FormControl component="fieldset">
      <FormLabel component="legend">{_theme}</FormLabel>
      <RadioGroup
        aria-label="theme"
        name="theme1"
        value={darkState}
        onChange={handleChange}      >
        <FormControlLabel value="false" control={<Radio />} label={_light} />
        <FormControlLabel value="true" control={<Radio />} label={_dark} />
      </RadioGroup>
    </FormControl>
  );
};

export default ThemeColorSwitcher;

这是我的测试，但我找不到检查 Radio 是否被点击的道具？

import React from "react";
import ThemeColorSwitcher from "./ThemeColorSwitcher";
import FormControl from "@material-ui/core/FormControl";
import Radio from "@material-ui/core/Radio";
import {
  createMount,
  createShallow,
  createRender,
} from "@material-ui/core/test-utils";

describe("<ThemeColorSwitcher />", () => {
  it("simulates click on radio", () => {
    const mount = createMount();
    const wrapper = mount(<ThemeColorSwitcher />);
    const radio = wrapper.find(Radio).last();
    radio.simulate("click");
    expect(radio.props().checked).toBe(true);
  });
});

任何帮助将不胜感激。

【问题讨论】：

标签： reactjs jestjs material-ui enzyme

【解决方案1】：

在这种情况下，我们需要触发 onChange 事件。为此，您可以运行以下代码。

const event = {
  target: { value: 'true' }
} as React.ChangeEvent<HTMLInputElement>;
wrapper.find(RadioGroup).props().onChange(event, 'true');

这将触发 onChange 事件并更改值。

【讨论】：