I have a component that is following the useFormik pattern like this.
const formikOptions:FormikConfig<FormType> = someFormikOptions
const formik = useFormik(formikOptions)
const {values, handleSubmit, dirty, } = formik
Then I toss in a <FormikProvider value={formik}> in the component, and everything works fine on the front end when I run everything. No errors reported at build time, no console warnings, no issues. Woohoo!
Then I come to my spec file where we use jest and enzyme. We recently added an option that resets all mocks between tests (not my decision, not a decision that I can overrule, please do not tell me to yell at my CTO to fix this). One of my now-failing tests looks like this:
decribe('the component name',()=>{
it('should render',()=>{
const wrapper = shallow(<TheComponent {...ownProps} />)
expect(wrapper).toMatchSnapshot()
}
}
When I run this code, I'm getting an error:
TypeError: Cannot destructure property 'values' of 'formik' as it is undefined.
I've tried spying on useFormik and mocking a return value with a clearly defined values return object, but I've been unsuccesful. I'm not sure what I'm doing wrong here. Whenever I google, I'm getting information strictly for useFormikContext, never for useFormik. Why am I seeing this type error, and how can I mend it?