在玩笑测试中单击material-ui单选按钮，查看其效果

Question

我正在尝试对定制的可重用组件进行一次开玩笑的测试，但是很难使其正常工作。我已经在使用普通Material-ui组件的沙箱中将其削减了，但在模拟单选按钮单击时仍然遇到困难。我已经尝试过

     wrapper.find(Radio).first().simulate('click');
     wrapper.find(Radio).first().prop('onChange', { target: { checked: true } });
     wrapper.find(Radio).first().simulate('change', {target: {checked: true}});
     wrapper.find(Radio).first().update();

工作沙箱，此处测试失败：https://codesandbox.io/s/magical-raman-7f8v7

完整的代码文件在这里：

import React from "react";
import { mount } from "enzyme";
import { RadioGroup, Radio } from "@material-ui/core";
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";

configure({ adapter: new Adapter() });

const TestComponentRadioGroup = () => {
  const [value, setValue] = React.useState("other");
  const handleChange = event => {
    setValue(event.target.value);
  };

  return (
    <div>
      <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" />
        </RadioGroup>
      </FormControl>
    </div>
  );
};

describe("---RadioGroup Interaction Test Suite", () => {
  test("Test to check selection isupdated from the last option to the first ", () => {
    const wrapper = mount(<TestComponentRadioGroup />);

    const radioButtonGroup = wrapper.find(RadioGroup);
    expect(radioButtonGroup).toHaveLength(1);

    //check that the first item isn't checked but the third one is
    const radioButtons = wrapper.find(Radio);
    console.log("we found " + radioButtons.length + " radiobuttons");
    expect(radioButtons).toHaveLength(3);

    expect( wrapper.find(Radio).first().props().checked).toBe(false);
    expect( wrapper.find(Radio).last().props().checked).toBe(true);

    //Desperation - I expected the first one to work!
    wrapper.find(Radio).first().simulate("click");
    wrapper.find(Radio).first().prop("onChange", { target: { checked: true } });
    wrapper.find(Radio).first().simulate("change", { target: { checked: true } });
    wrapper.find(Radio).first().update();

    //I am not sure that I need this!
    wrapper.update();

    expect( wrapper.find(Radio).first().props().checked).toBe(true);
    expect( wrapper.find(Radio).last().props().checked).toBe(false);
  });
});

Answer 1

此代码对我有用：

import { Radio } from '@material-ui/core';

let mComponent: ReactWrapper;
mComponent = mount(component);

const radioInputs = mComponent.find(Radio);
radioInputs.at(0).simulate('click', { target: { checked: true } });