Mirage неопределенная ошибка (маршрут не определен) при тестировании с Vue и Cypress - PullRequest
Новая
       24

Mirage неопределенная ошибка (маршрут не определен) при тестировании с Vue и Cypress

1 голос
/ 07 апреля 2020

Cypress запущен в CLI-приложении Vue и недавно добавил 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?"

Кажется, что маршруты из маршрутов () перехватывают сервер . js не зарегистрированы на сервере: 

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 файла spe c я вызываю функцию сервера: 

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 основной. 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)
        })
      })
    },
  })
}

Среда 'test' в main. js не имеет значения, если я изменю ее на 'development'.

Есть ли способ узнать, какие маршруты зарегистрированы на моем сервере в любой точке сервера во время выполнения? При отладке сервера в моем spe c атрибут маршрутов сервера имеет длину 0. Я определил свои маршруты в неправильное время или место?

ОБНОВЛЕНИЕ: Я понял, что могу используйте работающий маршрут Mirage в моем локальном веб-приложении, когда я делаю сервер в главном Vue. js, как описано здесь , вместо использования платформы Cypress. Так что теперь я думаю, что определение маршрута в порядке, и проблема должна быть внутри кода для перехвата запроса Cypress.

1 Ответ

1 голос
/ 10 апреля 2020

Я наконец нашел решение с помощью Сэма Селикоффа на канале разногласий Миража. Моя проблема заключалась в том, что мой API работает на порте, отличном от моего приложения.

Как сказал Сэм на разногласиях (я немного перефразировал):

По умолчанию this.passthrough() только работает для запросов на текущий домен. Код из шага 4 быстрого запуска в Vue основной. js нужно сказать 

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

вместо 

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

Надеюсь, это поможет кто-то в будущем. Это стоило мне целую неделю.

...