Mirageを用いたReactコンポーネントの開発

バックエンドサービスなしでローカル開発を継続できるように、Reactコンポーネント内でAPIエンドポイントを直接モックアウトします。

ステップ1: Mirageのインストール

まず、プロジェクトにMirageを追加したことを確認してください。

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

ステップ2: ネットワークコードと並行してサーバーを作成する

コンポーネントファイル内で、MirageからServerをインポートし、サーバーを作成し、コードに必要なAPIエンドポイントのモックアウトを開始します。

// src/App.js
import React, { useState, useEffect } from "react"
import { createServer } from "miragejs"

let server = createServer()
server.get("/api/users", { users: [{ id: 1, name: "Bob" }] })

export default function App() {
  let [users, setUsers] = useState([])

  useEffect(() => {
    fetch("/api/users")
      .then((res) => res.json())
      .then((json) => {
        setUsers(json.users)
      })
  }, [])

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

これで、Reactコンポーネントの開発を継続し、Mirageを使用してバックエンドAPIエンドポイントをモックアウトできます。

ルートハンドラの記述方法の詳細については、ルートハンドラガイドをご覧ください。

モックコードを複数のコンポーネントで共有する準備はできましたか？ 開発とテスト間でサーバーを共有するに関するガイドをご覧ください。