mswを使ってgraphQLエンドポイントをモックした単体テストを書く | スマートショッピング
はじめにこんにちは。フロントエンド/SETエンジニアの@1010realです。 子育て中は自分の事が全て後回しになりますね。。 # 今日の朝ごはんはカップ麺 今回は、新機能の開発において、mock service workerを使ってGraphQLエンドポイントをモックした単体テストを導入したので、それについてまとめてみました。 ちなみに導入に関しては、大部分を以下の記事を参考にさせて頂きました。とても勉強になりました。 mswとgraphql codegenでGraphQLをモックし、効果的で効率的なReactのテストを書く 本記事は上記の導入に際して、細部の環境の差異、実際につまづいた点および自分が調べた点を追加した内容になっております。 目次はじめにmswについて導入手順 Typed Document Nodeを生成するmswを設定するテスト用のRender関数を用意するテストを書く
mswとgraphql codegenでGraphQLをモックし、効果的で効率的なReactのテストを書く
はじめに：テスト戦略の話 そもそもフロントエンドのテストって何をどんな粒度で書けばいいの？という疑問はよくあると思います。これについては以前Qiitaの記事: フロントエンドでTDDを実践する（理論編）で書いているので詳細は省きますが、Testing Trophyの戦略に則り、integration testを中心とし、unitテストは本当に有効なものに絞って書くというのがフロントエンドにおいては有効です。 APIモック フロントエンドのintegration testにおいて課題になるのがAPIのモックです。urqlやapollo clientのようなGraphql Clientでもqueryをモックする仕組みはありますが、どちらもclient自体をモックするような書き方になります。一見問題ないようですが、client側でキャッシュの挙動を制御したりできることもあり、本番コードと異なるコ
ジョインしたのと同時期に導入されて感動した MSW とその周辺パッケージ についてのお話 - KAKEHASHI Tech Blog
こちらの記事はカケハシ Advent Calendar 2022 の 13 日目の記事になります。 https://adventar.org/calendars/7444 こんにちは。Musubi AI 在庫管理のフロントエンド開発を担当している鳥海です。 上記プロダクトのフロントエンドチームでは、私がチームにジョインした時（2022/9/1）と同時期から MSW が導入され、開発で用いるようになりました。 今回は、この MSW （とその周辺パッケージ）がすごく便利で感激したので、簡単にご紹介したいと思います。 この記事で紹介するもの この記事では、下記項目についての説明をしていきたいと思います。 基本的に触りのみ紹介しますので、詳細についてはそれぞれのドキュメントをご確認いただけると幸いです。 MSW graphql-codegen-typescript-mock-data msw-st
GraphQL クエリ仕様: フラグメント (Fragments) とインラインフラグメント (Inline Fragments)
GraphQL フラグメントでクエリをパーツ化するフラグメントの基本GraphQL クエリの中で、同じようなフィールドの指定（選択セット）を複数回使用する場合、それを フラグメント (Fragments) という再利用可能な選択セットとして切り出して定義しておくことができます。 例えば次の GraphQL クエリは、GitHub から自分のユーザー情報 (viewer) と、特定のユーザーの情報 (user) を一度に取得しています。 GraphQL クエリ query QueryTwoUsers { viewer { login # ログインID name # ユーザー名 url # ユーザーの GitHub ホームページ websiteUrl # ユーザーの Web サイト avatarUrl # ユーザーのアバター画像 } user(login: "ログインID") { login
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
