title: Click a material-ui radio button in a jest test and see it's effect
body: <p>I am trying to complete a jest test on a bespoke reusable component but having difficulty getting it to work. I have pared it back in a sandbox using plain material-ui components and am still having difficulty in simulating the radio button click.  I have tried </p>
  
  <pre><code>     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();
  </code></pre>
  
  <p>working sandbox with failing test here: <a href="https://codesandbox.io/s/magical-raman-7f8v7" rel="nofollow noreferrer">https://codesandbox.io/s/magical-raman-7f8v7</a></p>
  
  <p>complete code file here:</p>
  
  <pre><code>
  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 = () =&gt; {
    const [value, setValue] = React.useState("other");
    const handleChange = event =&gt; {
      setValue(event.target.value);
    };
  
    return (
      &lt;div&gt;
        &lt;FormControl component="fieldset"&gt;
          &lt;FormLabel component="legend"&gt;Gender&lt;/FormLabel&gt;
          &lt;RadioGroup
            aria-label="gender"
            name="gender1"
            value={value}
            onChange={handleChange}
          &gt;
            &lt;FormControlLabel value="female" control={&lt;Radio /&gt;} label="Female" /&gt;
            &lt;FormControlLabel value="male" control={&lt;Radio /&gt;} label="Male" /&gt;
            &lt;FormControlLabel value="other" control={&lt;Radio /&gt;} label="Other" /&gt;
          &lt;/RadioGroup&gt;
        &lt;/FormControl&gt;
      &lt;/div&gt;
    );
  };
  
  describe("---RadioGroup Interaction Test Suite", () =&gt; {
    test("Test to check selection isupdated from the last option to the first ", () =&gt; {
      const wrapper = mount(&lt;TestComponentRadioGroup /&gt;);
  
      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);
    });
  });
  
  </code></pre>