{
  "id": 13162525,
  "title": "Test REST and GraphQL Contracts Beside Your UI with cy.request()",
  "url": "https://urgent.news/2026/10/09/test-rest-and-graphql-contracts-beside-your-ui-with-cy-request",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-09T17:06:33.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/raju_dandigam/test-rest-and-graphql-contracts-beside-your-ui-with-cyrequest-51kh"
  },
  "original_language": "en",
  "account": "API contract issues frequently manifest as ambiguous UI problems: the React component might be incorrect, or the API could have renamed \"total\" to \"amount.\" GraphQL responses can return HTTP 200 status but contain errors in the body. Cypress allows running REST and GraphQL tests via `cy.request()` within the same specifications, configuration, and CI job as the UI tests.\n\nWhen testing a REST endpoint like `GET /api/cart`, ensure the response contains the fields needed by the checkout process and adheres to domain constraints. Use assertions to verify the status code (200), presence of required keys (id, items, subtotal, tax, total, currency), the total being a number and non-negative, the currency being one of USD, EUR, or GBP, and each item in the body including sku, quantity, and unitPrice.\n\nFor expected error responses, disable Cypress's default status-code failure and assert the API's error contract. For instance, when making a POST request to `/api/orders` with an empty items array, expect a 422 status code and an `errors` object including a specific field and code.\n\nGraphQL queries must also be tested. Although GraphQL typically uses a single endpoint, successful transport does not guarantee a successful query. Assert both the expected data and the absence of errors. Use `cy.request()` with a POST method to `/graphql`, passing the query and variables. Verify the status code is 200, ensure there are no error properties, and confirm the returned order data matches the expected structure (id, status, currency).",
  "summary": "A broken API contract often surfaces as a vague UI failure: expected [data-cy=\"order-total\"] to contain \"$42.00\" Was the React component wrong? Did the API rename total to amount ? Did GraphQL return 200 with an errors array? A focused API test answers those questions closer to the boundary that changed. Cypress can run REST and GraphQL checks through cy.request() in the same specs,…",
  "key_points": [
    "Cypress cy.request() enables testing REST and GraphQL contracts alongside UI tests",
    "Verify REST response status code (200) and required keys (id, items, subtotal, tax, total, currency)"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}