Stubbing-and-Mocking-with-Cypress.

In modern web development, applications often interact with external APIs, services, or databases. Testing these interactions can be challenging, as it introduces dependencies on external systems that may be unreliable, slow, or require specific configurations. This is where mocking and stubbing come into play. Mocking and stubbing allow you to isolate your tests from external dependencies, making them more reliable, faster, and easier to maintain. 

Cypress, a popular end-to-end testing framework, provides built-in support for mocking and stubbing, allowing you to control the behavior of network requests, timers, and more. In this blog post, we’ll explore the concepts of mocking and stubbing, and how to leverage them in Cypress to write more robust and maintainable tests. 

Mock and stub are two concepts commonly used in software testing and development. Both techniques are used to simulate certain behaviors or dependencies in order to isolate and test specific parts of a system. 

What is Mocking in Cypress?

A mock object is a simulated object that mimics the behavior of a real object in a controlled way. It is used to replace a real object or component that may be difficult to instantiate or access during testing. Mocks are typically used to verify interactions between objects, such as method calls or data exchanges. They allow developers to set expectations on how the object should be used and can be used to simulate different scenarios or responses. 

What is Cypress Stubbing?

A stub is a simplified version of a real object or component that provides predetermined responses to method calls. It is used to replace a real object or component that is not yet implemented or is not available for testing. Stubs are typically used to simulate specific behaviors or return values in order to test the functionality of other parts of the system. They are often used when testing code that relies on external dependencies, such as databases or web services. 

In summary, mocks and stubs are tools used in software testing to simulate certain behaviors or dependencies. Mocks are used to verify interactions between objects, while stubs are used to provide predetermined responses. By using these techniques, developers can isolate and test specific parts of a system more effectively. 

Why do we use Mocks and Stubs?

Imagine a world where your tests are immune to the unpredictability of external APIs, where you can create any scenario you desire – be it a server error, a slow network, or a perfect response. Mocking and stubbing make this world a reality, allowing you to simulate these conditions consistently and reliably in your tests.  

The Cypress Spellbook: 

Gone are the days of 

and 

for Cypress has bestowed upon us a more powerful incantation: 

This command is the cornerstone of network request manipulation in Cypress, enabling you to intercept, modify, or even fabricate responses from network requests. 

Example: Conjuring a Successful Response

 Let’s cast our first spell by mocking a successful response to a GET request for a list of wizards. 

Conjuring a Successful Response- Stubbing and Mocking

In this incantation, we use 

to intercept any GET requests to 

and respond with a 200-status code along with a body containing our mocked list of wizards. We then proceed to assert that our page correctly displays two wizards. 

Example: Simulating a Server Error

Not all tales are of success and happiness. Sometimes, we must prepare for the darker times when servers respond with errors. 

Simulating a Server Error- Stubbing and Mocking

Here, we simulate a server error by intercepting the GET request and returning a 500-status code with an error message. This allows us to test how our application handles such scenarios, ensuring a graceful degradation of functionality. 

Best Practices:

  • Be Specific: When intercepting requests, be as specific as possible with your URL matching. This prevents unintended interceptions and ensures your tests are accurate.
  • Test Reality: While mocking and stubbing are powerful, they should not replace testing with real network requests entirely. Use them to complement your testing strategy. 
  • Clean Up Your Spells: Ensure your tests are independent and do not rely on the state from previous tests. Reset any stubs or mocks after each test to maintain a clean slate. 

Conclusion: 

Mocking and stubbing are powerful techniques that can greatly improve the reliability, maintainability, and speed of your Cypress tests. By leveraging Cypress’s built-in support for mocking and stubbing, you can isolate your tests from external dependencies, simulate specific scenarios, and write more robust and maintainable tests. 

Remember, while mocking and stubbing are valuable tools, it’s essential to strike a balance between mocked tests and tests that exercise the full application stack, including external dependencies. A well-rounded testing strategy should include a combination of unit tests, integration tests, and end-to-end tests, with mocking and stubbing applied judiciously to improve test reliability and speed.