Не удается перехватить вызов Cypress API - PullRequest
Новая
       11

Не удается перехватить вызов Cypress API

0 голосов
/ 31 января 2019

Я застрял с приборами Cypress.Не удается перехватить запрос XHR с помощью SSR и навигационной маршрутизации.

cypress /gration / page.js: 

const fetch = require("unfetch")

describe("/about", () => {
  beforeEach(() => {
    cy.visit("/", { // Visit home page to trigger SSR
      onBeforeLoad (win) {
        win.fetch = fetch // replace fetch with xhr implementation
      },
    })
  })

  it("Has a correct title", () => {
    cy.server()
    cy.fixture("about").then(about => { 
      // about object is correct here, like {title: "About+"}
      cy.route("GET", "http://localhost:8080/api/documents/url", about) // Not sure where .route should be
      cy.get(".main > :nth-child(1) > a").click() // Navigate to the /about page
      cy.route("GET", "http://localhost:8080/api/documents/url", about) // Tried both ways
      // This hits my server API without stubbing, getting {title: "About"}
      cy.title().should("eq", "About+") // About != About+
    })
  })
})

cypress / fixtures / about.json: 

{"title": "About+"}

Я вижу XHR-запрос (type = xhr) в Dev Tools, и он не использует вышеуказанный объект-заглушку about, а вместо этого использует реальный API.Зачем?Дважды проверил URL и метод - 100% то же самое.Может ли быть так, что route связан с visit и игнорирует маршрутизацию на основе кликов?!

1 Ответ

0 голосов
/ 01 февраля 2019

Еще раз проверив это, я нашел решение.Позвольте мне поделиться подробностями для всех заинтересованных:

1) Я использую Next.js , который является отличным инструментом для SSR, но не позволяет вам отключитьрендеринг на стороне сервера (пока) в соответствии с , и , * выпусками.

2) Вы можете использовать Cypress со страницами SSR, но, таким образом, выограничено тестированием реального HTML.Это означает, что вам нужно либо связать тесты с реальными данными (в большинстве случаев не очень хорошо), либо поставить заглушку на саму базу данных (медленно).В общем, вы хотите заблокировать HTTP-запросы.

3) Cypress не может заблокировать fetch запросов, и насмешка fetch с реализацией на основе XHR оказалась хитрее, чем я думал.

Сначала необходимо: 

// cypress/integration/your-test.js
Cypress.on('window:before:load', (win) => {
  delete win.fetch
})

Затем: 

// pages/your-page.js
Entry.getInitialProps = async function() {
  window.fetch = require("unfetch").default
  ...
}

Другие комбинации удаления и обновления строк кода, которые я пробовал, не дали положительных результатов.Например, когда в тестовом файле была строка window.fetch =, она не работала, а fetch.toString() давало "native code".Не знаю почему, нет времени на дальнейшие исследования.

Аксиос решает все вышеперечисленное, но я не люблю наполнять свой пакет дополнительными вещами.Вы можете вводить fetch на основе XHR только для испытаний.

4) Самый важный недостающий элемент.Вам нужно дождаться маршрута. 

it("Has a correct title", () => {
  cy.visit("/")
  cy.server()
  cy.route("GET", "http://localhost:8080/api/documents/url/about", {title: "About+"}).as("about")
  cy.get("[href='/about']").click()
  cy.wait("@about") // !!!
  cy.get("h1").contains("About+")
})
...