How do you stub network responses for different UI states?

Stubbing lets a test reach states that are slow, rare or hard to produce with real data. A loading state needs a delayed response, an empty state needs an empty list, and an error state needs a non-2xx status. Each one is a small intercept, not a special backend.

cy.intercept("GET", "/api/invoices", {
  statusCode: 500,
  body: { message: "Billing service unavailable" },
}).as("getInvoices");

cy.visit("/invoices");
cy.wait("@getInvoices");
cy.get("[data-cy=error]")
  .should("contain", "Billing service unavailable");

Stub patterns worth having

• Empty: an empty array or an object with no items
• Loading: use a delay in the reply to observe the skeleton
• Error: a 4xx or 5xx with the shape the UI expects
• Partial: one field missing or null to test defensive rendering
• Slow: a bounded delay, not an arbitrary sleep in the test body

cy.intercept("GET", "/api/invoices", (req) => {
  req.reply({
    delay: 1000,
    statusCode: 200,
    body: [],
  });
}).as("getInvoices");