如何在Cypress中Stub Next.js getServerSideProps发起的GraphQL查询？

cy.intercept默认只能拦截浏览器端发起的网络请求，而getServerSideProps运行在Next.js的Node.js服务侧，它发出的GraphQL请求属于服务端直接调用，没有经过浏览器网络层，所以无法被直接拦截。以下是三种可落地的实现方案：

方案1：代理服务端请求到Cypress监听端口 #

该方案可以完整覆盖getServerSideProps的请求逻辑，适合需要测试服务端参数拼接、鉴权等逻辑的场景：

• 首先在你的Next.js项目中，给服务端GraphQL客户端配置可通过环境变量切换的请求地址，例如变量名设为GRAPHQL_API_URL
• 启动测试用的Next服务时，将该环境变量值设置为Cypress服务可监听的地址，示例启动命令：

GRAPHQL_API_URL=http://localhost:3000/__cypress_mock_graphql npm run dev

• 在Cypress测试代码中拦截对应路径的GraphQL请求，返回自定义Stub数据：

cy.intercept('POST', '/__cypress_mock_graphql', (req) => {
  if (req.body.operationName === '你的查询名') {
    req.reply({
      data: {
        // 自定义Mock返回数据
      }
    })
  }
})

方案2：直接拦截Next.js页面数据接口（最轻量） #

如果你不需要验证getServerSideProps内部的请求逻辑，只需要验证页面收到Props后的渲染行为，可以直接拦截Next.js自动生成的页面数据接口，跳过真实接口调用：

• Next.js SSR页面对应的数据接口格式为/_next/data/[构建ID]/[页面路径].json，可以用通配符匹配构建ID
• 测试代码示例：

// 以/pages/posts.js页面为例
cy.intercept('GET', '/_next/data/*/posts.json', {
  props: {
    posts: [
      // 自定义Mock Props数据
    ]
  }
})
cy.visit('/posts')

提示：该方案在开发环境、生产构建后的测试环境都可以正常使用，不需要修改Next.js业务代码。

方案3：服务端预埋Mock钩子 #

如果需要更灵活的服务端数据控制，可以在业务代码中加测试专用的Mock逻辑：

• 在getServerSideProps中加入判断，当运行在测试环境时，优先读取本地临时文件或请求头中的Mock配置返回数据
• 在Cypress中通过cy.task写入指定的Mock数据到临时文件，触发服务端返回自定义内容

内容的提问来源于stack exchange，提问作者Giovanni