Alter useMemo when write input in react testing library

Question

I'm trying to do a test, in which when changing the input, I have to read the useMemo and change the disabled of my button, the userEvent is not making this change, has anyone gone through this?

I'm going to put part of my source code here, where the component and the test script are.

<>
  <input
    data-testid="ipt-email"
    value={form.email}
    onChange={(e) => {
      setForm({ ...form, email: e.target.value });
    }}
  />
  <button data-testid="submit-sendUser" disabled={isDisabled}>
    OK
  </button>
</>

This is my hook

const isDisabled = useMemo(() => {
  const { email } = form;
    
  if (!email.length) return true
  
  return false;
}, [form]);

Right after that is my unit test, where I write to the input and wait for the state to change

import userEvent from "@testing-library/user-event";

it("Should enable button when form is valid", async () => {
  const wrapper = render(<MyComponent />);

  const getEmail = wrapper.getByTestId("ipt-email");

  await userEvent.type(getEmail, '[email protected]');

  const getBtnSubmit = wrapper.getByTestId("submit-sendUser");

  console.log(wrapper.container.innerHTML);

  expect(getBtnSubmit).not.toBeDisabled();
});

I can't make the input change reflect in the button hook

Answer 1

Need to wait for changes to occur after the action

 await waitFor(() => expect(getBtnSubmit).not.toBeDisabled())

moving code inside the handler applieds to useEffect, but I feel its better to handle the validation inside the handler to so that code changes remain in one place.

Hope it helps