React testing library to work with redux-form issue - reactjs

Question

Having an issue trying to test redux-forms components. I keep getting an error FormSection must be inside a component decorated with reduxForm() I tried a couple of different ways to implement this but the results were somewhat the same. Here is test code.
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { reducer as formReducer } from 'redux-form';
import { render, screen, cleanup, fireEvent} from '#testing-library/react'
import "#testing-library/jest-dom";
import ContactInformation from '../components/FormSections/ContactInformation'
// Create a reducer that includes the form reducer from redux-form
const rootReducer = combineReducers({
form: formReducer,
});
const store = createStore(rootReducer);
const renderContactInformation = () => {
render(
<Provider store={store}>
<ContactInformation />
</Provider>,
)
}
describe("<ContactInformation />", () => {
test('it should render fields', () => {
renderContactInformation()
const input = screen.getByLabelText("email")
console.log(input)
}
)
})
any thoughts? These seems like it should work but I think I am at a lost or perhaps I just confused my self. Any help will greatly be appreciated.
Here is the code for the ContactInformation.
class ContactInformation extends Component {
zipCodeLocation = (zip) => {
const { dispatch, updateField, formName } = this.props
new Promise((resolve, reject) => {
dispatch({
type: actions.ZIP_CODE_SEARCH,
zipCode: zip,
resolve,
reject,
})
})
.then((response) => {
dispatch(updateField(formName, "contactInformation.state", response.state))
dispatch(updateField(formName, "contactInformation.city", response.city))
})
.catch((error) => console.log({ error }))
}
render() {
const { checkEmailExistence, emailExists, requiredEmail,isExistingInvestor } = this.props
console.log(this.props)
const isDisable = isExistingInvestor === 'yes' ? 'disabled':''
const isRequired = this.props.isOnboarding
const title = 'Contact Information'
return (
<>
<h3 className="formHeadingBorder">{title}</h3>
<FormSection style={{paddingTop: "5%"}} name="contactInformation">
<Form.Item label="First Name" required>
<FirstNameField name="firstName" requiredMark check={isDisable} />
</Form.Item>
<Form.Item label="Middle Name">
<MiddleInitialField check={isDisable} />
</Form.Item>
<Form.Item label="Last Name" required>
<LastNameField name="lastName" check={isDisable} />
</Form.Item>
<Form.Item required={requiredEmail} label="Email Address" validateStatus={emailExists ? "error" : undefined}>
<EmailField name="email" placeholder="Email Address" required={requiredEmail} check={isDisable} />
</Form.Item>
<Form.Item label="Phone Number">
<div className={styles.multiFormItem}>
<div className={styles.phoneNumberField}>
<PhoneNumberField name="phoneNumber" placeholder="Phone Number" check={isDisable} />
</div>
<div className={styles.inlineFormItem}>
<RadioField name="isMobile" label="Mobile">
<Radio value="yes">Yes</Radio>
<Radio value="no">No</Radio>
</RadioField>
</div>
</div>
</Form.Item>
<Form.Item label="Physical Address">
<StreetOneField placeholder="Address Line 1" check={isDisable} isStreetRequired={isRequired} />
</Form.Item>
<Form.Item label=" ">
<StreetTwoField placeholder="Address Line 2" check={isDisable} />
</Form.Item>
<Form.Item label="Postal Code">
<div className={styles.multiFormItem}>
<ZipField isZipRequired={isRequired} placeholder="Postal Code" onBlur={e => this.zipCodeLocation(e.target.value)} check={isDisable} />
<StateField check={isDisable} />
</div>
</Form.Item>
<Form.Item label="City">
<CityField isCityRequired={isRequired} placeholder="City" check={isDisable} />
</Form.Item>
<Form.Item label="Country">
<CountryField placeholder="Country" />
</Form.Item>
</FormSection>
</>
)
}
}
export default connect(null, (dispatch) => {
return{
dispatch,
updateField: (formName, field, data) => dispatch(change( formName, field, data ))
}
},
)(ContactInformation)