vue.js - Vue および Cypress でのテスト時の Mirage 未定義エラー (ルートが定義されていません)

Question

Cypress を Vue CLI アプリで実行しており、最近 Mirage を追加してデータベースのモックを拡張しました。Mirage のクイックスタート チュートリアルに従ってCypress で使用しましたが、現在、ログイン テストを書き直そうとしています。アプリケーションでのログインは、API エンドポイント /oauth/token への POST 要求で機能しますが、Cypress/Mirage では失敗して失敗します

"Mirage: Your app tried to POST 'http://localhost:8090/oauth/token', but there was no route defined to handle this request. Define a route for this endpoint in your routes() config. Did you forget to define a namespace?"

server.js の routes() フックからのルートがサーバーに登録されていないようです。

import { Server, Model } from 'miragejs'

export function makeServer({ environment = 'development' } = {}) {
  let server = new Server({
    environment,

    models: {
      user: Model,
    },

    seeds(server) {
      server.create("user", { name: "Bob" })
      server.create("user", { name: "Alice" })
    },

    routes() {
      this.urlPrefix = 'http://localhost:8090'
      this.namespace = ''

      /* Login */
      this.post("/oauth/token", () => {
        return { 'access_token': 'abcd123456789', 'token_type': 'bearer', 'refresh_token': 'efgh123456789'}
      })
    }
  })

  return server
}

仕様ファイルの beforeEach フックで、サーバー関数を呼び出します。

import { makeServer } from '../../src/server'

let server

beforeEach(() => {
  server = makeServer({ environment: 'development' })
})

また、チュートリアルのように、このブロックを cypress/support/index.js に追加しました。

Cypress.on("window:before:load", (win) => {
  win.handleFromCypress = function (request) {
    return fetch(request.url, {
      method: request.method,
      headers: request.requestHeaders,
      body: request.requestBody,
    }).then((res) => {
      let content =
        res.headers.map["content-type"] === "application/json"
          ? res.json()
          : res.text()
      return new Promise((resolve) => {
        content.then((body) => resolve([res.status, res.headers, body]))
      })
    })
  }
})

そして、このブロックを Vue の main.js に追加しました。

import { Server, Response } from "miragejs"

if (window.Cypress) {
  new Server({
    environment: "test",
    routes() {
      let methods = ["get", "put", "patch", "post", "delete"]
      methods.forEach((method) => {
        this[method]("/*", async (schema, request) => {
          let [status, headers, body] = await window.handleFromCypress(request)
          return new Response(status, headers, body)
        })
      })
    },
  })
}

main.js の環境「test」は、「development」に変更しても違いはありません。

サーバーランタイムの任意の時点で、どのルートがサーバーに登録されているかを確認する方法はありますか? 私の仕様でサーバーをデバッグすると、サーバーのルート属性の長さが 0 になります。間違った時間または場所でルートを定義しましたか?

更新: Cypress フレームワークを使用する代わりに、ここで説明されているように Vue の main.js でサーバーを作成すると、ローカル Web アプリで動作する Mirage ルートを使用できることがわかりました。したがって、ルート定義は問題なく、問題はサイプレスのリクエストインターセプトのコード内にあるに違いないと思います。