Call today

Cypress stubbing

•

blogcontent

Updated on

0
(0)

To efficiently manage external dependencies and create predictable, isolated tests in Cypress, here are the detailed steps for Cypress stubbing:

👉 Skip the hassle and get the ready to use 100% working script (Link in the comments section of the YouTube Video) (Latest test 31/05/2025)

Check more on: How to Bypass Cloudflare Turnstile & Cloudflare WAF – Reddit, How to Bypass Cloudflare Turnstile, Cloudflare WAF & reCAPTCHA v3 – Medium, How to Bypass Cloudflare Turnstile, WAF & reCAPTCHA v3 – LinkedIn Article

Cypress stubbing allows you to control the behavior of functions and network requests, ensuring your tests run consistently without relying on actual backend responses or complex UI interactions. This is a must for speed and reliability.

Think of it like this: instead of waiting for a full, slow network round trip, you tell Cypress, “Hey, when this specific request goes out, just send back this pre-defined data instantly.”

Here’s a quick guide to get started:

  1. Understand cy.stub for Functions:

    • Purpose: Use cy.stub to replace a function with a controlled version. This is perfect for methods on objects, module functions, or even global functions.
    • Basic Syntax: cy.stubobject, 'methodName'.returnsvalue or cy.stubobject, 'methodName'.callsFakearg1, arg2 => { /* custom logic */ }.
    • Example: Imagine you have a UserService with a getUserData method that makes an API call. You can stub it: cy.stubuserService, 'getUserData'.returns{ id: 1, name: 'John Doe' }.
    • Use Cases: Preventing actual API calls from frontend services, controlling browser APIs like localStorage or fetch though cy.intercept is often better for fetch, and simulating error states for specific functions.

  2. Master cy.intercept for Network Requests:

    • Purpose: cy.intercept is your go-to for mocking HTTP/HTTPS requests. It allows you to control responses for XHR and fetch requests without actually hitting a server.
    • Basic Syntax: cy.interceptmethod, url, { fixture: 'data.json' } or cy.interceptmethod, url, { body: { key: 'value' } }.
    • Example: To mock a GET request to /api/users: cy.intercept'GET', '/api/users', { fixture: 'users.json' }.as'getUsers'. Then, cy.wait'@getUsers'. to ensure the stubbed response was used.
    • Key Features: You can match requests by method, URL, headers, and even request body. You can respond with static data body, fixture, dynamic data reply callback, status codes, and delays.
    • Advantages: This is crucial for fast, consistent UI tests. You don’t need a running backend, and you can simulate all sorts of scenarios success, failure, empty data, loading states.

  3. Leverage Fixtures:

    • What they are: JSON or text files located in your cypress/fixtures folder. They store predefined data structures you want to use as stubbed responses.
    • How to use: Reference them directly in cy.intercept: cy.intercept'GET', '/api/products', { fixture: 'products/all.json' }..
    • Benefit: Keeps your test code clean and separates data from logic, making tests more readable and maintainable.

  4. Managing Stub Lifecycles:

    • Automatic Reset: Cypress automatically clears stubs and intercepts before each test it block, which is incredibly helpful for test isolation. You don’t usually need to manually reset them.
    • Specific Control: If you need a stub for only part of a test or across multiple tests in a describe block, be mindful of where you define cy.stub or cy.intercept. Often, defining them within beforeEach or before hooks is appropriate.

  5. Handling Dynamic Responses with reply:

    • When to use: When you need more complex logic for your stubbed network response, like modifying the request before responding or returning different data based on request parameters.
    • Syntax: cy.intercept'POST', '/api/orders', req => { req.reply{ statusCode: 201, body: { orderId: 'ABC-123', status: 'created' } }. }.
    • Power: This gives you fine-grained control over the response, allowing you to mimic real-world server behavior accurately.

By implementing these steps, you’ll be well on your way to writing robust, fast, and reliable Cypress tests that don’t depend on flaky external factors.

This approach not only speeds up your CI/CD pipeline but also helps you develop features with greater confidence, knowing your frontend works as expected under various data conditions.

The Strategic Imperative of Stubbing in Modern Frontend Testing

This is where Cypress stubbing steps in as a tactical essential, not just a nice-to-have.

It’s about creating an isolated, controlled testing environment that accelerates feedback loops and guarantees test reliability, even when your APIs are still under development or prone to instability.

Think of it as building a high-speed, dedicated test track for your application, free from the unpredictable traffic of a real highway.

Why Stubbing is a Cornerstone for Efficient Testing

Stubbing isn’t just about mocking. it’s about control and speed. In a world where development cycles are increasingly agile and continuous delivery is the goal, waiting for a fully integrated system for every test is simply not sustainable. Stubbing empowers developers to:

  • Isolate Components: Test a specific UI component or feature in isolation, without its behavior being influenced by external services or the full application state. This pinpoints bugs more effectively.
  • Accelerate Test Execution: Network requests are inherently slow. By intercepting and immediately responding with pre-defined data, you eliminate network latency, drastically reducing test suite execution time. For example, a test suite that might take 10 minutes hitting real APIs could complete in 30 seconds with comprehensive stubbing.
  • Ensure Test Consistency: Real APIs can be flaky. They might return different data, encounter transient errors, or simply be unavailable. Stubbing provides a guaranteed, consistent response every single time, making your tests deterministic and reliable. This means fewer “red, then green” flukes in your CI/CD pipeline.
  • Simulate Edge Cases: It’s often difficult to consistently trigger specific error conditions e.g., a 500 server error, an empty data array with real APIs. Stubbing makes simulating these critical edge cases trivial, allowing you to thoroughly test error handling and empty states in your UI. This boosts application resilience.
  • Facilitate Parallel Development: Frontend and backend teams can develop in parallel. The frontend team doesn’t have to wait for the backend API to be fully implemented. they can stub the expected API responses and proceed with UI development and testing. This collaborative efficiency is a major win for project timelines.
  • Reduce Infrastructure Costs: Less reliance on spinning up and maintaining full backend environments for testing can lead to tangible cost savings, especially in cloud-based CI/CD pipelines where compute time translates directly into expenditure.

In essence, Cypress stubbing transforms testing from a dependent, often slow, and unpredictable process into an independent, fast, and highly reliable one.

It’s a strategic move towards building more robust applications with greater confidence and speed.

Deciphering cy.stub: Mastering Function Control

cy.stub is a fundamental command in Cypress that allows you to replace a specific function on an object with a controllable alternative.

Unlike cy.intercept, which focuses on network requests, cy.stub is for manipulating JavaScript functions directly.

This is incredibly powerful for isolating units of behavior, testing callbacks, and simulating different outcomes of internal logic.

When to Employ cy.stub

While cy.intercept handles network requests, cy.stub is your tool for: Junit used for which type of testing

  • Controlling Utility Functions: If your application uses utility functions that perform complex calculations, date formatting, or external library calls, you can stub them to ensure predictable output without executing the full logic.
  • Mocking Browser APIs: For browser-specific APIs like localStorage, sessionStorage, console.log, window.alert, navigator.geolocation, or even fetch though cy.intercept is generally preferred for fetch for its more robust network control, cy.stub provides a direct way to manage their behavior.
  • Isolating Component Methods: In component testing, you might want to stub a method of a component instance that relies on external services or has side effects, allowing you to test the component’s render logic or internal state changes in isolation.
  • Testing Callbacks and Event Handlers: You can use cy.stub to ensure that a certain function is called with the expected arguments when an event occurs or a callback is triggered. This allows you to verify interactions without needing to assert on visible UI changes.
  • Simulating External Libraries: If your application integrates with third-party JavaScript libraries e.g., payment SDKs, analytics libraries, you can stub their methods to prevent actual calls and control their responses during tests.

Practical Applications of cy.stub

Let’s look at some tangible examples that illustrate the power of cy.stub.

Stubbing a Browser API e.g., localStorage

Imagine your application stores user preferences in localStorage. During testing, you want to ensure your UI correctly reflects different stored states without actually manipulating the browser’s localStorage persistently.

