Testing libraryでsubmitボタンのないフォームの送信をテストするメモ

Testing libraryでsubmitボタンのないフォームの送信をテストするメモ

以下のような検索フォームがあるとする。submitボタンがないタイプの検索フォームをjestでどうテストするのか気になったので調べたメモ

const SearchForm = () => {
  return (
    <form>
      <svg>
        {"検索のアイコン"}
      </svg>
      <input type="text" />
    </form>
  )
}

コード

{enter}を指定することで解決。これは内部でfireEventでEnterキーをクリックしているらしい

describe("テスト", () => {
  it("テスト", () => {
    const user = userEvent.setup();
    render("レンダリング");

    const Form = screen.getByRole("form");
    const Input = Screen.getByTestId("input");

    await user.keyboard('{enter}');

    // expectなど
  })
})

参考