React Testing Library

こんにちは。DIGGLE エンジニアの伊藤です。 ソフトウェアテスト Advent Calendar 2022の 20 日目の記事です。 Advent Calendar 初参加になります。 普段はフロントエンドを中心に業務を行なっています。 今回は DIGGLE で実施されているフロントエンドの単体テスト、 特にコンポーネントのテストで使っているフレームワークの使い勝手を向上させたお話をさせていただきます。 はじめに DIGGLE ではフロントエンドで React を使っており、 テストフレームワークとして下記を利用しています。 Jest (https://jestjs.io/ja/) Rea…

引き続き React Query の話。 ある関数コンポーネントが useQuery によって取得される外部データに依存している場合に、そのuseQueryで取得される外部データをダミーに置き換えて、コンポーネントテストを書く方法。 なかなかまとまった情報が見つからなかったので記録しておく。 テストには Jest & React Testing Library を使用。

React Testing Library で React Select をどうやってテストするんだってのはFAQらしく、Stack Overflowではサードパーティの部品までテストすんなMock使えというのがベストアンサーだったりして、まあそうかもねと思いつつも、ほじくってテスト書いたのでメモ。 React Select ではドロップダウンが閉じた状態ではoption要素がDOMに存在しないので、わざわざ↓キー入力してドロップダウンを開いてからクエリをかけるようなことをやりました。