React NativeでMirageを使ってAPIリクエストをモックする

バックエンドサービスなしでアプリを開発できるように、React NativeアプリのAPIリクエストをモックします。

これは、Mirageに慣れている人向けのクイックスタートガイドです。Mirageを初めて使用する場合は、概要をご覧ください。

ステップ1：Mirageをインストールする

まず、Mirageがインストールされていることを確認してください。

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

ステップ2：ネットワーキングコードと一緒にサーバーを作成する

App.jsの先頭で、MirageからServerをインポートし、サーバーを作成し、コードが必要とするAPIエンドポイントのモックを開始します。

import React from "react"
import { Text, View } from "react-native"
import { createServer } from "miragejs"

if (window.server) {
  server.shutdown()
}

window.server = createServer({
  routes() {
    this.get("/api/movies", () => {
      return {
        movies: [
          { id: 1, name: "Inception", year: 2010 },
          { id: 2, name: "Interstellar", year: 2014 },
          { id: 3, name: "Dunkirk", year: 2017 },
        ],
      }
    })
  },
})

export default function App() {
  let [movies, setMovies] = React.useState([])

  React.useEffect(() => {
    fetch("/api/movies")
      .then((res) => res.json())
      .then((json) => setMovies(json.movies))
  }, [])

  return (
    <View>
      {movies.map((movie) => (
        <Text key={movie.id}>
          {movie.name} ({movie.year})
        </Text>
      ))}
    </View>
  )
}

createServer()を呼び出す前に、既にサーバーが存在するかどうかを確認し、存在する場合はシャットダウンすることに注意してください。これは、React Nativeのホットモジュールリロードによって複数のサーバーが同時に存在しないようにするために必要です。

これで、アプリがAPIリクエストを行うたびに、Mirageがそれをインターセプトして応答します。

これで、MirageでAPIエンドポイントをモックしながら、React Nativeアプリの開発を続ける準備ができました。

React Native Testing Library