I'm trying to write some tests with cypress and fixtures on my SSR next.js app that connects to RESTful API using Axios. But I'm having trouble intercepting the RESTful APIs using cy.intercept() because cypress can not track the requests that are sent in SSR and cy.intercept() only works on requests that cypress can track. Is there any way that can help me change the responses coming from RESTful API? any packages also would help.
Cypress with NextJS SSR - intercept RESTful API using Axios
Viewed 1286
1 Answers
cy.intercept relies on the in-browser API to capture requests. The requests you do in your SSR hooks in Next.js (such as getServerSideProps) do not happen in the browser so, respectively, cy.intercept doesn't know anything about them.
I'm biased when it comes to API mocking solutions, but I still encourage you to look into MSW once again. See the official Next.js example, which supports both browser-side and server-side request interception using the same request handlers. The README also goes into detail about the key steps necessary for both interceptions to work.
This kind of interception embeds MSW into the Next.js app. This means that you won't be able to have runtime request handlers without either restarting the runtime or exposing the worker/server instance to the testing context. This may not be an issue for you per se, so you may disregard this mention until you know it's relevant to your testing setup.
Related