Mock GraphQL queries with Cypress and TestCafe
Do you think mocking your GraphQL backend is always a tedious task? Fasten your seat belts, I am gonna change your mind.
Mocking is the practice of creating a fake version of a component so that you can develop and test other parts of your application independently. The strongly-typed nature of a GraphQL API lends itself extremely well to mocking. This is an important part of a GraphQL-First development process.
Mocking backends has been hard due to the traditional reason: there is no standard REST API description in machine-consumable format. But, GraphQL makes mocking easy, because every GraphQL backend comes with a static type system. The types can be shared between your backend and your frontend, and they contain all of the information necessary to make mocking incredibly fast and convenient. With GraphQL, there is no excuse to not mock your backend for development or testing.
Cypress.io and Testcafe both are exceptional next-generation E2E testing tools. Both the tools provide fluent commands to create stubs and mock HTTP requests quite easily. But, taking about GraphQL queries, things are not that straight forward.
Before we proceed further, I have created a sample graphql-mock-example repository loaded with Client app, cypress, and Testcafe examples. You will find heavy references to that repository.