Intercepting GraphQL Requests With Cypress | by David Van Fleet | May, 2022

Writing end-to-end checks needn’t be painful

Picture by Shannon Potter on Unsplash

Constructing a collection of integration checks for our net apps generally is a ache! It may be troublesome to create a full suite of checks that completely checks our app with respectable code protection, in isolation from different providers, in a sensible browser atmosphere.

A number of the issues we might run into embrace authenticating a take a look at consumer, interacting with third-party providers, and interacting with our personal backend in a take a look at atmosphere. Cypress is among the many hottest frameworks for constructing e2e checks, and it helps us deal with many of those issues.

In my expertise, one of the crucial helpful capabilities that cypress supplies is cy.intercept(), which is used to intercept community requests and mock a response again to your app. This makes it attainable in your app to run in isolation and behave the identical as it can in manufacturing, making community requests and receiving the anticipated (albeit mocked) responses to proceed functioning and being examined. Right here’s a easy instance of the way it would possibly look in follow with a community requests to a REST API…

There’s one downside with this sample, nevertheless. The request being despatched by your app is matched utilizing the primary two arguments of cy.intercept() — the HTTP methodology getting used and the uri the request is shipped to. In case your app makes use of GraphQL, each community request will match these first two arguments, since each GraphQL request shall be a POST request to <server-uri>/graphql!

Getting round this downside requires slightly little bit of hackery. As an alternative of passing a StaticResponse object because the third argument to cy.intercept(), we’re going to move a callback operate that enables us to look slightly extra intently on the request that’s been intercepted. First, think about now we have this question for fetching workout routines, and we named the operation AllExercises

With slightly finagling in our cypress specs, we are able to accomplish the identical aim of intercepting this request and sending again a mocked response…

Notice that we nonetheless intercept each POST request to localhost:4000/graphql. However through the use of a callback operate because the third argument to cy.intercept() and inspecting the request object, we solely really do something with the requests we care about. We test that the request meets some extra particular situations than the tactic and URI (on this case, checking that the operationName of our request is "AllExercises") then use req.reply() to ship again the suitable mock response.

If the web page we’re testing makes many GraphQL requests, this system can get slightly messy. We could also be slowed down with a ton of if statements, and lots of full mock response objects in our cy.intercept() operate. That can get ugly in a rush! Right here’s a method I’ve discovered that helps me maintain my code clear and readable, whereas nonetheless dealing with the issue of intercepting many alternative gql requests that want completely different mock responses…

By mapping the mock responses to their respective operationName we are able to tremendously simplify the intercept. Granted, this received’t at all times work relying on what you’re testing, however in the event you simply want to verify your app will get the info it wants, this generally is a nice, easy strategy.

Most of us don’t get pleasure from writing e2e checks for our apps. It may be particularly painful to mock responses to a GraphQL server. Hopefully, this system of utilizing cypress’ intercept operate, and mapping mock responses to the GraphQL operation title might help make it rather less painful!

More Posts