使用Vue和Cypress进行测试时,出现Mirage未定义错误(未定义路由)

z9zf31ra  于 2023-05-29  发布在  Vue.js
关注(0)|答案(2)|浏览(196)

我在Vue CLI应用程序中运行了Cypress,最近添加了Mirage来扩展对我数据库的模拟。我遵循Mirage's quickstart tutorial在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
}

在spec文件的beforeEach钩子中,我调用server函数:

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',它不会有什么区别。
有没有方法可以查看在服务器运行时的任何时刻注册到我的服务器的路由?在我的规范中调试服务器时,服务器的routes属性的长度为0。我是否在错误的时间或地点定义了我的路线?
更新:我已经发现,当我在Vue的main.js中创建服务器时,我可以在本地Web应用程序中使用一个工作的Mirage路由,如here所描述的那样,而不是使用Cypress框架。所以现在我认为路由定义是好的,问题一定是在Cypress请求拦截的代码内部。

isr3a4wc

isr3a4wc1#

我终于找到了解决办法的帮助下,山姆Selikoff对幻影的不和谐频道。我的问题是我的API运行在与我的应用程序不同的端口上。
正如Sam在Discord上所说的那样(我稍微改了一下):
默认情况下,this.passthrough()仅适用于当前域上的请求。Vue的main.js中快速入门第4步的代码需要说明

this[method]("http://localhost:8090/*", async...

而不是

this[method]("/*", async...

我希望这对将来的人有所帮助。花了我整整一个星期。

92dk7w1h

92dk7w1h2#

最简单的方法是替换:
this.namespace = 'api'

this.urlPrefix = 'https://...'

相关问题