Closed
Description
Hello,
I am testing a react component wrapped in a Formik context
regular input fields work just fine - but for some reason Select fields do not update the Formik context
@testing-library/react
version: ^11.1.0- "@testing-library/jest-dom": "^5.11.9",
- "react-select-event": "^5.3.0",
<Formik
initialErrors={initialError}
initialValues={formInitialValues}
validateOnChange
validationSchema={formValidationSchema}
onSubmit={async (values, { resetForm }) => {
await createTransaction(values, client);
resetForm();
}}
>
{({ setFieldValue, values, handleSubmit, handleReset, errors }) => {
return (
<div>
<InputGroup
groupId="street1"
isInvalid={touched.property?.address?.street1 && propertyErrors?.street1}
isRequired
pb={3}
pt={5}
>
<InputLabel>Address</InputLabel>
<Field as={Input} name="property.address.street1" />
{touched.property?.address?.street1 && propertyErrors?.street1 && (
<InputErrorMessage>{propertyErrors?.street1}</InputErrorMessage>
)}
</InputGroup>
<InputGroup
data-test-id="state-selection"
flex={1}
groupId="state"
isInvalid={touched.property?.address?.state && propertyErrors?.state}
isRequired
pb={3}
pt={5}
>
<InputLabel htmlFor="propertyState">State</InputLabel>
<Select
defaultValue={STATE_OPTIONS.find((option) => option.value === values.property.address.state)}
value="state"
isInvalid={propertyErrors?.state}
inputId="propertyState"
name="property.state"
options={STATE_OPTIONS}
onChange={(state: any) => {
setFieldValue('property.address.state', state.value);
}}
/>
</InputGroup>
</div>
);
}}
</Formik>
Test:
describe(`It should update Formik fields, ()=> {
beforeEach(()=> render(<FormikComponent />))
it(`should update all fields`, async() => {
const address = screen.getByLabelText('Address*')})
const state = screen.getByLabelText('State*');
selectEvent.select(state, ['California']);
await waitFor(()=> {
fireEvent.change(address, {
target: { value: '1234 test street },
});
screen.debug(address)
/*
<input
aria-required="true"
class="sc-bdnylx sc-bkbjAj iyVBML dUFQAF"
font-family="Inter"
font-size="[object Object]"
id="street1"
name="property.address.street1"
required=""
type="text"
value="1234 test street"
/>
*/
screen.debug(state)
/*
<input
aria-autocomplete="list"
class="css-62g3xt-dummyInput"
id="propertyState"
readonly=""
tabindex="0"
value=""
/>
*/
})
})
What you did:
The Address is updated with a fireEvent.chagne, works just fine.
The state, however does not get updated no matter the approach.
Also tried to set the value of the state select with an fireEvent.change (didn't work)
and with selectEvent.open(state) fireEvent.click(screen.getByText('California')) - also did not work.
Problem description:
Formik field value not updated with select event.