Skip to content

selectEvent.select -- not updating Formik fieldValue/Context #895

Closed
@andreyorlov33

Description

@andreyorlov33

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions