1

i'm trying to test a react component with react/testing-library: This is my test:

    const startDate = document.querySelector('#startDate') as HTMLInputElement;

    await userEvent.type(startDate, '11/07/2022');
    await userEvent.type(startDate, '11/07/2024');
    await waitFor(() => {
      expect(startDate).toHaveValue('11/07/2024');
    });

As you can see I'm typing into an input two times successively. My assertion does not work and I don't understand why.

    Expected the element to have value:
      11/07/2024
    Received:
      11/07/2022

It seems that he keeps only the first typing but the second is ignore somehow. I know setState is asynchronous so I tried to over await the events but this is not the solution. Can someone help or enlight me ?

The reason I'm doing this test is because, in my component I have 2 inputs. First input when filled correctly enabled the second. And one of the component behavior is to clear the second input value when the user is typing again on the first one.

JULIEN PICARD
  • 1,364
  • 1
  • 8
  • 11

0 Answers0