統合テストとユニットテスト

Mirageはもともと受け入れテスト用に設計されましたが、統合テストやユニットテストを書く際にも非常に役立ちます。

グローバルサーバーの再利用

データフェッチングコンポーネントがあり、その動作を確認するテストを作成するとします。

前のガイドで説明したstartMirageの慣例を利用して、アプリケーションテストで行うように、グローバルサーバーの定義に対してコンポーネントをテストできます。

// UserTable.test.js
import UserTable from "./UserTable"
import { startMirage } from "./mirage"

let server

beforeEach(() => {
  server = startMirage()
})

afterEach(() => {
  server.shutdown()
})

it("fetches the list of countries", async () => {
  server.createList("user", 5)

  const { getByTestId } = render(<UserTable />)

  await waitForElement(() => getByTestId("users"))

  expect(getByTestId("user-row")).toHaveLength(5)
})

使い捨てサーバーの作成

また、コンポーネントのテストだけを目的とした新しい使い捨てMirageサーバーを作成することもできます。これは、コンポーネントライブラリや再利用可能なデータフェッチングコンポーネント、さらにはデータフェッチングフックのテストに役立ちます。

// useQuery.test.js
import { createServer, Model } from "miragejs"
import React from "react"
import { useQuery } from "./useQuery"

function Movies() {
  const { data } = useQuery("get", "/api/movies")

  return (
    <>
      <h1>Movies</h1>
      {data.movies.map((movie) => (
        <p key={movie.id} data-testid="movie">
          {movie.title}
        </p>
      ))}
    </>
  )
}

let server

beforeEach(() => {
  server = createServer({
    environment: "test",
    models: {
      movie: Model,
    },
    routes() {
      this.namespace = "api"

      this.resource("movie")
    },
  })
})

afterEach(() => {
  server.shutdown()
})

it("can fetch data", async () => {
  server.createList("movie", 5)

  const { getByTestId } = render(<Movies />)

  await findByText("Movies")

  expect(getAllByTestId("movie")).toHaveLength(5)
})

これで、単一のコンポーネントからアプリケーション全体まで、ネットワークに依存するあらゆるものをテストする方法がわかりました。

次に、Mirageモックサーバーに対してアサートする一般的な方法について説明します。

アプリケーションテスト

アサーション