Jest: Как обновить значение фиктивной функции в методе onChange?

Question

В следующем коде все работает, кроме обновления значения в методе onChange.

Ожидаемый способ его работы:

• начальное значение - пустая строка (✓ работает)
• при внесении изменения значением должно быть значение изменения (✗ не работает)

const mockSetFieldValue = jest.fn(() => '');

beforeAll(async () => {
  field = {
    name: 'password',
    value: mockSetFieldValue(),
    // ^^^ initial value is picked up, but not the change in onChange
    onChange: (e) => {
      console.log(e.target.value) // returns: foo123
      mockSetFieldValue.mockReturnValue(() => e.target.value);
      // ^^^ this does not update the value
    },
  };
  tree = (
    <>
      <label htmlFor="password">Password</label>
      <MyField field={field} />
    </>
  );
});

it('input accepts a value', () => {
  const { getByLabelText } = render(tree);
  const input = getByLabelText(/Password/i);

  fireEvent.change(input, { target: { value: 'foo123' } });

  expect(input.value).toBe('foo123');
});

Как можно было бы обновить Метод onChange для изменения значения, установленного в моем компоненте?

Я пробовал mockImplementationOnce и mockReturnValue. Но они, кажется, не работают таким образом.

Answer 1

field.value устанавливается один раз перед всеми вашими тестами, используя текущее значение функции mockSetFieldValue, которая возвращает пустую строку. Поэтому изменение функции mockSetFieldValue не имеет никакого эффекта.

Вы должны иметь возможность установить field.value в onChange, что вы можете сделать так:

onChange: (e) => {
  field.value = e.target.value;
},

Это Вероятно, лучше смоделировать всю функцию onChange:

const mockOnChange= jest.fn();

beforeAll(async () => {
  field = {
    name: 'password',
    value: '',
    onChange: mockOnChange,
  };
  //...
});

Затем в тесте:

mockOnChange.mockImplementationOnce((e) => { field.value = e.target.value });
fireEvent.change(input, { target: { value: 'foo123' } });