Registry / testing / cypress-graphql-mock-network

cypress-graphql-mock-network

library1.0.2jsnpmunverified

Cypress plugin that adds custom commands (cy.mockNetwork, cy.mockNetworkAdd, cy.mockNetworkReset) for mocking GraphQL API responses during Cypress end-to-end tests. Current stable version 1.0.2. Wraps GraphQL Mock Network to intercept network requests and return auto-generated or custom mocks. Requires Node >=12. Differentiates by providing a simple Cypress-native API for GraphQL mocking without external fixtures, leveraging a service worker for interception. Ships TypeScript types.

testing

npm install cypress-graphql-mock-network

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · CYPRESS-GRAPHQL-MO

cypress-graphql-mock-network

testingjavascriptv1.0.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

none (side-effect import)

✓ import 'cypress-graphql-mock-network'

✗ import { cypress-graphql-mock-network } from 'cypress-graphql-mock-network'

This is a side-effect module that registers Cypress commands. Import in support file, no named exports.

cy.mockNetwork

✓ cy.mockNetwork({ schema })

✗ cy.mockNetwork(schema)

Accepts an object with schema property. Schema can be a string or an SDL object. Should be called in beforeEach.

cy.mockNetworkAdd

✓ cy.mockNetworkAdd({ Query: () => ({ ... }) })

✗ cy.mockNetworkAdd({ Query: { ... } })

Argument should be a resolver map object, not nested resolvers. Use functions returning data.

Shows setup: import plugin, read schema file, mock network in beforeEach, add custom query mock, visit page, assert content.

// cypress/support/index.ts import 'cypress-graphql-mock-network'; // cypress/integration/example.spec.ts beforeEach(() => { cy.readFile('./introspection.schema.graphql').then(schema => { cy.mockNetwork({ schema }); }); }); it('displays custom mocked data', () => { cy.mockNetworkAdd({ Query: () => ({ todos: () => ({ data: [{ id: '1', title: 'Go shopping', completed: true }] }) }) }); cy.visit('http://localhost:3000'); cy.contains('Go shopping').should('exist'); });

Debug

Known issues

gotchaService worker (mockServiceWorker.js) must be served from root of website (e.g., /mockServiceWorker.js). If served from subdirectory, mocking will not work.

fix

Copy ./mockServiceWorker.js from node_modules/cypress-graphql-mock-network/mockServiceWorker.js to server root.

affects: *

gotchacy.mockNetwork() must be called before cy.visit() in each test. If visited first, network requests will not be intercepted.

fix

Ensure cy.mockNetwork({ schema }) is called in beforeEach before cy.visit().

affects: *

deprecatedUsing an outdated introspection schema format may cause mocking failures. Schema should be in .graphql or .gql format with SDL.

fix

Export your GraphQL schema as SDL (e.g., using 'graphql-code-generator' or 'apollo') and use .graphql file.

affects: >=1.0.0

gotchamockNetworkAdd resolvers must be functions returning objects, not plain objects. Using { Query: { todos: [...] } } will not work.

fix

Wrap each resolver in a function: Query: () => ({ todos: () => [...] })

affects: *

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'schema')

cy.readFile() did not resolve properly or schema was null.

fix

Ensure the schema file path is correct relative to cypress.json. Use cy.readFile('./introspection.schema.graphql') or full path.

cy.mockNetwork is not a function

Plugin not imported or imported incorrectly.

fix

Add 'import 'cypress-graphql-mock-network'' to cypress/support/index.ts (or .js).

MockNetwork: No schema provided

cy.mockNetwork() called without schema argument or schema undefined.

fix

Call cy.mockNetwork({ schema: yourSchema }) with a valid schema string.

Service worker not found: /mockServiceWorker.js

mockServiceWorker.js not served at root.

fix

Copy mockServiceWorker.js from node_modules to the public/static folder that serves your app's root.

Upgrade

Version history

1.0.2latest on npm

Audit

Dependencies

graphql-mock-networkrequiredCore mocking library that handles schema-based mock generation and network interception

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/warrenday/cypress-graphql-mock-network ↗

packagecypress-graphql-mock-network ↗

homepagehttps://github.com/warrenday/cypress-graphql-mock-network ↗