jestでselect(combobox)を変更する

selectの変更がサクッと調べられなかったので備忘録がわりに残します。

備忘録として、select要素の変更をテストする方法を記録しておきます。以下では、簡単な実装とそのテスト方法を紹介します。

実装

まず、以下のようなHTMLのselect要素を用意します。

<select>
  <option>value1</option>
  <option>value2</option>
  <option>value3</option>
</select>

テスト

次に、このselect要素が正しく動作することをテストします。以下のテストコードは、value3が選択できるかを確認します。

test('selectでvalue3が選択できること', async() => {
  // select要素を取得
  const selectValue = screen.getByRole("combobox").closest("select")!
  
  // value3に選択を変更
  fireEvent.change(selectValue, { target: { value: "value3" }})
  
  // value3に変更されたことを確かめる
  expect(selectValue.value).toBe("value3")
})

補足

.closest("select")!を使用している理由は、getByRoleで取得した要素がHTMLElement型と解釈され、valueプロパティが見つからないエラーを避けるためです。
これにより、select要素を明示的に取得し、HTMLSelectElement型として扱うことができます。

もう少し良い書き方がありそうですが、今回はこれまでとします。

最後に

getByRoleは色々指定できるので、公式を見ながら何が取得できるか試してみると良いです。
https://testing-library.com/docs/queries/byrole
短い記事ですが、誰かの時間を救えればいいなと思っています。
最後まで見て頂きありがとうございました。