はじめに

Mirage は、フロントエンド開発者がバックエンド API をモックアウトできる JavaScript ライブラリです。

他のモックライブラリとは異なり、Mirage では、通常は実際の運用サーバーを使用する場合にのみ可能な、動的なシナリオを簡単に再現できます。

ほぼすべての JavaScript アプリは HTTP API と対話します。開発中に動的なサーバーデータで作業する必要がある時点に達すると、いくつかの選択肢があります。

実際のバックエンドのローカルまたはホストされたバージョンへのプロキシ。 既に API がある場合はこれでうまくいく可能性がありますが、多くの場合 API はありません。たとえあったとしても、多くの場合、ライブ API にあるものとは異なるサーバー状態を操作したいと思うでしょう。
アプリのネットワークリクエストをコメントアウトして、ダミーデータに置き換えます。 これは最速のオプションですが、既に多くのアプリケーションコードを記述した後に、ネットワークの問題に対処することを強制されます。
クライアントサイドインターセプターを使用して、アプリのネットワークリクエストを処理します。 一部の HTTP クライアントにはモックアダプターが付属しています（例：axios-mock-adapter は axios で行われたリクエストをモックするために使用できます）、また、Pretender のようなスタンドアロンツールを使用して、ブラウザでアプリのネットワークリクエストをインターセプトすることもできます。これは最も柔軟なアプローチですが、各プロジェクトでゼロから始める必要があるため、アプリ全体で規則を強制するのはあなた次第です。

Mirage はこれらの問題を解決するために構築されました。クライアントで実行される偽のサーバーであり、開発とテストの両方で使用でき、すぐに使い始めるのに十分な規則をもたらします。

動作原理

Mirage はブラウザで実行されます。JavaScript アプリが行う XMLHttpRequest または fetch リクエストをインターセプトし、レスポンスをモックできます。つまり、実際のサーバーと通信しているかのように、アプリを開発およびテストできます。

この React コンポーネントで作業しているとしましょう

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

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

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

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

シンプルな Mirage ルートハンドラを使用して、/api/users へのネットワークリクエストを処理します。

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

createServer({
  routes() {
    this.get("/api/users", () => [
      { id: "1", name: "Luke" },
      { id: "2", name: "Leia" },
      { id: "3", name: "Anakin" },
    ])
  },
})

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

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

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

重要なのは、Mirage はアプリがネットワークリクエストを行うために使用する JavaScript コードではなく、HTTP の境界をモックするため、アプリが Mirage と通信しているか、実際の運用バックエンドと通信しているかを考慮して UI コードを変更する必要がないことです。

HTTP リクエストのインターセプトに加えて、Mirage はモックデータベースとヘルパー関数を提供し、動的なバックエンドサービスを簡単にシミュレートできます。

Mirage は、典型的なサーバーサイドフレームワークの概念を借用しています。例えば、

ルート は HTTP リクエストを処理し、
データベース と モデル はデータを保存し、リレーションシップを定義し、
ファクトリ と フィクスチャ はデータをスタブし、
シリアライザ は HTTP レスポンスをフォーマットします。

これらを使用して、モックサーバーを迅速に設定できます。

インストール