MSW を活用した WebAPI リグレッションテスト
MSW はネットワークレベルでリクエストをインターセプトする、自動テストで便利なモックサーバーです。過去記事でも紹介したとおり、スパイ（モック関数）をネットワークレベルに忍ばせることが可能です。実際に WebAPI が呼ばれた時の Payload の検証は、Jest 組み込みのモック機能では実現できない領域です。本稿は「WebAPI リグレッションテスト」を実施するための、MSW 活用方法を解説します。記事で使用しているサンプルコードはこちら。 課題の概要 Web アプリケーションページのほとんどは「1.UI を表示し／2.入力操作し／3.WebAPI 通信し／4.通信後処理を行う」という一連処理が責務です。このようなページに書かれるテストは、WebAPI 通信前後に集中しがちです。MSW を使用すると、以下の図の様に「送信後処理」まで到達可能なため、例えば「WebAPI レスポンスが返っ
Next.jsを使ってCloud FunctionsとFirebase HostingでSSRする - Qiita
Next.js 9を使ってCloud FunctionsとFirebase HostingでSSRする 皆さんこんにちは、noriです。 FirebaseSummitのレジストレーションがオープンしましたね。僕は今年も参加しますよ！! 今年はスペインの開催ですねー 楽しみ。 最近フロントの環境設定をする機会があったので、登場したばかりのNext.js 9をCloud Functionsにのせてみました。 Cloud Functionsにのせるところまでは、すぐだったんですがReactの扱いが初めてだった僕にとってつまりどころがあったので、同じことをしようとしている人たちのためにこの記事を書くことにしました。 先にサンプルコードを置いておきます。 Firebase HostingとしてNext.jsを動かす まず今回やったことを図として示します。 ポイントは以下の2つです。 Next.jsを
データ取得ライブラリを SPA に導入するとなぜ嬉しいのか
TL;DR TanStack Query や SWR のようなデータ取得ライブラリは、難しいとされる Server State 管理を簡単にします。ユーザビリティやコンポーネント設計の品質も向上させます。導入する際にはいくつか注意する点があります。 （かなり長くなってしまったため、目次や目に留まった箇所だけ読むのも良いかと思います） スコープ この記事は Client Side Rendering(CSR) の SPA を対象とします。筆者（の業務）の関心や要求が少ないため、SSR や ISR はこの記事の議論では対象にしません[1]。読み込みパフォーマンスについても要求は控えめです。 利点や議論は特定の UI ライブラリ・フレームワークに限りませんが、筆者が慣れている React を使って説明します。 予備知識 React の State について この記事では、React の Stat
React メジャーなパッケージを使った開発とテストのチュートリアル
有名どころのReact Query、React Hook Form、Redux Toolkitを使ってシンプルなアプリを作る。 APIへのリクエストに関する状態管理をReact Queryで、フォームの入力状態の管理をReact Hook Formで、アプリの状態管理(ユーザーのログイン状態など)をRedux Toolkitで行う。APIクライアントにはaxiosを使用する。また、テストではReact Testing LibraryとMSW(Mock Service Worker)を使用する。 react18.2、react-query3.39、react-redux8.0で検証 ログイン画面とユーザーの一覧を表示する画面の２つをもつアプリを作る。また、ユーザー一覧はログインしていること、ログイン画面はログインしていないことという条件の表示制御をもうける。 プロジェクトの作成 create
React Hooksでデータを取得する方法 - Qiita
Robin Wieruch氏によるHow to fetch data with React Hooks?を著者の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://www.robinwieruch.de/react-hooks-fetch-data/ このチュートリアルでは、ステートフックと副作用フックでデータを取得する方法を解説します。テック系の人気記事を取得するためによく使われるHacker News APIを利用します。また、アプリケーション内の任意の場所で再利用したり、スタンドアロンのnodeパッケージとしてnpmに公開したりできるデータ取得用のカスタムフックも実装します。 React のこの新機能が初見であれば、まずReact Hooks入門に目を通してください。完成したプロジェクトでReact Hoos でのデータ取得事例
React + Redux + WP REST API + SSRで爆速ブログを作ったので事例として紹介します
WordPress 4.7では、これまでプラグインとして提供されていたWP REST APIが機能として組み込まれ、標準でREST APIが使えるようになりました。このことにより予想されることは、PHP以外のプラットフォームで、WordPressのブログテーマやWordPressの機能を使ったサービスが今後どんどん生まれてくると言うことです。 ちょうど自分の扱っている新規事業の企画でブログメディアを作ることになりました。新しいメディアを運営する上で、技術的にも注目されるようなものを作りたいと思ったので、今回このWordPressのREST APIを使って、React + Reduxベースでブログを作ることにしました。爆速なブログができあがったので事例として紹介させてください。 LifeGadget（ライフガジェット）人々の日常生活に役立つ情報（ライフハック術、ガジェット、アプリ、サービスな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
