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

J·恩克拉斯

我在Vue CLI应用程序中运行了Cypress,最近又添加了Mirage,以扩展数据库的模拟功能。我按照Mirage的快速入门指南在赛普拉斯中使用它,现在我正尝试重新编写我的登录测试。应用程序中的登录与对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中来自route()挂钩的路由未注册到服务器:

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)
        })
      })
    },
  })
}

如果我将其更改为“ development”,则main.js中的“ test”环境不会有所作为。

有什么方法可以查看在服务器运行时的任何时间向我的服务器注册了哪些路由?在规范中调试服务器时,服务器的路由属性的长度为0。我在错误的时间或地点定义了路由吗?

更新:我发现,当我按此处所述在Vue的main.js中制作服务器时,可以使用本地Web应用程序中的有效Mirage路由,而不是使用Cypress框架。因此,现在我认为路由定义很好,问题必须在赛普拉斯请求拦截的代码内。

J·恩克拉斯

我终于在Mirage不和谐频道上的Sam Selikoff的帮助下找到了解决方案。我的问题是我的API与我的应用程序在不同的端口上运行。

正如山姆(Sam)在不和中所说(我对此稍作表述):

默认情况下,this.passthrough()仅适用于当前域上的请求。Vue main.js快速入门第4步中的代码需要说明

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

代替

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用模拟路由器进行测试时出现根未定义错误

来自分类Dev

使用proxyquireify存根进行测试时,“未定义要求”

来自分类Dev

路由未定义laravel 5.2错误

来自分类Dev

Laravel 路由未定义错误

来自分类Dev

Vue未定义

来自分类Dev

测试时PHP错误中的未定义索引

来自分类Dev

Selenium测试中未定义$错误

来自分类Dev

使用Karma进行角度测试:“未定义模块”

来自分类Dev

使用未定义的“玩家”和“玩家”使用未定义的“玩家”错误

来自分类Dev

使用Mocha对带有Typescript的Jquery进行单元测试时,如何解决“未定义$”错误?

来自分类Dev

使用Karma测试时,$ rootScope未定义

来自分类Dev

Vue 插件错误 - 返回未定义

来自分类Dev

路由[登录]未定义

来自分类Dev

使用libpcsclite错误编译进行开发(未定义)

来自分类Dev

使用Jasmine对我的angularJS应用程序进行单元测试时,$ interval是未定义的

来自分类Dev

追加时出现“未定义”错误?

来自分类Dev

使用React和Redux时,状态是未定义的对象,路由器

来自分类Dev

使用g ++进行编译时“未定义的引用”

来自分类Dev

未定义的变量和mysqli错误

来自分类Dev

使用RSpec测试模型时,出现错误“ nil:NilClass的未定义方法'<'”。

来自分类Dev

使用Gulp运行业力测试时出现“模块未定义”错误

来自分类Dev

ReferenceError:未定义测试

来自分类Dev

使用Bower安装Jquery时出现“未定义”错误

来自分类Dev

使用for循环时未定义的JSON错误

来自分类Dev

错误使用爆炸时未定义的偏移量

来自分类Dev

使用 lapply 时出现未定义的列错误

来自分类Dev

名称错误:使用函数时未定义名称“x”

来自分类Dev

使用 route() 时 Laravel 刀片“未定义变量”错误

来自分类Dev

使用 Jest 和 Enzyme 测试 React 组件。错误:无法读取地图的属性未定义

Related 相关文章

  1. 1

    使用模拟路由器进行测试时出现根未定义错误

  2. 2

    使用proxyquireify存根进行测试时,“未定义要求”

  3. 3

    路由未定义laravel 5.2错误

  4. 4

    Laravel 路由未定义错误

  5. 5

    Vue未定义

  6. 6

    测试时PHP错误中的未定义索引

  7. 7

    Selenium测试中未定义$错误

  8. 8

    使用Karma进行角度测试:“未定义模块”

  9. 9

    使用未定义的“玩家”和“玩家”使用未定义的“玩家”错误

  10. 10

    使用Mocha对带有Typescript的Jquery进行单元测试时,如何解决“未定义$”错误?

  11. 11

    使用Karma测试时,$ rootScope未定义

  12. 12

    Vue 插件错误 - 返回未定义

  13. 13

    路由[登录]未定义

  14. 14

    使用libpcsclite错误编译进行开发(未定义)

  15. 15

    使用Jasmine对我的angularJS应用程序进行单元测试时,$ interval是未定义的

  16. 16

    追加时出现“未定义”错误?

  17. 17

    使用React和Redux时,状态是未定义的对象,路由器

  18. 18

    使用g ++进行编译时“未定义的引用”

  19. 19

    未定义的变量和mysqli错误

  20. 20

    使用RSpec测试模型时,出现错误“ nil:NilClass的未定义方法'<'”。

  21. 21

    使用Gulp运行业力测试时出现“模块未定义”错误

  22. 22

    ReferenceError:未定义测试

  23. 23

    使用Bower安装Jquery时出现“未定义”错误

  24. 24

    使用for循环时未定义的JSON错误

  25. 25

    错误使用爆炸时未定义的偏移量

  26. 26

    使用 lapply 时出现未定义的列错误

  27. 27

    名称错误:使用函数时未定义名称“x”

  28. 28

    使用 route() 时 Laravel 刀片“未定义变量”错误

  29. 29

    使用 Jest 和 Enzyme 测试 React 组件。错误:无法读取地图的属性未定义

热门标签

归档