テスト
UIコンポーネントからイベント発火したことをテストする 親子コンポーネントの連動をテストする際、子コンポーネントでイベント発火したことを親コンポーネントに伝えたか確認したいことがある。特に小コンポーネントで状態を加工して親コンポーネントに送る…
UIコンポーネントのカタログツールStorybookを使い、コンポーネントをセットアップする方法もある。StorybookはStoriesというファイルに「どのようなコンポーネントをStorybookに描画するか」を記載する。propsに応じて描画内容を出し分けることもできる1。 …
テストランナーを動かす前に「UIコンポーネントは今どういう状態なのか」をセットアップしなければいけない。UIコンポーネントが必須のpropsを持つ場合、propsを与えなければUIコンポーネントは動作しない。また、 特定の場面で挙動が変わる場合は特定の場面…
Testing Libraryで<td>要素に関するテストを書く場合、getAllByRoleで<td>タグを取得する方法と<tr>タグで一度対象の列を取得したのち<td>タグを取得する方法がある。 <td>タグを直接取得する方法 getAllByRoleでARIA roleのcellを指定して取得できる。<td>（テーブルセル）は複数存</td></td></td></tr></td></td>…
テキスト入力フォームの特徴は「入力値をユーザーが好きに編集できる点」である。テストケースもフォームの値を編集した後UIが変わることを確かめたい場合が多い（例：入力値に応じてバリデーションチェックを行う）。フォーム入力はDOMイベントになるためus…
テキスト入力を行う<input type="text">1コンポーネントはWebアプリケーション開発を行う場合ほぼ必須となる。このテストケースの記載方法を覚えておくとあらゆる面で応用が効くためTODOを挙げて記載方法を確認していく。 TODO 苗字の入力フォームと名前の入力フォームが存在す…
ドロップダウンには複数の<option>を選択できるパターンが存在する。これをテストする例は探しても中々出てこないため、記載する。 複数要素は<select>にmultiple属性を設定することで実現できる。 export default function StayExtensionMultipleSelectBox() { return ( // </select></option>…
クリックすると複数の選択肢が表示され、一つまたは複数を選ぶことができるUIパーツを「ドロップダウン」「プルダウン」「セレクトボックス」などと表現する。HTML選択要素とも表現される。HTMLタグは<select>1と表現する。ここではMDN日本語ドキュメントに合わせt「</select>…
ラジオボタンやセレクトボックスのように、valueを持つHTMLタグがある。 UIコンポーネントテストを書く際、valueが意図通り設定できていることをテストしたい場面がある。 ハマってしまいやすいのでメモする。 ラジオボタンの値を取得したい場合 こういう実…
ラジオボタンやチェックボックスなど、クリックしたときchecked属性を切り替えてON・OFFを表現するUIコンポーネントがある。 これのテスト方法を毎回探し回っていたため、記録しておく。 ラジオボタンをクリックしたとき選択状態が切り替わるかテストする ラ…
ボタンクリックで表示・非表示を切り替えたい UIを開発しているとボタンをクリックすると指定要素の表示・非表示を切り替えたい場面が出てくる。これをUIコンポーネントテストに落とし込む場合、少し注意が必要となる。 理由は「見た目上は消えているがレン…
Testing Libraryで<button>要素に関するテストケースを書く場合、ボタン要素の取得はgetByRole()1を使うことをおすすめする。 getByRoleを使うと「〇〇ラベルのボタン要素」に対するテストであることを一目で例示できるためである。 getByRole()は各要素に紐づくWAI-</button>…
テストランナーにはマッチャー（Matcher）1というAPIが存在する。これは、テストを実行するライブラリ（テストランナー）に「こんな検証をしてほしい」と伝えてテストを実行してもらうための関数である。マッチャーの使い方を知っていると、初めて出てくる仕…
UIコンポーネントテストでは「ボタンをクリックするとテキストが表示されることを確かめたい」など、ユーザーの操作を再現したい場面が出てくる。 ユーザー操作の種類は無限にあるように見えるが、考え方を身につけていればUIコンポーネントテストを書ける。…
UIコンポーネントテストで鬼門となるのは「テスト対象の要素を取得する」ことである。 要素が取得できないとそもそもテストしようがないのである。UIコンポーネントパーツはお決まりのパターンがあるので真似れば良いが、100%参考にできるわけでもない。また…
ここでの初期状態とはUIコンポーネントテストを書くとき設定するpropsのことである。 propsが複数ある場合、全てのパターンを網羅しようとすると組み合わせの数次第ではテスト数が膨大になる。 すると、テストケースの維持やメンテナンスが難しくなる。 自動…
UIコンポーネントテストをいきなり書くのは難しい。最初にテストを書く流れを抑えたあと書き始めると良い。 テスト用ライブラリの思想を理解する（最初の1回のみ） UIコンポーネントの仕様を言語化する 言語化したものを元にTODOリストを作る TODOリストを元…
UIコンポーネントテストを書く行為は後回しになりやすい。それは難しさが要因に含まれているからと考えられる。 どのような部分が難しいのだろうか。 セットアップが難しいから UIコンポーネントを動かすためにはブラウザ環境を擬似的に再現する必要がある。…
UIコンポーネントテストは単体テストと似ている面もありつつ、異なる点も存在する。両者の違いを明確にすることで更に理解を深めたい。 単体テストとは 『【この1冊でよくわかる】 ソフトウェアテストの教科書 [増補改訂 第２版]』1によると、単体テストは次…
普段何気なく書いているUIコンポーネントテストについてまとめた。 UIコンポーネントテストは、「UIコンポーネント」の動作を自動的にテストするプロセスである。「UIコンポーネント」について、Reactの公式ドキュメント1では以下のように説明されている。 R…
UIコンポーネントテスト、書けると複雑なコンポーネントのバグを防ぐ効果があると思っている。 しかし、慣れるまではテストケースの組み立て方法すらわからず苦戦する印象がある。 苦戦するだけならいいが、うまくいかず挫折するともったいない。組み立て方…
↓をやり終わったため感想をまとめておく。1 rimarimadan.hatenablog.com どのように進めたか お題を出して TODOを分解して TODOを一つずつ実装しながらテストを書いて 最後にリファクタリング（最初の方はスキップしていた。まずはテストを書くことに集中す…
これはソフトウェアテストの小ネタ Advent Calendar 2022の1日目の記事です。 筆者は普段Webアプリケーションのフロントエンド領域開発&保守を担当しています。 過去、保守していたWebアプリケーションで特定の操作フローのケースが丸ごと抜けていた事案があ…
最近、JavaScriptでテストコードを書けるようになろう！というお題でモブプログラミング形式の勉強会をやっている。 遂に実務でテストケース + 実装でPull Requestを出せる人が出てきた。これだけで50％ペイした気持ちになっている。 詰まってしまう点とフォ…
今からの話はVue Test Utilsで書かれたコンポーネントテストについての話です。でも観点は他のテストライブラリでも一緒かなと思います。 今まで職場を転々としてきたが、今の職場は初めて「フロントエンドのテスト環境がある」職場だった。コンポーネントへ…
E2Eテストの必要性はわかる。あった方が良い。でも、「一生懸命頑張って環境作った」人がいたのにメンテされず捨てられる、という場面に遭遇した事があるのでE2Eという文字を見ると微妙な気持ちになる。 何故捨てられてしまったのか？ UIのメンテ頻度が高く…
昨年はVueコンポーネントに全然テスト書けなかったけど、今はそれなりにできるようになった。APIドキュメントやGitHubにお世話になっているが…。 でも詰まりがちなところは一杯あるので残しておく。 DOMイベントのモック UIライブラリを利用しているコンポー…
