MSW(Mock Server Worker)
- RestとGraphQL両方に対応している。
- Service Workerがブラウザリクエストをインターセプトして、任意のレスポンスを返せる。
- SSR/CSRの両方に対応している。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { render, screen, cleanup } from "@testing-library/react"; import { rest } from "msw"; import { setupServer } from "msw/node"; const server = setupServer( rest.get("APIのエンドポイントのURL", (req, res, ctx) => { return res(ctx.status(200), ctx.json({ name:"太郎" })); }) ); beforeAll(() => server.listen()); afterEach(() => { server.resetHandlers(); cleanup(); }); afterAll(() => server.close()); |
JSON Server
- jsonファイルから実際のHTTPサーバーを構築する。
- GraphQLはサポートしない。
インストール
|
1 |
yarn add json-server --dev |
jsonを用意
これがモックサーバーから返されるリソースになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "json": [ { "id": "1", "name": "返す値1" }, { "id": "2", "name": "返す値2" } ] } |
設定
package.jsonに以下の記述をします。3001にしているのは例えば、reactであれば起動ポートが3000なので1増やした3001としています。
|
1 2 3 4 5 6 7 |
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "server": "json-server -p3001 db.json" ★ }, |
起動
下記コマンドで起動します。
|
1 |
yarn server |
以下URLを叩けば設定したJSONが返ります。
|
1 |
http://localhost:3001/json |
Nock
- Node.jsのみサポート
- GraphQLはサポートしない。
この記事へのコメントはありません。