Cypress 与 NextJS SSR - 使用 Axios 拦截 RESTful API

Question

我正在尝试在我的 SSR next.js 应用程序上使用 cypress 和固定装置编写一些测试，该应用程序使用 Axios 连接到 RESTful API。但我在拦截 RESTful API 时遇到了麻烦cy.intercept()，因为 cypress 无法跟踪 SSR 中发送的请求，并且cy.intercept()仅适用于 cypress 可以跟踪的请求。有什么方法可以帮助我更改来自 RESTful API 的响应吗？任何软件包也会有帮助。

Answer 1

cy.intercept依赖浏览器内的 API 来捕获请求。您在 Next.js 的 SSR 挂钩中执行的请求（例如getServerSideProps）不会在浏览器中发生，因此cy.intercept对它们一无所知。

我对 API 模拟解决方案有偏见，但我仍然鼓励您再次研究 MSW。请参阅官方 Next.js 示例，该示例使用相同的请求处理程序支持浏览器端和服务器端请求拦截。自述文件还详细介绍了两种拦截工作所需的关键步骤。

这种拦截将 MSW 嵌入 Next.js 应用程序中。worker这意味着如果不重新启动运行时或将/server实例暴露给测试上下文，您将无法拥有运行时请求处理程序。这对您本身来说可能不是问题，因此您可以忽略此提及，直到您知道它与您的测试设置相关。