onIonChange not being triggered when doing user.type during unit test

Here is my simple example:

import { IonApp, IonInput, IonLabel, IonPage } from '@ionic/react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useState } from 'react';

const Example: React.FC = () => {
  const [test, setTest] = useState('');
  return (
    <IonPage>
      <IonLabel>{test}</IonLabel>
      <IonInput placeholder="Test Input" onIonChange={(e) => setTest(e.target.value as string)}></IonInput>
    </IonPage>
  );
};

test('label should display value when typed into input', async () => {
  const user = userEvent.setup();
  render(
    <IonApp>
      <Example />
    </IonApp>
  );
  await user.type(screen.getByPlaceholderText('Test Input'), 'Test Value');

  await waitFor(() => {
    expect(screen.getByText('Test Value')).toBeInTheDocument();
  });
});

I also have my tests set-up as per: Ionic React Unit Testing Setup | Ionic Documentation

When running the test above onIonChange does not seem to be triggered and updating the state.

1 post - 1 participant

Read full topic