はじめに
TestについてJestやTesting Libraryを学習し始めましたが、テストって具体的に何をテストすれば良いのか…
調べた内容をアウトプットします。
【前提】本題に入る前に
テストの記事を調べてく中でaccessibilityとUsabilityに関するテストをする必要があるようです。
この2つはテストをするにあたって抽象的な項目だということを頭に入れておいてください。５W1HでいうWhyの部分です。
accessibility
- ユーザーが使えるかどうかを基準にアプリケーションの挙動を確認する。
- 例：情報を取得できない、操作ができないなど
- 受動的に起こる問題やエラー
Usability
accessibilityが確保されていることが前提
- ユーザー視点での使いやすさ、わかりやすさなど
【本題】フロントエンド初心者は何のテストを学習するの？
accessibilityとUsabilityのどちらを優先してテストするのか。
私の意見では、Usabilityに関するテストの学習を優先して行う方が良いと考えます。(理由は次回以降の記事で書かせていただきます。)
具体的にaccessibilityとUsabilityにはどんなテストがあるのでしょうか。
Usabilityテスト
| Usabilityテスト | 技術 |
|---|---|
| ユニットテスト | Jest, Mocha, AVA, Jasmine, ... |
| 結合テスト | Jest, Testing Library, AVA, ... |
| E2Eテスト | Cypress, Puppeteer, ... |
| ビジュアルリグレッションテスト | Cypress, Percy, Applitools, ... |
accessibilityテスト
| accessibilityテスト | 技術 |
|---|---|
| アクセシビリティテスト | AccessLint, axe-core, Lighthouse, pa11y, ... |
| パフォーマンステスト | Lighthouse, PageSpeed, Insights, WebPageTest, YSlow, ... |
次回の記事で、Usabilityテストについて調べたことを書かせていただきます。
ご指摘、ご意見がありましたら是非おっしゃっていただけると助かります。
下記の記事を参考にしました。
記事投稿者の方、ありがとうございます。
参考にした記事
1:フロントエンド(Next.js)のテストについてまとめる
2:フロントエンドのテストは皆のためのもの
アクセシビリティとユーザビリティ