Testing Material UI Radio Checked Value - reactjs

Question

I have a functional component written in React with Redux using React
Hooks.
I am testing using Jest with Enzyme.
The component renders Material UI Radio buttons (code example below):
<RadioGroup>
<FormControlLabel
value="batchName"
label="Batch Name"
name="batchName"
control={
<Radio
disableRipple
name="batchName"
color="primary"
checked={searchBy === 'batchName'}
onClick={() => {dispatch(actions.setBatchSearchBy('batchName'))}}
/>
}
/>
<FormControlLabel
value="firstPaymentDate"
label="First Payment Date"
name="firstPaymentDate"
control={
<Radio:
disableRipple
name="firstPaymentDate"
color="primary"
checked={searchBy === 'firstPaymentDate'}
onClick={() => {dispatch(actions.setBatchSearchBy('firstPaymentDate'))}}
/>
}
/>
</RadioGroup>
Test file:
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', () => {
it('mounts to the DOM with its sub-components', () => {
const wrapper = mount(<Provider store={configureStore()}>
<BatchHeaderComponent/>
</Provider>);
expect(wrapper.find(BatchHeaderComponent)).toBeDefined();
});
it('changes searchBy when a new option has been selected', () => {
const wrapper = mount(<Provider store={configureStore()}>
<BatchHeaderComponent />
</Provider>);
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);
});
});
I can't get the 'checked' value to change when simulating a 'click' or 'change' event.
Regardless of which path I take, the checked value remains false.
Any advice would be greatly appreciated.
Thanks!

Answer 1

I figured it out. I needed to run wrapper.find again to see the updated change.
it('changes searchBy when a new option has been selected', () => {
const wrapper = mount(<Provider store={configureStore()}>
<BatchHeaderComponent />
</Provider>);
const radio = wrapper.find(Radio).last();
radio.simulate('click');
expect(wrapper.find(Radio).last().props().checked).toEqual(true);
});