React / Jestユニットテストでは、モックされたコンポーネントによって呼び出されるイベントプロップをどのようにシミュレートしますか？

ユーザー名フィールドを持つログインフォームであるReactコンポーネントがあるとします。ユーザーがユーザー名を空白の文字列に設定すると、コンポーネントにエラーメッセージが表示されます。

コードは次のとおりです。

const LoginForm = () => {
  const [errorMessage, setErrorMessage] = useState(''),
    handleOnChangeUsername = (newUsername: string) => {
      if (newUsername.trim() === '') {
        setErrorMessage('Username is required.');
      } else {
        setErrorMessage('');
      }
    };

  return (
    <form>
      <UsernameField onChange={handleOnChangeUsername} />
      {errorMessage && <Error message={errorMessage} />}
    </form>
  );
};

このコンポーネントをユニットテストしたいと思います。

したがって、ユーザーが空白のユーザー名を入力すると、エラーメッセージ「ユーザー名が必要です」が下に表示されることを確認するテストを作成したいと思います。

この単体テストを作成するには、次のことを行う必要があると思います。

1. LoginFormコンポーネントをマウントし、モックされたUsernameFieldコンポーネントを提供します。

2. モックされたUsernameFieldコンポーネントを取得して、そのonChangeプロパティを呼び出し、空白の文字列を渡します。

3. LoginFormコンポーネントがエラーコンポーネントをレンダリングしていることを表明します（つまり、handleOnChangeUsernameのコードが実際に実行され、正しい副作用が発生したことを確認します）。

モック部分は簡単です。モジュールへのパスとモック実装を渡すだけで、jest.mock（...）を呼び出します。

トリッキーなビットはステップ2です。空の文字列で呼び出されるonChangeをシミュレートするために、ユニットテストでモックに独自の小道具の1つを呼び出させるにはどうすればよいですか？

ユニットテストコードがモックされたコンポーネントの内部小道具と通信できるチャネルが必要になるようです。

React / Jestユニットテストでこれを行う簡単なおよび/または慣用的な方法はありますか？

注：この質問は、モキストスタイルを想定しています。一部の開発者は、ユーザー名コンポーネントがレンダリングするDOM要素を操作して、ユーザー名onChangeを直接トリガーする必要があると言うかもしれません。私はすでにそれを行う方法を知っています。しかし、私はモキストスタイルに従い、ユーザー名コンポーネントを完全にモックしたいと思います。