Intercepting server-side requests for SSR (global-agent proxy via Cypress network stubbing?)

[jessezhang91]

Hi! I haven't seen much information on how to use Cypress for writing functional tests for SSR applications and wanted to see if what I've done seems reasonable.

For context, I'm using the new Qwik framework and wanted to add tests where I mock out the API responses. I want Qwik to use the cy.intercept as part of the server-side rendering step rather than making any real API calls.

After digging into Cypress network stubbing a little bit, I tested to see if I could just proxy the server node-fetch calls (via global-agent) to the Cypress server and it surprisingly all worked!

I'm running the Qwik server with:
GLOBAL_AGENT_HTTP_PROXY=http://localhost:12345 NODE_TLS_REJECT_UNAUTHORIZED=0 node -r 'global-agent/bootstrap' server/entry.express
where 12345 is the fixed port the Cypress server will bind to (defined in cypress.config.ts).

And if I set up the interceptors before visiting the page, like this:

cy.intercept('/api/path', { fixture: 'fixture.json' });
cy.visit('/page');

the Qwik server does end up receiving the fixture in its node-fetch calls!

With this all said and done though, I wanted to see if anyone else has tried something like this before and/or if there are any better approaches here.

[skoenfaelt]

I have a similar issue too in nuxt.
In the middleware, we make an API request which should receive a simple 200 Status. Sadly I did not find a way with cypress to intercept this API call, which is a big issue since everything else matters about that API call.

[skoenfaelt]

What about just starting a small express server instead?

My Nuxt Middleware

export default function ({
  app: { i18n, localePath },
  $axios,
  store,
  redirect,
}) {
  return $axios
    .get('api/qsd-utility/is-alive')
    .then(() => {
      if (!store.getters.getServerConnection) {
        store.commit('setServerConnection', true)
        store.commit('setConnectionErrorDialog', { visible: false, text: '' })
      }
    })
    .catch(() => {
      if (store.getters.getServerConnection) {
        store.commit('setServerConnection', false)
        store.commit('setConnectionErrorDialog', {
          visible: true,
          text: i18n.t('error.networkError'),
        })

        redirect(localePath('/utility/maintenance'))
      }
    })
}

So in order to make cypress tests work, I need to mock that backend api request, if I won't work with the correct backend.

After many hours of searching, I just think of, what about a simple express server, which "mocks" the request

const express = require('express')
const cors = require('cors')
const app = express()
const port = 44333

app.use(
  cors({
    origin: '*',
  })
)
app.get('/api/qsd-utility/is-alive', (req, res) => {
  res.sendStatus(200)
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Keep in mind, the express server should have the same URL as the server or configure your app to use it via env...

downside is, you need to start your fe, express server and cypress; but i think that express start should not be any problem