- I have created a functional component in React that utilizes Redux with React Hooks.
- For testing, I am using Jest along with Enzyme.
- The component contains Material UI Radio buttons which are rendered as shown in the code snippet 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);
});
});
The issue I am facing is that I cannot seem to change the 'checked' value when simulating a 'click' or 'change' event.
No matter what approach I try, the checked value remains false.
If anyone has any suggestions or advice on how to resolve this, it would be greatly appreciated. Thank you!