describe'User Preferences',  => {
  beforeEach => {


   // Stub localStorage.getItem to return specific data


   cy.stublocalStorage, 'getItem'.returns'dark-theme'.


   cy.visit'/settings'. // Visit a page that reads localStorage
  }.



 it'should apply the dark theme if stored in localStorage',  => {


   cy.get'body'.should'have.class', 'dark-theme'.



 it'should call getItem when loading preferences',  => {
    // Assert that localStorage.getItem was called


   expectlocalStorage.getItem.to.have.been.calledWith'theme'.
}.

In this example, cy.stublocalStorage, 'getItem'.returns'dark-theme'. ensures that anytime localStorage.getItem'theme' is called within the application during this test, it will consistently return 'dark-theme', bypassing the actual localStorage.

Stubbing a Service Method

Consider a ProductService in your application that fetches product details.

For testing a product display component, you don’t want to make a real API call.

// Assuming ProductService is globally accessible or imported

Import { ProductService } from ‘../src/services/ProductService’.

describe’Product Display Component’, => {
let productServiceStub.

// Stub the fetchProducts method to return fixed data


productServiceStub = cy.stubProductService.prototype, 'fetchProducts'
   .returnsCypress.Promise.resolve
     { id: 1, name: 'Laptop', price: 1200 },
     { id: 2, name: 'Mouse', price: 25 }
   .


cy.visit'/products'. // Visit the page displaying products

it’should display the stubbed products’, => {

cy.get'.product-item'.should'have.length', 2.
 cy.contains'Laptop'.should'be.visible'.
 cy.contains'Mouse'.should'be.visible'.

it’should call fetchProducts when the component loads’, => { Noalertpresentexception in selenium

expectproductServiceStub.to.have.been.calledOnce.

Here, cy.stubProductService.prototype, 'fetchProducts' replaces the actual fetchProducts method of any ProductService instance with our controlled version, returning a resolved Promise with dummy product data.

Simulating Function Errors

You can also use cy.stub to simulate error conditions for functions, which is crucial for testing error boundaries and UI error messages.

describe’Error Handling’, => {
// Stub a utility function to throw an error

cy.stubwindow, 'triggerCriticalError'.throwsnew Error'Simulated critical error!'.


cy.visit'/dashboard'. // Visit a page where this error might be triggered

it’should display an error message when a critical error occurs’, => {

// Assuming some action triggers window.triggerCriticalError


cy.get'.error-message'.should'be.visible'.and'contain', 'Something went wrong'.

In this case, any call to window.triggerCriticalError will immediately throw a simulated error, allowing you to test how your application’s error handling mechanisms respond.

Key Considerations and Best Practices for cy.stub

  • Scope: Stubs are automatically reset between it blocks. If you need a stub to persist across multiple tests in a describe block, define it in a before hook. For stubs that need to be re-applied or potentially changed for each test, beforeEach is the appropriate place.
  • Chaining Assertions: Stubs return a Sinon.stub object, which means you can chain assertions on them like should'have.been.calledOnce', should'have.been.calledWith', 'expectedArg', or should'not.have.been.called'. This is incredibly valuable for verifying interactions.
  • Restoring Originals: While Cypress resets stubs automatically, in advanced scenarios e.g., if you’re testing an asynchronous function that modifies a global object and need to restore it mid-test, you can manually restore the original function using stub.restore. However, this is rarely needed for typical test setups.
  • cy.spy vs. cy.stub:
    • cy.spy: Records calls to a function but does not change its behavior. The original function still executes. Useful for confirming a function was called, and with what arguments, without altering its side effects.
    • cy.stub: Records calls and replaces the function’s behavior. The original function does not execute. Ideal for controlling outputs, simulating errors, or preventing side effects.
    • Rule of Thumb: If you need to change what a function does or its return value, use cy.stub. If you just need to observe if and how it was called, use cy.spy.
  • Readability: Name your stub variables clearly e.g., getUserStub, localStorageGetItemStub to improve test readability and debugging.

By mastering cy.stub, you gain immense control over your application’s internal JavaScript logic during testing.

This leads to more focused, reliable, and faster tests, ultimately contributing to a more stable and robust frontend application.

It’s an indispensable tool in the Cypress arsenal for anyone serious about writing effective unit and integration tests.

cy.intercept: The Unbeatable Force in Network Mocking

While cy.stub gives you granular control over JavaScript functions, cy.intercept is the heavyweight champion for managing network requests.

It’s the primary tool for mocking, spying, and modifying XHR and fetch requests made by your application. Aab file

This command fundamentally alters how your Cypress tests interact with your backend, enabling unparalleled speed, reliability, and control over test scenarios.

It’s the equivalent of having a master switch for your application’s communication with the outside world.

The Powerhouse of cy.intercept

cy.intercept operates at the network layer, before a request even leaves the browser. This means it can:

  • Completely Prevent Network Calls: It can intercept a request and respond instantly without ever hitting a real server. This is the cornerstone of fast, isolated tests.
  • Provide Consistent Data: Ensure that your tests always receive the same data, eliminating flakiness due to changing backend data or network latency.
  • Simulate Backend States: Easily simulate different backend responses: success, error 400s, 500s, empty data, pending states, and even network delays.
  • Test Loading Indicators: Introduce artificial delays to simulate slow network conditions, allowing you to thoroughly test loading spinners and skeleton screens.
  • Verify Request Payloads: Inspect the outgoing request headers, body, query parameters to ensure your frontend is sending the correct data to the backend. This is crucial for verifying form submissions or data updates.
  • Modify Responses on the Fly: Dynamically alter the response based on the incoming request, allowing for complex, scenario-driven mocks.

Core Syntax and Common Use Cases

The basic syntax for cy.intercept involves specifying the method, URL, and the desired response.

1. Static JSON Response from Fixture

This is the most common and recommended approach for providing mock data.

Fixtures keep your test data separate and organized.

describe’User List Page’, => {

// Intercept GET /api/users and respond with data from cypress/fixtures/users.json


cy.intercept'GET', '/api/users', { fixture: 'users.json' }.as'getUsers'.
 cy.visit'/users'.


cy.wait'@getUsers'. // Wait for the intercept to complete

it’should display a list of users from the fixture’, => {

cy.get'.user-list-item'.should'have.length', 3. // Assuming users.json has 3 users


cy.contains'Alice Smith'.should'be.visible'.


cy.contains'Bob Johnson'.should'be.visible'.
  • fixture: 'users.json': Cypress will look for users.json in your cypress/fixtures folder.
  • .as'getUsers': Aliases the intercept, allowing you to cy.wait'@getUsers' for it, ensuring your test proceeds only after the mocked response has been delivered. This is crucial for synchronizing tests with asynchronous operations.

2. Direct JSON Body Response

Useful for simpler, inline mock data or when you don’t want to create a separate fixture file.

describe’Product Details Page’, => { Rest api

// Intercept GET /api/products/123 and respond with inline JSON
 cy.intercept'GET', '/api/products/123', {
   statusCode: 200,
   body: {
     id: 123,
     name: 'Super Widget',
     price: 99.99,


    description: 'A fantastic widget for all your needs.'
   }
 }.as'getProduct'.
 cy.visit'/products/123'.
 cy.wait'@getProduct'.

it’should display details for the Super Widget’, => {

cy.get'.product-name'.should'contain', 'Super Widget'.


cy.get'.product-price'.should'contain', '$99.99'.

3. Simulating Error Responses

Critical for testing how your UI handles API failures.

// Intercept GET /api/data and respond with a 500 Internal Server Error
 cy.intercept'GET', '/api/data', {
   statusCode: 500,
     message: 'Internal Server Error'
   },


  delay: 100 // Simulate a slight delay before error
 }.as'getDataError'.


cy.visit'/dashboard'. // Page that fetches /api/data
 cy.wait'@getDataError'.

it’should display an error message for failed data fetch’, => {

cy.get'.error-notification'.should'be.visible'.and'contain', 'Failed to load data'.
  • statusCode: 500: Sets the HTTP status code.
  • delay: 100: Adds a 100ms delay before sending the response, useful for testing loading states or race conditions.

4. Dynamic Responses with reply Callback

For advanced scenarios where the response depends on the incoming request, or you need to inspect/modify the request itself.

describe’Dynamic Forms’, => {

it’should handle POST requests dynamically’, => {

cy.intercept'POST', '/api/submit-form', req => {
   const { name, email } = req.body.
  if !name || !email {


    req.reply{ statusCode: 400, body: { message: 'Name and email are required.' } }.


  } else if email === '[email protected]' {


    req.reply{ statusCode: 409, body: { message: 'Email already exists.' } }.
   } else {


    req.reply{ statusCode: 200, body: { success: true, submittedData: req.body } }.
 }.as'submitForm'.

 cy.visit'/form'.

 // Test case 1: Missing name
cy.get'#email'.type'[email protected]'.
 cy.get'button'.click.


cy.wait'@submitForm'.its'response.statusCode'.should'eq', 400.


cy.get'.error-message'.should'contain', 'Name and email are required.'.

 // Test case 2: Existing email
cy.get'#name'.type'New User'.
cy.get'#email'.clear.type'[email protected]'.


cy.wait'@submitForm'.its'response.statusCode'.should'eq', 409.


cy.get'.error-message'.should'contain', 'Email already exists.'.

 // Test case 3: Successful submission
cy.get'#name'.clear.type'Valid User'.
cy.get'#email'.clear.type'[email protected]'.


cy.wait'@submitForm'.its'response.statusCode'.should'eq', 200.


cy.get'.success-message'.should'contain', 'Form submitted successfully.'.

The reply callback gives you full control over the statusCode, body, headers, and delay of the response.

The req object provides access to the incoming request details, allowing for highly dynamic mocking.

Advanced Features and Best Practices

  • Request Matching: cy.intercept is incredibly flexible in how it matches requests:

    • Exact URL: '/api/users'
    • Glob Pattern: '/api/*' matches any path under /api/
    • RegEx: /\/api\/users\/\d+/ matches /api/users/1, /api/users/2, etc.
    • cy.Matcher Object: For complex matching based on url, method, headers, query, or body. 
      cy.intercept{
  method: 'POST',
  url: '/api/items',
  headers: {
    'x-custom-header': 'value'
  },
  body: {


   // Can be an object, or a function for deeper validation
    type: 'new'
  }
}, { fixture: 'new-item-response.json' }.

  • Route Handlers: Instead of aliasing every intercept with .as, you can chain multiple actions. Cypress clock

    

cy.intercept'GET', '/api/dashboard', { fixture: 'dashboard.json' }
  .as'getDashboard'


 .its'response.body' // Access the response body after it resolves


 .should'have.property', 'widgets' // Assert on the response body
  .and'have.length', 5.

  • Multiple Intercepts for Same URL: Cypress processes intercepts in the order they are defined. The first matching intercept is used. This allows for specific intercepts to take precedence over more general ones.
    // This will intercept all /api/products

    Cy.intercept’GET’, ‘/api/products’, { fixture: ‘all-products.json’ }.

    // This more specific intercept will take precedence for /api/products/123

    Cy.intercept’GET’, ‘/api/products/123’, { fixture: ‘single-product-123.json’ }.

  • cy.wait and Aliases: Using cy.wait'@aliasName' is crucial for ensuring your tests are synchronized with your application’s network requests. It prevents race conditions where your test might try to assert on UI elements before the corresponding data has arrived.

  • Debugging Intercepts: The Cypress command log clearly shows intercepted requests. You can click on them to inspect the request and response details, which is invaluable for debugging. For more verbose logging, consider adding console.logreq inside your reply callback.

cy.intercept is arguably the most powerful command in Cypress for frontend testing.

It grants you complete command over your application’s network interactions, leading to tests that are faster, more reliable, and capable of covering a vast range of scenarios—from happy paths to complex error conditions.

Embracing cy.intercept is a crucial step towards building a robust and maintainable end-to-end testing suite.

The Synergy of Fixtures and Stubbing

Fixtures are a cornerstone of efficient and maintainable Cypress testing, especially when used in conjunction with cy.intercept. They are essentially static files, typically JSON or plain text, stored in your cypress/fixtures directory, that serve as predefined data sources for your tests. Cypress window method

This separation of concerns—keeping test data apart from test logic—is a powerful pattern that enhances readability, reusability, and scalability of your test suite.

Why Fixtures are Indispensable

Imagine hardcoding large JSON objects directly within your cy.intercept calls.

This would quickly make your tests verbose, difficult to read, and a nightmare to update. Fixtures solve these problems by providing:

  • Data Separation: They isolate your test data from your test code. This makes your tests cleaner and focused solely on the application’s behavior.
  • Reusability: The same fixture can be used across multiple tests or even multiple test files. If your /api/users endpoint always returns a specific set of users, define it once in users.json and reuse it everywhere.
  • Maintainability: If your API response structure changes, you only need to update one fixture file, rather than searching and replacing data across countless test files. This significantly reduces the overhead of test maintenance.
  • Readability: Test code becomes much easier to understand when it references a descriptive fixture name e.g., fixture: 'products/all.json' rather than a sprawling JSON object.
  • Versioning of Data: You can create different versions of data for various scenarios e.g., empty-users.json, admin-users.json, error-response.json and easily swap them into your tests.

How to Implement Fixtures with cy.intercept

The integration of fixtures with cy.intercept is straightforward and highly effective.

1. Creating a Fixture File

Navigate to your cypress/fixtures folder. Let’s create users.json:

cypress/fixtures/users.json


  {
    "id": 1,
    "name": "Alice Wonderland",
    "email": "[email protected]",
    "role": "user"
  },
    "id": 2,
    "name": "Bob The Builder",
    "email": "[email protected]",
    "role": "admin"
    "id": 3,
    "name": "Charlie Chaplin",
    "email": "[email protected]",
    "role": "guest"
  }




You can also organize fixtures into subfolders for larger projects, e.g., `cypress/fixtures/products/all.json`.

 2. Using the Fixture in `cy.intercept`



Now, in your Cypress test file, you can reference this fixture:

describe'User Dashboard',  => {


   // Intercept the GET request to /api/users and respond with the data from users.json


    cy.visit'/dashboard/users'.
    cy.wait'@getUsers'.



 it'should display the list of users from the fixture',  => {
    cy.get'.user-row'.should'have.length', 3.


   cy.contains'Alice Wonderland'.should'be.visible'.


   cy.contains'Bob The Builder'.should'be.visible'.


   cy.contains'Charlie Chaplin'.should'be.visible'.



 it'should verify roles are displayed correctly',  => {


   cy.get'.user-row'.eq0.should'contain', 'user'.


   cy.get'.user-row'.eq1.should'contain', 'admin'.



Cypress automatically reads `cypress/fixtures/users.json` and sends its content as the JSON response body.

 3. Using `cy.fixture` Independently

While `cy.intercept` directly uses the `fixture` option, you can also load fixtures programmatically using `cy.fixture` if you need to process or manipulate the data *before* using it, or if you're asserting against data that *should* be part of an API response.

describe'Product Creation',  => {


 it'should send the correct payload on product creation',  => {


   cy.fixture'new-product-payload.json'.thenproductPayload => {


     // Modify the payload before intercepting, if needed


     productPayload.timestamp = new Date.toISOString.



     cy.intercept'POST', '/api/products', req => {


       expectreq.body.to.deep.equalproductPayload. // Assert on the outgoing request body


       req.reply{ statusCode: 201, body: { id: 123, ...productPayload } }.
      }.as'createProduct'.

      cy.visit'/create-product'.
     cy.get'#product-name'.typeproductPayload.name.
     cy.get'#product-price'.typeproductPayload.price.
      cy.get'button'.click.

      cy.wait'@createProduct'.


     cy.get'.success-message'.should'contain', 'Product created successfully'.
    }.



Here, `cy.fixture'new-product-payload.json'.thenproductPayload => { ... }` loads the fixture data, allowing you to access and potentially modify it within your test, making assertions against the outgoing request body, or using it as part of a dynamic `cy.intercept` reply.

# Advanced Fixture Techniques

*   Non-JSON Fixtures: Fixtures aren't limited to JSON. You can have `.txt`, `.html`, or other file types. For example, to mock a CSV download:
    // cypress/fixtures/report.csv
    "Header1","Header2"
    "Value1","Value2"

    // In your test


   cy.intercept'GET', '/api/report.csv', { fixture: 'report.csv', headers: { 'Content-Type': 'text/csv' } }.
*   Fixture Folder Structure: For large applications, organize your fixtures into a logical folder structure mirroring your API endpoints or data domains e.g., `fixtures/users/admin.json`, `fixtures/products/empty.json`.
*   Dynamic Fixture Content: While fixtures are static files, you can load them with `cy.fixture` and then dynamically modify the JavaScript object before using it, as shown in the "Product Creation" example above. This combines the benefits of static data with the flexibility of dynamic manipulation.
*   Using `Cypress.config'fixturesFolder'`: If you ever need to change the default `cypress/fixtures` path, you can configure it in your `cypress.config.js` file.



By consistently using fixtures, you build a robust and easily maintainable testing environment.

They are an essential part of the Cypress ecosystem for any application that relies on external data, enabling you to write cleaner, faster, and more reliable tests.

 Lifecycle Management: Ensuring Clean Test States



One of the most critical aspects of writing reliable and reproducible tests is ensuring a clean state before each test runs.

In Cypress, this "clean slate" principle is particularly important when dealing with stubs and intercepts.

Cypress's design philosophy largely automates this, making test isolation remarkably straightforward.

However, understanding the underlying mechanisms and knowing when to exert manual control is key to advanced testing.

# Automatic Cleanup: The Default Behavior

Cypress is built with test isolation in mind. By default:

*   Stubs `cy.stub`: Any stubs created within an `it` block or a `beforeEach` hook are automatically restored to their original state *after* that `it` block completes. This means that a stub created for one test will not "leak" into the next test.
*   Intercepts `cy.intercept`: Similarly, all network intercepts are cleared *before* each `it` block. This ensures that every test starts with a fresh network routing table, preventing intercepts from previous tests from affecting subsequent ones.
*   Browser State: Cypress also clears `localStorage`, `sessionStorage`, and cookies before each test by default, and resets the DOM to a clean state.



This automatic cleanup is incredibly beneficial because it reduces the boilerplate code you need to write to manage test state.

You rarely need to explicitly `restore` stubs or `reset` intercepts.

# When and Where to Define Stubs and Intercepts



The placement of your `cy.stub` and `cy.intercept` commands significantly impacts their lifecycle and scope.

 1. Inside an `it` Block Test-Specific



If a stub or intercept is only relevant to a single test, define it directly within that `it` block.

It will be active only for the duration of that specific test and automatically cleaned up afterwards.

describe'Login Feature',  => {


 it'should show an error for invalid credentials',  => {


   cy.intercept'POST', '/api/login', { statusCode: 401, body: { message: 'Invalid credentials' } }.as'loginFailed'.
    cy.visit'/login'.
   cy.get'#username'.type'wrong'.
   cy.get'#password'.type'credentials'.
    cy.wait'@loginFailed'.


   cy.get'.error-message'.should'contain', 'Invalid credentials'.

  it'should successfully log in a user',  => {


   // A completely different intercept for success in this test


   cy.intercept'POST', '/api/login', { statusCode: 200, body: { token: 'abc', user: { name: 'John' } } }.as'loginSuccess'.
   cy.get'#username'.type'correct'.
   cy.get'#password'.type'password'.
    cy.wait'@loginSuccess'.
    cy.url.should'include', '/dashboard'.



Notice how `cy.intercept` is defined separately in each `it` block, ensuring that one test's network behavior doesn't influence the other.

 2. Inside a `beforeEach` Hook Common for All Tests

If a stub or intercept needs to be active for *every* test within a `describe` block e.g., mocking a common API endpoint that all tests interact with, define it in a `beforeEach` hook. Cypress will re-apply it before each `it` block, and then clean it up after each `it` block.

describe'Product Management',  => {


   // This intercept will run before every 'it' block in this describe suite


   cy.intercept'GET', '/api/products', { fixture: 'products/all.json' }.as'getProducts'.
    cy.visit'/products'.
    cy.wait'@getProducts'.

  it'should display all products',  => {


   cy.get'.product-item'.should'have.length', 3.

  it'should allow filtering products',  => {


   // This test might then make another request, which would also be intercepted by getProducts
   cy.get'#filter-input'.type'laptop'.


   cy.get'.product-item'.should'have.length', 1. // Assuming only one laptop in fixture

 3. Inside a `before` Hook Global for a `describe` Block, Not Reset

If a stub or intercept needs to be active *once* for an entire `describe` block and should *not* be reset between `it` blocks, define it in a `before` hook. This is less common for network intercepts but can be useful for stubs on global objects that you want to persist across tests for a specific reason e.g., a complex third-party library setup. Be cautious here, as it can lead to test coupling if not managed carefully.

describe'Analytics Tracking',  => {
  let analyticsStub. // Declare a variable to hold the stub reference

  before => {


   // This stub will be created once and persist across all 'it' blocks


   // This is useful if the analytics library is heavy to initialize


   analyticsStub = cy.stubwindow, 'trackAnalyticsEvent'.as'trackEvent'.
    cy.visit'/'. // Only visit once



 it'should track page view on initial load',  => {
    // Assert against the stub created in 'before'


   cy.get'@trackEvent'.should'have.been.calledWith', 'PageView', { path: '/' }.

  it'should track button click event',  => {
   cy.get'button#cta'.click.


   cy.get'@trackEvent'.should'have.been.calledWith', 'ButtonClick', { element: 'cta' }.


   // Note: The call count from the previous test persists if not manually reset or re-stubbed


   // This highlights why beforeEach is often preferred for re-initialization

In the `before` hook example, `analyticsStub` is created once. If you only care that it was called *at some point* within the suite, this might work. However, if you need to assert `have.been.calledOnce` for each *individual* test, you'd need to manually reset the stub's call count e.g., `analyticsStub.resetHistory` in a `beforeEach`, or simply define the stub itself in `beforeEach` for cleaner isolation.

# Manual Control: When and Why



While automatic cleanup is powerful, there are rare cases where you might need manual intervention:

*   `stub.restore`: If you create a `cy.stub` within an `it` block and for a specific reason need to restore the original function *before* the test ends e.g., to test a fallback behavior if your stub is removed, you can call `stub.restore`. This is highly specific and generally discouraged for maintaining test readability.
*   `stub.resetHistory`: If you're using a stub or spy defined in a `before` hook and want to clear its call history before each subsequent test without un-stubbing it entirely, you can call `stub.resetHistory` in a `beforeEach` hook. This lets the stub remain active but clears its call count and arguments for the current test.
    before => {
      window.myGlobalUtil = {
        doSomething:  => {}
      }.


     cy.stubwindow.myGlobalUtil, 'doSomething'.as'myStub'.

    beforeEach => {
      // Reset call history for each test
      cy.get'@myStub'.invoke'resetHistory'.



   it'should call doSomething once on action A',  => {
      // Simulate action A
     cy.get'button#A'.click.


     cy.get'@myStub'.should'have.been.calledOnce'.



   it'should call doSomething twice on action B',  => {
      // Simulate action B
     cy.get'button#B'.click.


     cy.get'@myStub'.should'have.been.calledTwice'.
*   `cy.intercept` for Specific Paths: You might intercept a general path in `beforeEach` and then a more specific path in an `it` block. Cypress respects the order of declaration for matching. If a request matches a more specific intercept that was declared *later*, that later intercept will take precedence.



Understanding the lifecycle of stubs and intercepts is crucial for writing robust and predictable Cypress tests.

By leveraging Cypress's automatic cleanup and strategically placing your commands within `it`, `beforeEach`, or `before` hooks, you can ensure that each test runs in a clean, isolated environment, leading to a highly reliable and maintainable test suite.

 Dynamic Responses and Request Manipulation with `cy.intercept`



While providing static JSON responses via `body` or `fixture` covers a significant portion of stubbing needs, real-world applications often require more nuanced control over network interactions.

This is where the `reply` callback in `cy.intercept` shines.

It transforms `cy.intercept` from a simple mock server into a highly flexible and powerful tool for simulating complex backend logic and dynamically responding to specific request conditions.

# The Power of the `reply` Callback



The `reply` callback function gives you direct access to the `req` request object before a response is sent. This enables you to:

*   Inspect Request Details: Examine the request's method, URL, headers, query parameters, and—critically—the request body. This is invaluable for validating that your frontend is sending the correct data.
*   Dynamic Response Generation: Construct a response on the fly based on the request's content. For example, if a `POST` request includes a `userId`, you might return different data.
*   Conditional Responses: Implement branching logic to return different `statusCode`s, `body` data, or `headers` depending on the request's characteristics. This allows you to simulate validation errors, specific success scenarios, or different data sets.
*   Simulate Backend Delays: Introduce delays `delay` property to mimic slow network conditions or backend processing times, which is vital for testing loading states and UI responsiveness.
*   Pass-Through to Real API: If you want to intercept a request, inspect it, but then allow it to proceed to the actual backend, you can use `req.continue` or `req.reply` without a `body`/`fixture` and with `forceNetwork: true`. This is less common for pure stubbing but powerful for observing network traffic without fully mocking it.

# Practical Examples of `reply`

 1. Validating Request Body and Dynamic ID Assignment



Consider a `POST` request to create a new resource, where the backend typically assigns an ID.

describe'Resource Creation',  => {


 it'should successfully create a new item and display it',  => {
    cy.intercept'POST', '/api/items', req => {
      // Inspect the request body


     expectreq.body.to.have.property'name'.and.to.be.a'string'.


     expectreq.body.to.have.property'description'.and.to.be.a'string'.

      // Generate a dynamic ID


     const newId = Cypress._.uniqueId'item_'. // Using Lodash via Cypress._



     // Reply with a 201 Created status and the new item data
      req.reply{
        statusCode: 201,
        body: {
          id: newId,
          name: req.body.name,
          description: req.body.description,
          status: 'created'
        },
        headers: {


         'Location': `/api/items/${newId}` // Simulate a Location header
        }
      }.
    }.as'createItem'.

    cy.visit'/create-item'.
   cy.get'#item-name'.type'My New Gadget'.
   cy.get'#item-description'.type'A revolutionary device for all purposes.'.

    cy.wait'@createItem'.thenintercept => {


     expectintercept.response.statusCode.to.eq201.


     expectintercept.response.body.to.have.property'id'.


     cy.get'.success-message'.should'contain', 'Item created successfully!'.



This example shows how to validate the incoming `req.body` and then construct a dynamic `body` for the response, including a new, unique ID.

 2. Simulating Form Validation Errors



If your form makes an API call for validation, you can simulate specific error responses.

describe'User Registration',  => {
    cy.visit'/register'.



 it'should show an error if email is already taken',  => {


   cy.intercept'POST', '/api/register', req => {


     if req.body.email === '[email protected]' {
        req.reply{
          statusCode: 409, // Conflict
            message: 'Email already registered.'
        }.
          statusCode: 201,


         body: { message: 'User registered successfully!' }
    }.as'registerUser'.

   cy.get'#email'.type'[email protected]'.
   cy.get'#password'.type'securepassword'.
   cy.get'#confirm-password'.type'securepassword'.



   cy.wait'@registerUser'.its'response.statusCode'.should'eq', 409.


   cy.get'.error-message'.should'contain', 'Email already registered.'.



Here, the `reply` callback checks the `email` in the request body and sends back a `409` error if it's a specific "taken" email.

 3. Simulating Pagination or Search Results



For lists that load incrementally or based on search queries, `reply` is ideal.

describe'Search Results',  => {


 it'should display search results based on query',  => {
    const allItems = 
      { id: 1, name: 'Apple', type: 'fruit' },
      { id: 2, name: 'Banana', type: 'fruit' },


     { id: 3, name: 'Carrot', type: 'vegetable' },
      { id: 4, name: 'Orange', type: 'fruit' }
    .

   cy.intercept'GET', '/api/search*', req => {


     const query = req.query.q ? req.query.q.toLowerCase : ''.


     const filteredItems = allItems.filteritem => item.name.toLowerCase.includesquery.

        statusCode: 200,
          results: filteredItems,
          total: filteredItems.length
    }.as'search'.

    cy.visit'/search'.

    // Test with empty query
    cy.get'.search-input'.type'{enter}'.
    cy.wait'@search'.


   cy.get'.result-item'.should'have.length', 4.

    // Test with 'fruit' query


   cy.get'.search-input'.clear.type'fruit{enter}'.


   cy.get'.result-item'.should'have.length', 3.
    cy.contains'Apple'.should'be.visible'.
    cy.contains'Carrot'.should'not.exist'.



This example shows how `reply` can read `req.query` parameters and filter a local dataset to simulate search functionality, providing highly realistic mock responses.

# Best Practices for `reply` Callback

*   Keep Logic Focused: While powerful, avoid overly complex logic within `reply` callbacks. If the logic becomes too convoluted, consider moving it into a separate utility function or a dedicated test helper file for better readability and maintainability.
*   Error Handling: Ensure your `reply` callbacks handle various scenarios, including malformed requests, to truly simulate robust backend behavior.
*   Type Safety TypeScript: If using TypeScript, define interfaces for `req` and response bodies to improve type safety within your `reply` callbacks.
*   Debugging: Use `console.logreq` or `debugger` statements within the `reply` callback to inspect the incoming request object during test execution, which is invaluable for debugging complex interception logic.
*   Combinations: Remember that `reply` can still use `fixture` if the dynamic part is minimal. You can load a base fixture and then modify its properties within the `reply` callback before sending it.



The `reply` callback is an advanced feature that unlocks the full potential of `cy.intercept`. By mastering its use, you can simulate virtually any backend scenario, creating tests that are not only fast and reliable but also incredibly comprehensive in their coverage of your application's network interactions.

 Asserting on Stubbed and Intercepted Interactions



Stubbing and intercepting requests is only half the battle.

The true value comes from being able to assert that these interactions happened as expected.

Cypress, leveraging the power of Sinon.js for `cy.stub` and its own robust network layer for `cy.intercept`, provides powerful assertion capabilities.

This allows you to verify that your application is making the correct calls with the right data, even when you're not hitting a real backend.

It’s like having a meticulous auditor for every function call and network packet.

# Asserting on `cy.stub` Interactions



When you use `cy.stub`, the returned stub object is a `Sinon.stub`. This object comes with a rich API for making assertions about how the stubbed function was called.

 1. Basic Call Assertions

*   `should'have.been.called'`: Verifies that the stub was called at least once.
*   `should'not.have.been.called'`: Verifies that the stub was never called.
*   `should'have.been.calledOnce'`: Verifies that the stub was called exactly one time.
*   `should'have.been.calledTwice'` / `should'have.been.calledThrice'`: Verifies exact call counts.
*   `should'have.callCount', N`: Verifies the stub was called exactly `N` times.

  let trackEventStub.


   // Assuming window.analytics exists and has a trackEvent method


   trackEventStub = cy.stubwindow.analytics, 'trackEvent'.as'trackEvent'.
    cy.visit'/'.

  it'should track a page view on load',  => {


   cy.get'@trackEvent'.should'have.been.calledOnce'.



 it'should not track event until button is clicked',  => {


   cy.get'@trackEvent'.should'have.been.calledOnce'. // Called once on load
   cy.get'button#no-op-button'.click. // This button does nothing


   cy.get'@trackEvent'.should'have.been.calledOnce'. // Still called once



 it'should track two events when two buttons are clicked',  => {


   cy.get'@trackEvent'.should'have.been.calledOnce'. // Initial page load
   cy.get'button#button1'.click. // Triggers one event
   cy.get'button#button2'.click. // Triggers another event


   cy.get'@trackEvent'.should'have.callCount', 3. // 1 load + 2 clicks

 2. Argument Assertions

*   `should'have.been.calledWith', arg1, arg2, ...`: Verifies that the stub was called with specific arguments. Arguments can be primitives, objects deep equality, or matchers.
*   `should'have.been.calledWithMatch', arg1, arg2, ...`: Similar to `calledWith`, but allows partial matching for objects.
*   `should'have.been.calledOnceWith', arg1, arg2, ...`: Combines `calledOnce` and `calledWith`.
*   `should'always.have.been.calledWith', arg1, arg2, ...`: Verifies that *every* call to the stub had these arguments.

describe'User Actions',  => {
  let logActionStub.
    // Assuming a global Logger object


   logActionStub = cy.stubwindow.Logger, 'logAction'.as'logAction'.
    cy.visit'/dashboard'.



 it'should log "Login" action on successful login',  => {


   // Simulate login success, which calls Logger.logAction'Login', { userId: 123 }
    cy.get'.login-button'.click.


   cy.get'@logAction'.should'have.been.calledWith', 'Login', { userId: 123 }.



 it'should log "Logout" action without user ID',  => {
    cy.get'.logout-button'.click.


   cy.get'@logAction'.should'have.been.calledWith', 'Logout', undefined. // Or no second argument



 it'should log multiple distinct actions',  => {
    cy.get'.save-button'.click.
    cy.get'.delete-button'.click.


   // Use .should'satisfy' for more complex argument assertions
    cy.get'@logAction'.shouldstub => {


     expectstub.getCall0.args.to.eq'Save'.


     expectstub.getCall1.args.to.eq'Delete'.



For partial object matching, `calledWithMatch` is invaluable:



cy.get'@logAction'.should'have.been.calledWithMatch', 'ItemUpdated', { itemId: Cypress.sinon.match.number }.


// Matches 'ItemUpdated' and an object with any number for 'itemId'

# Asserting on `cy.intercept` Interactions



When you use `cy.intercept.as'aliasName'`, Cypress makes the intercepted request and response objects available via `cy.wait'@aliasName'`. This allows you to inspect the details of the network interaction.

 1. Basic Status Code and Body Assertions



The most common use case is verifying the response status and body.

describe'API Interaction',  => {
  it'should fetch users successfully',  => {




   cy.wait'@getUsers'.its'response.statusCode'.should'eq', 200.


   cy.wait'@getUsers'.its'response.body'.should'have.length', 3.


   cy.wait'@getUsers'.its'response.body'.should'deep.include', { name: 'Alice Wonderland' }.



 it'should handle user creation error 400',  => {


   cy.intercept'POST', '/api/users', { statusCode: 400, body: { message: 'Invalid data' } }.as'createUser'.
    cy.visit'/create-user'.
   cy.get'#submit-button'.click.


   cy.wait'@createUser'.its'response.statusCode'.should'eq', 400.


   cy.wait'@createUser'.its'response.body.message'.should'eq', 'Invalid data'.

 2. Asserting on the Request `req` Object

Crucially, `cy.wait` also gives you access to the *request* object, allowing you to verify what your application sent to the backend.

describe'Form Submission',  => {


 it'should send correct data on form submission',  => {


   cy.intercept'POST', '/api/submit', { statusCode: 200, body: { success: true } }.as'submitForm'.
   cy.get'#name'.type'John Doe'.
   cy.get'#email'.type'[email protected]'.

    cy.wait'@submitForm'.thenintercept => {
      // Assert on the request object properties


     expectintercept.request.method.to.eq'POST'.


     expectintercept.request.url.to.include'/api/submit'.


     expectintercept.request.body.to.deep.equal{
        name: 'John Doe',
        email: '[email protected]'
      // Assert on headers


     expectintercept.request.headers.to.have.property'content-type'.and.include'application/json'.



Using `.thenintercept => { ... }` gives you full access to the `intercept` object, which contains `request` and `response` properties.

This is generally preferred for multiple assertions on a single intercept.

 3. Counting and Ordering Intercepts



You can also use aliases to ensure a specific number of calls or the order of calls.

describe'Multiple API Calls',  => {


 it'should make two distinct API calls in order',  => {


   cy.intercept'GET', '/api/data1', { body: 'Data 1' }.as'getData1'.


   cy.intercept'GET', '/api/data2', { body: 'Data 2' }.as'getData2'.

    cy.visit'/sequential-data-loader'.



   // Wait for both intercepts to complete, in the order they are expected
    cy.wait'@getData1'.
    cy.wait'@getData2'.



   // You can also check if they were made in a specific order if necessary,


   // though `cy.wait` implicitly helps with this.


   // For more complex order checks, you might need to combine with stubbing on specific functions.

# Key Takeaways for Assertions

*   Aliases are Key: Always alias your `cy.stub` and `cy.intercept` calls with `.as'aliasName'`. This creates a reference that you can then `cy.get'@aliasName'` or `cy.wait'@aliasName'` on to perform assertions.
*   `.then` for Deeper Inspection: When you need to make multiple assertions on the properties of a `cy.intercept` or `cy.stub` e.g., checking multiple fields in `request.body` or `response.body`, use a `.then` callback after `cy.wait` or `cy.get`.
*   `its` for Chaining: For single-property assertions e.g., `its'response.statusCode'`, `its` provides a concise and readable way to chain assertions.
*   Sinon.js Matchers: For `cy.stub`, explore `Cypress.sinon.match` for more sophisticated argument matching e.g., `Cypress.sinon.match.any`, `Cypress.sinon.match.string`, `Cypress.sinon.match.array`.
*   Readability: Keep your assertions clear and focused. Overly complex single assertions can be hard to debug. Break them down if necessary.



By mastering these assertion techniques, you turn your stubs and intercepts into powerful diagnostic tools, giving you high confidence that your application is behaving correctly at both the functional and network layers, even without a live backend.

 Common Pitfalls and Troubleshooting in Cypress Stubbing



While Cypress stubbing is incredibly powerful, it's not without its nuances.

Developers often encounter common issues that can lead to flaky tests, unexpected behavior, or simply frustration.

Understanding these pitfalls and knowing how to troubleshoot them efficiently can save you significant time and effort, ensuring your testing workflow remains smooth and productive.

# 1. Intercepting Too Late or Too Early

Pitfall: Your `cy.intercept` is defined *after* the network request has already been initiated by your application, or before the application has even had a chance to render and make the request.

Symptoms:
*   Tests time out waiting for an alias e.g., `cy.wait'@myRequest'`.
*   The network request goes through to the real backend, even though you defined an intercept.
*   The Cypress command log shows the request as "XHR" or "Fetch" but not "Intercepted."

Troubleshooting:
*   Order of Operations: Ensure `cy.intercept` is defined *before* the action that triggers the network request.
    // ✅ Correct: Intercept defined before visit





   // ❌ Incorrect: Request might be sent before intercept is active
    // cy.visit'/users'.


   // cy.intercept'GET', '/api/users', { fixture: 'users.json' }.as'getUsers'.


   // cy.wait'@getUsers'. // This will likely fail
*   `beforeEach` for Common Intercepts: Place common intercepts in a `beforeEach` block, as it runs before every `it` test and after `cy.visit`, ensuring the intercept is active.
*   `cy.wait` is Crucial: Always use `cy.wait'@alias'` after triggering the action that makes the request. This pauses your test until the intercepted request or actual request, if not intercepted has completed, synchronizing your test flow.

# 2. Incorrect Request Matching

Pitfall: Your `cy.intercept` pattern doesn't precisely match the URL, method, or request body/headers of the actual outgoing request from your application.

*   Same as "Intercepting Too Late or Too Early" request goes to real backend.
*   The Cypress command log might show the request as "XHR" or "Fetch" but without the "Intercepted" badge.

*   Exact URL vs. Glob vs. Regex:
   *   Exact: `'/api/users'`
   *   Glob: `'*/api/users*'` wildcard for any path
   *   Regex: `/\/api\/users\/\d+/` for dynamic IDs
   *   Inspect DevTools: Open your browser's Developer Tools Network tab during a Cypress test run. Observe the *exact* URL, method, and payload your application sends. Compare it rigorously with your `cy.intercept` definition.
*   Method Mismatch: Double-check if it's `GET`, `POST`, `PUT`, `DELETE`, etc. Case matters for method names `'GET'` is correct, `'get'` is not.
*   Query Parameters: If your URL includes query parameters `/api/users?status=active`, make sure your intercept accounts for them, either by including them in the URL string or using a regex. For dynamic queries, `cy.intercept'GET', '/api/users?*', ...` or a regex is needed.
*   Headers/Body Matching: For complex matching on headers or request bodies, use the object syntax and be precise with your property names and values.
    cy.intercept{
      method: 'POST',
      url: '/api/data',


       itemType: 'product' // Make sure this matches exactly
    }, { fixture: 'product-data.json' }.
*   `cy.intercept` Callback for Inspection: If you're really stuck, use the `reply` callback without actually replying, just to `console.logreq` the incoming request:
    cy.intercept'POST', '/api/data', req => {


     console.log'Intercepted Request:', req. // Inspect this in browser console


     // req.continue. // Let it go to the real backend while debugging
    }.as'debugIntercept'.

# 3. Stubbing on Non-existent Objects or Functions

Pitfall: You try to stub a JavaScript object or function that isn't available in the `window` context or at the specific time your stub is defined.

*   Cypress throws an error like `"Cannot stub non-existent method 'myMethod' on object 'myObject'"`.
*   Your application still executes the original function, indicating the stub wasn't applied.

*   Timing: Ensure the object/function you're trying to stub exists *before* `cy.stub` is called. If your application asynchronously loads a library or creates an object, you might need to `cy.window.then` to wait for it.


   // Assuming myGlobalService is initialized asynchronously
    cy.visit'/'.then => {


     // Now that the app is loaded, myGlobalService should exist


     cy.stubwindow.myGlobalService, 'fetchData'.returns.
*   Scope: Is the object truly available on `window`? Or is it an imported module? If it's an imported module within your test file, you might need to use `import` to get the reference before stubbing. For methods on a component instance, you might need to access the component's internal instance e.g., using `cy.get.thenel => el.someFrameworkInstance` which is more complex.
*   Spelling & Case: Check for typos in object or method names. JavaScript is case-sensitive.

# 4. Overlapping Intercepts or Unintended Order

Pitfall: You define multiple `cy.intercept` calls for similar URLs, and the order of definition leads to an unexpected intercept taking precedence.

*   Your tests get the "wrong" mock data e.g., an empty array when you expected full data, or vice versa.
*   The Cypress command log shows an intercept being used, but it's not the one you intended for that specific scenario.

*   Specificity Rules: Cypress matches the *first* defined intercept that fits the request. More specific intercepts should generally be defined *after* more general ones *if you want them to take precedence*. However, the best practice is to define intercepts in the order they are most likely to be hit, or to ensure that patterns are mutually exclusive for specific tests.


   // Scenario: GET /api/users/1 should get a single user, GET /api/users should get all


   // ✅ Correct order: specific intercept first if it's within the same beforeEach/it block


   cy.intercept'GET', '/api/users/1', { fixture: 'single-user.json' }.as'getSingleUser'.


   cy.intercept'GET', '/api/users', { fixture: 'all-users.json' }.as'getAllUsers'.



   // If you swap these, the general /api/users might intercept /api/users/1


   // ❌ Incorrect order if /api/users is meant to be generic catch-all


   // cy.intercept'GET', '/api/users', { fixture: 'all-users.json' }.as'getAllUsers'.


   // cy.intercept'GET', '/api/users/1', { fixture: 'single-user.json' }.as'getSingleUser'.
*   Test Isolation: Ensure you clear intercepts between tests using `beforeEach` if scenarios require different mocks for the same endpoint. Cypress's automatic cleanup usually handles this, but be mindful if you define intercepts in a `before` hook.
*   Wildcard/Regex Overlap: Be careful with broad wildcards e.g., `*` if you have more specific routes. `'/api/*'` will match `'/api/users'` and `'/api/products'`.

# 5. Asynchronous Operations and `cy.wait`

Pitfall: Your application makes an asynchronous call, and your test proceeds to make assertions before the stubbed or intercepted response has been processed by your application.

*   Assertions fail because UI elements haven't updated yet.
*   Tests appear flaky, sometimes passing, sometimes failing.

*   Always `cy.wait` on Intercepts: For `cy.intercept`, always `cy.wait'@alias'` before asserting on UI changes that depend on the response. This guarantees the network activity and subsequent DOM updates have completed.
*   `cy.get.should` for DOM Changes: For `cy.stub` when it doesn't involve a network request but triggers a UI update, use Cypress's retry-ability by chaining `should` assertions directly to `cy.get`. Cypress will automatically retry the `get` and `should` until the assertion passes or times out.


   // Example for a UI update triggered by a stubbed function


   cy.stubmyComponent, 'updateState'.returnstrue. // Stub returns synchronously
    cy.get'button'.click.


   cy.get'.status-message'.should'contain', 'State updated'. // Cypress retries this
*   Force UI Updates Rarely Needed: If you stub a function that has side effects that *don't* trigger a re-render automatically, you might need to manually trigger a re-render or wait for a specific element to appear. This is rare in well-structured component frameworks.



By systematically approaching these common pitfalls with the suggested troubleshooting methods, you can significantly improve the reliability and efficiency of your Cypress stubbing efforts, leading to a more robust and less frustrating testing experience.

 Ensuring Halal Testing Practices: Ethical Considerations in Stubbing

As professionals, our commitment extends beyond technical excellence to ethical considerations, guided by Islamic principles. While Cypress stubbing is a powerful and permissible technical practice—it involves no haram elements directly—it's crucial to apply it within an overarching framework of *halal* testing practices. This means using these tools responsibly, avoiding any implications that could lead to or support forbidden acts, and promoting integrity in our development and quality assurance processes.

The core of stubbing and mocking in Cypress is simulation and isolation. These are neutral technical concepts. However, the *content* we use for these simulations and the *purpose* for which our application is built must align with Islamic values.

# 1. Data Integrity and Honesty in Mocking



When creating fixtures and dynamic `reply` callbacks, ensure the data you simulate upholds honesty and avoids deception.

*   Avoid Misleading Data: If your application handles financial transactions, ensure your mock data reflects legitimate transactions, not those based on `riba` interest, gambling, or scams. For example, if you're mocking a bank transfer, ensure the mock amounts, sender, and receiver details are straightforward and don't imply interest accrual.
*   Ethical Scenarios: When simulating edge cases or error conditions, ensure these scenarios are relevant to genuine application behavior and not used to depict or promote immoral acts. For instance, mocking a "user not found" is permissible, but mocking a "user attempting to gamble" scenario is not. Instead, focus on scenarios that reinforce responsible use, like "user entering invalid credentials" or "user attempting to access unauthorized content."
*   Privacy in Mock Data: Even though it's mock data, cultivate a habit of generating realistic but anonymized data. Avoid using real personal information, even if it's just for testing. This instills good data hygiene practices, consistent with the Islamic emphasis on privacy and respect for individuals.

# 2. Purpose of the Application and Features Under Test

This is the most critical area where ethical considerations intersect with technical practices. Stubbing allows you to test features in isolation, but the *feature itself* must be permissible.

*   Discourage Haram Features: If the application or a specific feature you are testing facilitates or promotes anything forbidden in Islam e.g., gambling, alcohol sales, riba-based transactions, immoral entertainment, dating, or content that promotes polytheism or blasphemy, then the very act of testing it, even with stubs, needs careful consideration.
   *   Alternative: Instead of using your skills to improve such features, channel your expertise towards developing and testing applications that are beneficial for society. This could include:
       *   Educational platforms: Apps for learning, skill development, or academic support.
       *   Halal finance solutions: Applications for ethical investments, zakat calculation, or interest-free loans.
       *   Productivity tools: Task managers, habit trackers, or organizational apps.
       *   Community and social good platforms: Apps for volunteering, charity, or connecting like-minded individuals for beneficial purposes.
       *   Health and wellness apps: Tools for fitness tracking, healthy eating, or mental well-being, always promoting natural, permissible methods over discouraged supplements or quick fixes.
       *   E-commerce for permissible goods/services: Platforms that facilitate ethical trade in halal products.
*   Focus on Permissible Functionality: If an application has both permissible and impermissible features, use your stubbing expertise to rigorously test and enhance the permissible aspects. Decline work on the impermissible ones, even if it means missing out on a project. Our commitment to our faith should always take precedence.

# 3. Resource Allocation and Time Management



The efficiency gained through stubbing frees up time.

How this time is used also has an ethical dimension.

*   Productive Use of Time: The time saved from faster tests and less reliance on external services should be channeled into improving the quality of permissible applications, learning new beneficial skills, or engaging in acts of worship and community service. Avoid squandering this saved time on idle pursuits or entertainment that offer no spiritual or worldly benefit.
*   Avoiding Excessive Complexity for Haram Ends: Do not over-engineer or invest excessive intellectual capital in creating elaborate stubbing solutions for features that are ultimately not in line with Islamic values. Simplicity and efficiency are encouraged, but always with the underlying purpose being *halal*.



By integrating these ethical considerations into our Cypress stubbing practices, we ensure that our technical skills are not just proficient but also purposeful, aligning our professional work with our deeper commitment to Islamic principles.

Our intention niyyah behind using these tools should always be to contribute to good and avoid that which is harmful or forbidden.

This approach elevates our work from mere technical execution to a form of righteous endeavor.

 Frequently Asked Questions

# What is Cypress stubbing?


Cypress stubbing is the process of replacing functions or network requests with controllable stand-ins during tests.

This allows you to dictate what a function returns or what data a network request responds with, ensuring tests are isolated, fast, and reliable without relying on actual backend services or complex external logic.

# What is the main difference between `cy.stub` and `cy.intercept`?


`cy.stub` is used to replace and control the behavior of JavaScript functions on objects, while `cy.intercept` is specifically designed to mock and control HTTP/HTTPS network requests XHR and Fetch made by your application.

# Why is stubbing important in Cypress testing?


Stubbing is crucial because it enables test isolation, allowing you to test UI components independently of backend services.

It significantly speeds up test execution by eliminating network latency, ensures test consistency by providing predictable data, and allows for easy simulation of various scenarios like success, failure, and edge cases that are hard to replicate with real APIs.

# How do I stub a JavaScript function in Cypress?


You use `cy.stubobject, 'methodName'`. For example, `cy.stublocalStorage, 'getItem'.returns'someValue'.` to control `localStorage.getItem`. You can also chain `.callsFake` for more complex custom logic.

# How do I mock a network request in Cypress?


You use `cy.interceptmethod, url, response`. For example, `cy.intercept'GET', '/api/users', { fixture: 'users.json' }.` to mock a GET request to `/api/users` with data from a fixture file.

# What are Cypress fixtures and how are they used in stubbing?


Cypress fixtures are static files usually JSON stored in `cypress/fixtures` that contain predefined data.

They are used with `cy.intercept` to provide mock responses for network requests, keeping test data separate from test logic for better organization and reusability.

# How can I make my stubbed network responses dynamic?


You can use a `reply` callback function with `cy.intercept`. For example, `cy.intercept'POST', '/api/data', req => { req.reply{ statusCode: 200, body: { id: Date.now, ...req.body } }. }.`. This gives you access to the incoming request `req` to tailor the response dynamically.

# How do I assert that a stubbed function was called?


After aliasing your stub `.as'myStub'`, you can use `cy.get'@myStub'.should'have.been.called'` or `cy.get'@myStub'.should'have.been.calledOnce'`. You can also assert on arguments: `cy.get'@myStub'.should'have.been.calledWith', 'arg1', 'arg2'`.

# How do I assert on a network request that was intercepted?


After aliasing your intercept `.as'myRequest'`, use `cy.wait'@myRequest'`. Then you can chain assertions like `cy.wait'@myRequest'.its'request.body'.should'deep.equal', { data: 'test' }.` to check the outgoing request, or `cy.wait'@myRequest'.its'response.statusCode'.should'eq', 200.` to check the response.

# Do I need to manually reset stubs and intercepts between tests?


No, Cypress automatically clears all stubs and intercepts before each `it` block.

This ensures that every test runs in a clean, isolated state, significantly simplifying test setup and preventing test pollution.

# Can I simulate network errors with Cypress stubbing?


Yes, using `cy.intercept`, you can specify a `statusCode` for error responses.

For example, `cy.intercept'GET', '/api/data', { statusCode: 500, body: { message: 'Server Error' } }.` will simulate a 500 Internal Server Error.

# How do I simulate a slow network connection in Cypress?


You can add a `delay` property to your `cy.intercept` response.

For instance, `cy.intercept'GET', '/api/data', { fixture: 'data.json', delay: 2000 }.` will delay the response by 2 seconds, allowing you to test loading states.

# What happens if a network request is made but no `cy.intercept` matches it?


If no `cy.intercept` matches an outgoing request, Cypress will allow the request to proceed to the actual backend or external service.

This is why thorough intercept coverage is important for isolated testing.

# Can I use `cy.stub` to mock `window.location` or `window.alert`?
Yes, `cy.stub` is effective for browser APIs.

For `window.alert`, you could do `cy.stubwindow, 'alert'.as'alertStub'.` then `cy.get'@alertStub'.should'have.been.calledWith', 'Hello!'.`. For `window.location`, you can directly control its methods or properties, e.g., `cy.stubwindow.location, 'reload'.`.

# How do I ensure my intercepts are active before my application makes requests?
Place your `cy.intercept` calls in a `beforeEach` hook or directly within the `it` block *before* any action that triggers the request like `cy.visit` or clicking a button. This ensures the intercept is registered in Cypress's network layer in time.

# Can I combine `cy.stub` and `cy.intercept` in the same test?
Absolutely. It's very common to use both.

You might `cy.intercept` network calls and `cy.stub` a utility function that processes the data received from those calls, allowing for granular control over different layers of your application.

# What is `cy.spy` and when should I use it instead of `cy.stub`?
`cy.spy` tracks calls to a function without changing its original behavior. Use `cy.spy` when you only need to observe if a function was called, how many times, and with what arguments, but you still want the original function's logic to execute. Use `cy.stub` when you need to *replace* the function's behavior e.g., control its return value, throw an error, prevent side effects.

# How do I handle multiple intercepts for the same URL in one test?


Cypress matches intercepts based on the order they are defined. The first matching intercept declared will be used.

If you have multiple intercepts for similar URLs, ensure the most specific ones are defined before more general ones, or use clear separation in `beforeEach` blocks for different test scenarios.

# Why would a `cy.wait` timeout even if I have an `cy.intercept`?


This typically means your `cy.intercept` pattern did not correctly match the outgoing network request, or the request was made before the intercept was active.

Double-check your URL matching including query parameters, wildcards, regex, HTTP method, and ensure the intercept is defined sufficiently early in your test.

Use Cypress's DevTools Network tab to inspect the exact request.

# Is Cypress stubbing a permissible practice in Islamic principles?
Yes, Cypress stubbing is a permissible technical practice. It is a tool for simulation and isolation in software testing, which are neutral concepts. However, it is crucial that the *content* of the simulated data and the *purpose* of the application being tested align with Islamic values. We should ensure the application does not promote or facilitate anything forbidden e.g., gambling, interest, immoral entertainment and instead focus our efforts on testing and building beneficial and halal software.

Kinsta

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

•

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *