Блог

Я учусь использовать React и Formik. Я использую написание некоторых модульных тестов, и у меня возникла проблема, когда мой компонент не получает обновленное значение обновленного состояния. Это моя форма.

 const ItemForm = ({values, item}) = {
 const {amount} = item;
 const {saveItem } = itemProvider();
 const doSaveItem = () => {
     saveItem(values);
   };
  const editingBlock = isEditing ?
      <div>
        <InputLabel htmlFor="amount">Amount</InputLabel>
        <Field
          component={TextField}
          name="amount"
          id="amount"
          inputProps={{
            'aria-label': 'edit-amount'
          }}
        />
      </div>
  ) : (
    <div aria-label="amount">
        Amount:${amount}.00
    </div>
  </>

  return (
     <>
      <IconButton aria-label="Save" onClick={doSaveItem} type="submit">
        <CheckIcon />
      </IconButton>
      {editingBlock}
     </>);
};

}
 

 const ItemListingFormik = ({item}) => {
  return (
    <Formik
      initialValues={item}
      children={(formProps) => <ItemForm {...formProps} item={item} />}
    />
  );
};
 

Затем у меня есть модульный тест для проверки того, что сумма (исходная сумма равна 25) обновляется (до 34) после ввода суммы на входе. Это не работает, и сумма не обновляется после нажатия кнопки сохранения. Однако это сработает, если я изменю doSaveItem на:

 const doSaveItem = () => {
  item.amount = values.amount;
  saveItem(item);
};
 

Кто-нибудь знает, почему это может быть?
Мой модульный тест:

 it('test', async () => {
   const sampleItem = {
    amount: '25'
   };
   render(
     <itemProvider>
        <ItemListingFormik item={sampleItem} />
     </itemProvider>
   );
   const amtInput = screen.getByLabelText('edit-amount');
   fireEvent.change(amtInput, { target: { value: "34" } });
   const saveBtn = screen.getByLabelText('Save');
   fireEvent.click(saveBtn);
   expect(screen.getByLabelText('amount')).toBe('Amount:$34.00')

});