MUI SelectをfindByRoleで取得する

ハマるの2回目だったので覚書

<TextField select />の場合です。

結論

labelに「hoge」が設定されているとします。

• 未選択の場合findByRole('button', { name: 'hoge \u{200B}' })
• 選択済の場合findByRole('button', { name: 'hoge fuga' })
  • 「fuga」を選択しているとします

解説

クリックすると選択肢が表示されるnodeにはaria-labelledby=":r1a:-label :r1a:"が設定されているため、findByRoleのname部分には[labelの値] [Selectの表示値]を設定する必要があります。

注意しないといけないのは未選択の場合で、「Selectの表示値」にZeroWidthSpaceが設定されているため、これを指定しないといけません。