テキスト入力を行う<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が存在する。これは、テストを実行するライブラリ（テストランナー）に「こんな検証をしてほしい」と伝えてテストを実行してもらうための関数である。マッチャーの使い方を知っていると、初めて出てくる仕…