button要素のないformをjest上で要素取得する方法

Question

解決したいこと

reactでアプリを作成、フロントのテストにjestを使用しています。
button要素のないフォームのイベントを発火させたいのですが、どうしたらいいかわかりません。

ボタンではなく、画像をクリックするとイベントが発火するようにしたかったので、現在のコードになりました。
教えてください。

発生している問題・エラー

イベントが発火してるか確認するため、適当なログを仕込みましたが、そのログが流れません。
なので、現状では要素をうまく取得してイベントの発火ができてないと思います。
button要素があるフォームについてはわかるのですが、逆にbutton要素ないフォームでは何の要素取得すべきで、どう記述すれば取得できるんでしょうか？

該当するソースコード

return (
    <form aria-label='test' onSubmit={handleSubmit(onSubmit)}>
      <input type="image" src={test} alt="test"/>
    </form>
)

it('クリックする', async() => {
    render(<react />
     
    const button = screen.getByRole('input', { name: 'test' })
    /*const button = screen.getByAltText('test')*/
    /*const unlikebutton = screen.getByRole('form', { name: 'test' })*/
    /*const unlikebutton = screen.getByRole('input', { name: 'test' })*/

    userEvent.click(button)
    await waitFor(() => {
      /*onSubmit起動時の処理を記入*/
    })
  })

自分で試したこと

上記の通り、色々パターンを試しました。
aria-labelタグを追加してみてnameで取得できないか試しましたがそれもダメでした。

Comments

[退会済みユーザー]

マルチポスト https://qiita.com/shular/questions/af41cf55f954d4983ad7

Answer 1

画像要素にrole="button"を追加するのはどうでしょうか？

return (
  <form aria-label='test' onSubmit={handleSubmit(onSubmit)}>
    <input type="image" src={test} alt="test" role="button" />
  </form>
)

it('クリックする', async() => {
  render(<ReactComponent />)

  const button = screen.getByRole('button', { name: 'test' })

  userEvent.click(button)
  await waitFor(() => {
    // onSubmit起動時の処理を記入
  })
})

Comments

[gomes_2222]

いざというときはプログラム側を変更するのがよいですね。
ありがとうございました。