CODEWITHSUNDEEP
cypressserver-side-rendering
Ivan Kleshnin
Ivan Kleshnin

Reputation: 1844

Can't intercept Cypress API call

I have stuck with Cypress fixtures. Can't intercept an XHR request with SSR and navigation routing.

cypress/integration/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+"}

I see an XHR request (type=xhr) in Dev Tools and it doesn't use the above about stub object but hits real API instead. Why? Double checked URL and method – 100% the same. Can it be that route is coupled to visit and ignores click-based routing?!

Upvotes: 0

Views: 8093

Answers (1)

Ivan Kleshnin
Ivan Kleshnin

Reputation: 1844

Rechecking this once again, I've found a solution. Let me share the details for everyone interested:

1) I use Next.js which is an excellent tool for SSR but it doesn't allow you to disable server-side rendering (yet) according to this and this issues.

2) You can use Cypress with SSR pages but, in this way, you're limited to testing real HTML. Which means you have to either couple tests to real data (not good in most cases) or stub the database itself (slow). In general, you want to stub HTTP requests.

3) Cypress can't stub fetch requests and mocking fetch with XHR-based implementation was trickier than I thought.

First you need to:

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

Then:

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

Other combinations of delete & update code lines I tried didn't yield positive results. For example, when I had window.fetch = line in the test file it didn't work and fetch.toString() gave "native code". Not sure why, no time to explore further.

Axios solves the above but I don't like to bloat my bundle with extra stuff. You can inject XHR-based fetch for tests only.

4) The most important missing piece. You need to wait for route.

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+")
})

Upvotes: 3

Related Questions