title: Testing Material UI Radio Checked Value
body: <ul>
  <li>I have a functional component written in React with Redux using React
  Hooks.</li>
  <li>I am testing using Jest with Enzyme.</li>
  <li>The component renders Material UI Radio buttons <strong>(code example below):</strong></li>
  </ul>
  
  <pre><code>&lt;RadioGroup&gt;
    &lt;FormControlLabel
      value="batchName"
      label="Batch Name"
      name="batchName"
      control={
        &lt;Radio
          disableRipple
          name="batchName"
          color="primary"
          checked={searchBy === 'batchName'}
          onClick={() =&gt; {dispatch(actions.setBatchSearchBy('batchName'))}}
        /&gt;
      }
    /&gt;
    &lt;FormControlLabel
      value="firstPaymentDate"
      label="First Payment Date"
      name="firstPaymentDate"
      control={
        &lt;Radio:
          disableRipple
          name="firstPaymentDate"
          color="primary"
          checked={searchBy === 'firstPaymentDate'}
          onClick={() =&gt; {dispatch(actions.setBatchSearchBy('firstPaymentDate'))}}
        /&gt;
      }
    /&gt;
  &lt;/RadioGroup&gt;
  </code></pre>
  
  <p><strong>Test file:</strong></p>
  
  <pre><code>import React from 'react';
  import { BatchHeaderComponent } from '../../../components/batchManagement/BatchHeaderComponent';
  import configureStore from '../../../store';
  import {Provider} from "react-redux";
  import Enzyme, { mount } from "enzyme";
  import Adapter from "enzyme-adapter-react-16";
  import Radio from "@material-ui/core/Radio";
  
  Enzyme.configure({ adapter: new Adapter() });
  
  describe('BatchHeaderComponent', () =&gt; {
    it('mounts to the DOM with its sub-components', () =&gt; {
      const wrapper = mount(&lt;Provider store={configureStore()}&gt;
        &lt;BatchHeaderComponent/&gt;
      &lt;/Provider&gt;);
      expect(wrapper.find(BatchHeaderComponent)).toBeDefined();
    });
  
    it('changes searchBy when a new option has been selected', () =&gt; {
      const wrapper = mount(&lt;Provider store={configureStore()}&gt;
        &lt;BatchHeaderComponent /&gt;
      &lt;/Provider&gt;);
      const radio = wrapper.find(Radio).last();
      console.log(radio.debug());
      // radio.simulate('change', {target: {name: 'firstPaymentDate', checked: true}});
      // radio.prop('onChange', {target: { name: 'firstPaymentDate', checked: true}});
      radio.simulate('click');
      console.log(radio.debug());
      expect(radio.props().checked).toEqual(true);
    });
  });
  
  </code></pre>
  
  <p>I can't get the 'checked' value to change when simulating a 'click' or 'change' event. </p>
  
  <p>Regardless of which path I take, the checked value remains false.</p>
  
  <p>Any advice would be greatly appreciated.
  Thanks!</p>