我将Cypress集成到Vue CLI应用程序中,并最近添加了Mirage以扩展对数据库的模拟。我按照Mirage的快速入门教程来在Cypress中使用它,现在我正在尝试重新编写我的登录测试。该应用程序中的登录使用POST请求发送到API端点/oauth/token,但在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钩子中,我调用了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 中,即使我将环境更改为“development”,也不会影响“test”环境。
有没有办法在服务器运行时的任何时候查看已注册到服务器的路由?当在我的规范中调试服务器时,服务器的路由属性长度为0。我是在错误的时间或位置定义了路由吗?
更新:我已经发现,当我在Vue的main.js中创建服务器(如这里所述)而不是使用Cypress框架时,可以在本地Web应用程序中使用有效的Mirage路由。因此,我认为路由定义是正确的,问题必须存在于Cypress的请求拦截代码中。