react-input-mask + user-events + @testing-library/react

react-input-mask_testing-library.ts

import userEvent from '@testing-library/user-event';
import TestUtils from 'react-dom/test-utils';

function changeInputMaskValue(element: HTMLInputElement, value: string) {
  element.value = value;
  element.selectionStart = element.selectionEnd = value.length;
  TestUtils.Simulate.change(element);
};

it('example test', async () => {
  render(
    <MyComponent
      amount="100.00"
    />,
  );

  act(() => {
    // Both lines of codes are required
    userEvent.type(screen.getByLabelText('Amount'), '300');
    changeInputMaskValue(screen.getByLabelText('Amount') as HTMLInputElement, '300');
  });

  act(() => {
    // Do not move the form submitting to the previous `act`, it must be in two
    // separate `act` calls.
    userEvent.click(screen.getByText('Next'));
  });

  // You must use `findByText`
  const error = await screen.findByText(/\$100.00 to redeem/);
  expect(error).toBeInTheDocument();
});