2023-08-16のJS: Next.js v13.4.16(test mode)、SafariのStorage Policy、ESMへの移行(Redux)

2023/08/16 6 users playwright Vercel JSer.info 処理

JSer.info #656 - Next.js v13.4.16がリリースされています。 Release v13.4.16 · vercel/next.js v13.4.16には、実験的な機能としてtest modeというPlaywrightとMSWを使ったテストする仕組みが追加されています。 Next.jsのApp Directoryでは、MSWがNext.jsの処理に差し込めるポイントがなかったため、MSWが動かないな... 続きを読む

Next.js: next/testmodeという概念が出現しMSW x Playwrightのテストがやりやすくなりそう

2023/08/16 16 users experimental NEXT playwright

Next.js: next/testmodeという概念が出現しMSW x Playwrightのテストがやりやすくなりそう 2023年8月15日にリリースされた Next.js v13.4.16から next/experimental/playwright next/experimental/playwright/msw が登場してテストがしやすくなりそう。というお話です！ 前提条件 今回お話するのは、Next.js の開発サー... 続きを読む

MSW を活用した WebAPI リグレッションテスト

2023/04/23 16 users リグレッションテスト WebAPI Jest モックサーバー

MSW はネットワークレベルでリクエストをインターセプトする、自動テストで便利なモックサーバーです。過去記事でも紹介したとおり、スパイ（モック関数）をネットワークレベルに忍ばせることが可能です。実際に WebAPI が呼ばれた時の Payload の検証は、Jest 組み込みのモック機能では実現できない領域です。本稿は「W... 続きを読む

tRPC と MSW の統合

2023/01/25 9 users Zod tRPC スキーマ client デス

tRPC は Next.js プロジェクトの生産性を向上させるライブラリです。サーバー側定義の型推論が API Client にダイレクトに伝搬するだけでなく、Zod スキーマによる入力値制約が施せます。そのため、Client ⇄ API Routes 間の疎通がEnd-to-end typesafeになる、便利なライブラリです。 tRPC と MSW の統合要点 筆者はテス... 続きを読む

mswjs/data で広がるテスト戦略

2022/01/20 5 users Data インメモリ 本稿 テスト戦略 単体

本稿は MSW（Mock Service Worker）エコシステムのうちの一つ mswjs/data を試してみた記事です。記事中のサンプルコードは以下で公開しています。 mswjs/data とは 仮想DB をブラウザ（インメモリ）に展開する、データモデリング・リレーションライブラリです。MSW 単体ではハードコードされたフィクスチャのみの定義と... 続きを読む

まだAPIが出来ていない？私は一向にかまわんッッ

2021/11/17 163 users API アジャイル タスク 納期 フロントエンド

初記事です。 あるフロントエンドの悩み プロジェクトの納期は決まっていて、すぐに着手しないといけない。 だけど、API はまだできていない... 早く着手したい...、ふぬぬ...。 今回はそんなフロントエンドがバックエンドのタスクの待ちにならないように、並行してアジャイルに開発していけるツールとしてmswをご紹介し... 続きを読む

あれから一年 がむしゃらに始めたはてなブログ - 40歳からのブログ SWの日常

2017/12/06 12 users SFC修行 愚痴 日常 アメブロ はてなブログ

2017 - 12 - 06 あれから一年 がむしゃらに始めたはてなブログ はてなブログへお引っ越し 私もごたぶんにもれず、一年おめでとう！というはてなブログさまからのメールが届きました。SFC修行を始めるにあたって、3年ほど続けてきたアメブロからはてなブログに移動してやみくもに1年がたったのかーとしみじみ思いました。 もともとMSW(医療ソーシャルワーカー)として働いていた私の愚痴をグチグチと連... 続きを読む