Cypress

Cypress is a free and open-source JavaScript testing framework for end-to-end, integration, and component testing in the browser. It also provides an easy way for mocking and stubbing network requests and responses.

You can easily integrate graphql-mocks with cypress using @graphql-mocks/network-cypress.

Installation

Install the cypress and @graphql-mocks/network-cypress npm packages.

# npm
npm install --save-dev cypress @graphql-mocks/network-cypress

# yarn
yarn add --dev cypress @graphql-mocks/network-cypress

# pnpm
pnpm add --save-dev cypress @graphql-mocks/network-cypress

Usage

import { GraphQLHandler } from 'graphql-mocks';
import { cypressHandler } from '@graphql-mocks/network-cypress';
import graphqlSchema from './graphql-schema';

const graphqlHandler = new GraphQLHandler({
  dependencies: {
    graphqlSchema,
  },
});

cy.intercept('POST', '/graphql', cypressHandler(graphqlHandler));

You can also create a custom command for mocking GraphQL requests APIs:

// in cypress/support/commands.ts

// If you're useing typescript
declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Custom command to mock GraphQL API.
       */
      mockGraphQLAPI(): Chainable<null>;
    }
  }
}

Cypress.Commands.add('mockGraphQLAPI', () => {
  // make sure to return the cy.intercept() command so that you can chain
  // other commands if needed
  return cy.intercept('POST', '/graphql', cypressHandler(graphqlHandler));
});

Resolver Context

When using the @graphql-mocks/network-cypress network handler each resolver context has a cypress property which contains the request from the cypress route handler.

function resolver(parent, args, context, info) {
  const { cypress } = context;
  // request, from the cypress route handler
  const { request } = cypress;
}