Mock Service Worker で開発用のモックAPIを作る
フロントエンドの開発時に仮の API を使いたいってシチュエーションはわりとあると思います。 そんな時に、Mock Service Worker を使うと便利だったのでまとめます。 Mock Service Worker とは？ Mock Service Worker は、ネットワークレベルで API リクエストをインターセプトして mock のデータを返すためのライブラリです。API リクエストを含む処理のテストや、開発時の mock サーバーの代替として利用出来ます。 テストでの利用については以前こちらの記事でまとめました。 今回は開発時のモック API としての利用について書きます。 開発用の API というと、JSON Serverが有名ですが、Mock Service Worker では Service Worker を使ってリクエストを返すため、別プロセスでローカルサーバーを立
Mock Service Worker
import { http, HttpResponse } from 'msw'import { setupWorker } from 'msw/browser' // Describe the network.const handlers = [ http.get('https://acme.com/product/:id', ({ params }) => { return HttpResponse.json({ id: params.id, title: 'Porcelain Mug', price: 9.99, }) }),] // Enable API mocking anywhere.const worker = setupWorker(...handlers)await worker.start() Omit implementation details Intercept
Mocking API Requests in Node tests - Jack Franklin
August 19, 2013Mocking API Requests in Node testsRecently I sat down with my Pulldown Project, aiming to rewrite the tests. The problem with them was that they were network dependent. Each test would hit the real API and download the real file. This was not good for a number of reasons: I couldn't run the tests without an internet connectionthe tests were slowthe tests were unreliable, they would
2015年が終わるのでフロントエンド開発に使ってるツールまわりをざっと書き出してみた - ミルク色の記録
題名の通り、ざっと書き出し。 このあたりのことを相談された時に、手元のリポジトリを漁って「こんな感じでやってます」とやってたけど、 とりあえずこのURL渡して参考にしてもらうみたいなことができれば... ご注意 Xubuntu 14.04でやってるのでWindowsやOSXは未確認。 こじんまりした規模の開発で使っている構成なので、規模によっては向いていないかも。 サーバとはJSONとかのAPIでお話するだけの、SPAなフロントエンド用（ルーティングはハッシュチェンジ系向け）。 おしながき 共通用 nodeの管理 JavaScriptのLint プロジェクト用 プロジェクトディレクトリの下準備 タスクランナー HTMLと開発用Webサーバ CSSや画像ファイルなどのスタイルまわり JavaScriptまわり（モジュールバンドラ） プロダクション用のビルド テスト環境 APIサーバとつなぎな
Introducing yakbak: Record and playback HTTP interactions in NodeJS | code.flickr.com
Did you know that the new Front End of www.flickr.com is one big Flickr API client? Writing a client for an existing API or service can be a lot of fun, but decoupling and testing that client can be quite tricky. There are many different approaches to taking the backing service out of the equation when it comes to writing tests for client code. Today we’ll discuss the pros and cons of some of thes
The Collaborative API Development Platform
New Release - Insomnia 8.0 is finally here with Scratch Pad, Real-Time Collaboration, Enterprise SSO, AI-Generated Testing Design, debug, and test APIs locally or in the cloudChoose Local, Cloud, or Git storage to build better APIs collaboratively with a dev-friendly UI, built-in automation, and an extensible plugin ecosystem. Get Started for Free
Kakapo.js
Getting started Kakapo its a full featured http mocking library, he allows you to entirely replicate your backend logic in simple and declaritive way directly in the browser. This way you can easily prototype and develop the whole Application without backend and just deactivate Kakapo when you go production. In order to achieve that Kakapo gives you a set of utilities like Routing, Database, Respo
MockServer
Easy mocking of any system you integrate with via HTTP or HTTPS Getting Started To get started see the guide for mocking or proxying or the code examples. What is MockServer For any system you integrate with via HTTP or HTTPS MockServer can be used as: a mock configured to return specific responses for different requests a proxy recording and optionally modifying requests and responses both a prox
Node.js製のプロキシHoxyを使い、任意のURLでlocalhostにアクセスする - Qiita
フロントエンド開発をする際、Browsersyncなどを使ってlocalhostサーバを立てることは多いかと思います。この記事は、サーバ側のAPIやCookieの都合から、本番環境のURLでそのローカルサーバにアクセスしたくなったとき向けのTipsです。 やり方はいくつもありそうですが、ここではHoxyというNode.js上で動作するプロキシサーバを、gulpと連携させて使う方法を紹介します。 Node製のプロキシを選んだのは、外部ツールのインストールや、hostsの書き換えをせずにサクッと環境構築できるようにするためです。 実現すること ブラウザでhttp://example.com/（任意のURL）にアクセスすると、ローカルのコンテンツが表示される 開発中はlivereloadなどBrowsersyncの各種機能が利用できる npm install && gulpだけで環境を共有できる
RESTful API Proxy サーバーを Brunch で使う - Qiita
SPA な開発をしていると、RESTful API 用の Proxy が欲しくなります。でも、そのために Apache 入れたり nginx 入れるのはちょっと違うよなと思っていて、Brunch 使っている人向けの情報です。 Brunch でローカルサーバーをカスタマイズ brunch-config.coffee でサーバーを指定すればよろしい。 exports.config = # See http://brunch.io/#documentation for docs. files: javascripts: joinTo: 'javascripts/app.js': /^app/ 'javascripts/vendor.js': /^(?!app)/ stylesheets: joinTo: 'stylesheets/app.css' templates: joinTo: 'java
ServiceWorker を使った XHR のモックテスト - Block Rockin’ Codes
Intro 似た話は既出なのでご提案にはならないけど、PoC として一応ライブラリっぽくしてみた。 タイトルの通り XHR のリクエストに対して、任意のレスポンスを返すことによって、 再現の面倒なエラー処理などのテストを、 Local Proxy 無しで実現する方法のメモ。 というか、これ自体がブラウザ上の JS だけで完結する Local Proxy と言えるかもしれません。 ざざっと書いただけなので、API というか使い方もまだ適当というかどうしようか考えてるところです。 今これが使えるブラウザ自体がそんなにないので、 SW の実装が普及するまでにもう少しまともにしておきます。 Jxck/response-injection · GitHub 色々踏んだので、 Service Worker 使う際の参考になればと。 モチベーション Service Worker(SW) には色々な機能が
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
easygraphql.com
GitHub - Raathigesh/atmo: :heavy_check_mark: Mock data for your prototypes and demos. Remote deployments to Zeit now.
GitHub - yosuke-furukawa/stubcell: Stubcell is simple stub module
How to detect API modifications when mocking e2e tests?
GitHub - topheman/react-es6-redux: A simple app to try React, ES6 and redux, using topheman-apis-proxy as data api backend
Unit Testing a Redux App | Codementor
GitHub - flickr/yakbak: Record and playback HTTP responses
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい！
GitHub - nock/nock: HTTP server mocking and expectations library for Node.js