【番外編】テストについて - React Ariaの実装読むぞ
こんにちは、フロントエンドエンジニアの mehm8128 です。
今日は 枠稼ぎ番外編として、React Aria で行われているテストについて書いていきます。
React Aria に導入されているテスト
React Aria では主に 3 種類のテストが導入されています。
1 つ目は Storybook です。
開発中に使うのはもちろん、おそらく Chromatic も利用されています。CI で回しているようなコードが見当たらなかったのですが、Chromatic 用の Storybook が別で用意されているのでおそらく使われています。また、@storybook/addon-a11yも導入されています。
2 つ目は Testing Library & Jest です。
今回はこちらをメインに紹介していきます。
3 つ目は手動試験です。
以下のページで説明されているように、様々な デバイス・ブラウザ及びスクリーンリーダーで試験が行われています。
時々 issue や PR などでauditという言葉を見かけますが、おそらくこの手動試験がその一部として行われているのではないかなと思っています（説明されているページは見つけられませんでした）。
Testing Library & Jest
これまでのアドベントカレンダーで紹介してきたいくつかの hook を例に取りながら、どんなテストが書かれているのか見ていこうと思います。
まずはuseLinkからです。
handles defaultsのテストではroleやtabIndexが明示的に渡されていないことと、onKeyDownに関数が与えられていることをテストしています。
次のhandles custom element typeのテストでは、elementType: 'div'でuseLinkを使用したときにroleとしてlinkが明示的に渡されることやtabIndexが0で渡されることがテストされています。また、handles isDisabledのテストではaria-hiddenの値もチェックされています。
このように、最低限の a11y が保証されているかどうかを hook の返り値で 1 つずつ確認しています。
次に、useDisclosureを見てみます。
こちらはインタラクションによる状態変化があります。
以下の 2 つのテストでは、マウスとキーボードでそれぞれ操作したときに、useDisclosureStateから返るstate.isExpandedがtrueかどうかを確かめています。
他にも id の紐づけが適切にされているかどうかを確認しているテストもあります。
昨日の記事で紹介したhidden="until-found"関連のテストもあります。
このように、hooks が提供したい機能が必要最低限提供されているかどうかが、Testing Library & Jest のテストによって保証されています。
Playwright の Aria snapshots
React Aria では使われていないですが、関連事項としてついでに紹介します。
Aria snapshots とは Playwright 1.49 で新しく追加された機能です。
アクセシビリティツリーを yaml 形式でスナップショットとして保存しておき、それを次回テスト時に再度アクセシビリティツリーを yaml 形式にしたものと比較してスナップショットテストを行うことができます。
比較元となる yaml は自分で書いておくことも可能で、書き方によっては部分マッチや正規表現によるマッチなどより柔軟なスナップショットテストを行うことができるようになっています。
azukiazusa さんの記事も参考になります。
これを用いて例えば先ほど紹介したuseLinkのhandles isDisabledのテストの一部がこのように書けるはずです（未検証）。
先ほどのテストコード
Aria snapshots のコード例
await expect(page).toMatchAriaSnapshot(`
- link "Test Link" [disabled="true"]
`);
React Aria の hooks のような低レイヤーなものにはあまり使えなさそうですが、デザインシステムなどではいちいち role や ARIA attributes を確認するテストを書かなくてよくなるので、効率化ができそうです。
まとめ
明日の担当は @mehm8128 さんで、Color Picker についての記事です。お楽しみにー
Discussion