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コンポーネントテスト、書けると複雑なコンポーネントのバグを防ぐ効果があると思っている。 しかし、慣れるまではテストケースの組み立て方法すらわからず苦戦する印象がある。 苦戦するだけならいいが、うまくいかず挫折するともったいない。組み立て方…

背景 React Testing Libraryでテストを書くとき、たまに<span>や<div>などrole属性が設定されていないタグを取得したい場面がある。Testing Libraryのクエリはアクセシビリティを意識したものになっているため、<div>のようにrole属性がないタグをそのまま取得する手段は少な</div></div></span>…

JSON形式の翻訳ファイルをアルファベット順にソートしたいを書いたとき、Prettierのプラグインを使う手段を調べていた。そのとき、「pluginsを使うのはいいけど、翻訳ファイルだけソートできないものか」と感じた。 Prettierの設定にConfiguration Overrides…

国際化対応のつらみポイント prettier-plugin-sort-jsonを使う 方法 所感 参考URL sort-package.jsonでソートする 方法 所感 参考URL Node.jsのAPIを使ってJavaScriptでソートする 所感 参考URL まとめ 国際化対応のつらみポイント 自分の関わっているプロダ…

9月頭に例の病1にかかってしまい、1週間程度寝込んでしまった。 2・3週間近くコーディングなどの技術的なことから離れてしまう羽目になり2、その間にすっかり何もできなくなってしまった。 これはいけないとリハビリをすることにした。以前からChatGPT Plus…

最近Visual Studio CodeのDev Containerを使って開発している。 使い始めのときgit commitを試みたところ、「Waiting for your editor to close the file... 」と出てきて焦ったため解消法をメモしておく。 エラー内容 devcontainer.json 解消法 Vimを使いた…

事情があって[^1]本格的にReactをやることになった。今まではVue2.xで開発していた。 慣れてしまう前に印象を書き残しておくことにする。 前提は↓の記事と同じ。 rimarimadan.hatenablog.com 所感 「State自体がわからない」ところから始めるならVue（Option…

事情があって1本格的にReactをやることになった。今まではVue2.xで開発していた。 慣れてしまう前に印象を書き残しておくことにする。 前提 要件的にSPAで作りたい。 初期ローディング後は高速に操作させたい ページ遷移のたびに最新のデータを取得してレン…

最近仕事でReact.jsを触る機会が増えた。今まではVue.jsを書いていたため「Vueのv-ifにあたるものはReact.jsでどう書くんだろう…」のような疑問があれこれ湧いてくる。そのようなとき、話題のChatGPTを使うとはかどるなと思った。 たとえば「React.jsでProps…

※ここでの初心者とはこのようなイメージです 一人で仕事をするには心許ない 基礎構文（if forなど）はできる Objectや配列の処理は心許ない 静的型付け言語は経験がない モブプログラミング形式の勉強会、参加者が自力でテストを書けるようになったため、Typ…