QA Automation Labs

Mocking API Response In Cypress

image-629

Mocking API Response In Cypress

What is Mocking ?

Mocking, in a broader software development and testing context, is a technique used to simulate the behavior of certain components or objects in a controlled manner. It involves creating fake or mock objects that imitate the behavior of real objects or components within a software system. Mocking is often used in various stages of software development, including testing, to isolate and focus on specific parts of a system while ignoring the complexities of its dependencies.

Mocking allows developers and testers to isolate specific parts of a system for testing without relying on the actual implementation of external components, services, or modules

Benefits of Mocking

Few of the befits of Mocking are

  1. Simulation of Dependencies: Mocking involves creating mock objects or functions that imitate the behavior of real components or services that a software system relies on. These mock objects or functions provide predefined responses to interactions, such as method calls or API requests.
  2. Isolation: Mocking helps in isolating the unit or component being tested from the rest of the system. This isolation ensures that any issues or failures detected during testing are specific to the unit under examination and not caused by external factors.
  3. Reduced Risk: Since mocking avoids the use of real external dependencies, there is a reduced risk of unintended side effects or data corruption during testing. The test environment remains controlled and predictable.
  4. Speed: Real dependencies might involve time-consuming operations or external services like databases, APIs, or network calls. Mocking these dependencies can significantly speed up the testing process because you eliminate the need to perform these real operations.
  5. Reduced Resource Usage: Since mocks don’t use real resources like databases or external services, they reduce the load on these resources during testing, which can be especially important in shared development and testing environments.

Mocking API In Cypress?

Mocking APIs in Cypress is a powerful technique for simulating APIs and external services in your tests. This allows you to create controlled environments for testing different scenarios without relying on the actual services.To mock an API in Cypress, you can use the cy.intercept() command. This command intercepts HTTP requests and returns a predefined response.

Cypress’s cy.intercept() method empowers developers and testers to intercept and manipulate network requests, allowing them to simulate various scenarios and responses, thus making it an indispensable tool for testing in dynamic and unpredictable environments. By crafting custom responses or simulating error conditions, you can comprehensively assess your application’s behavior under diverse conditions.

To use cy.intercept(), you must first specify the method and url of the request to intercept. You can also specify other parameters, such as the request body and headers. The second argument to cy.intercept() is the response that you want to return.

For example, the following code mocks the response to a GET request to the /api/users endpoint:

cy.intercept('GET', '/api/users', {
statusCode: 200,
body: [
{
id: 1,
name: 'John Doe',
email: '[email protected]',
},
{
id: 2,
name: 'Jane Doe',
email: '[email protected]',
},
],
});

Example Mocking API Data In Cypress

Step 1 Create Scenario For To Automate

To gain deeper insights, we’ll automate a specific scenario on https://demo.realworld.io/.

Below steps we are going to automate for Mocking the data :

  1. Visit the website at https://demo.realworld.io/.
  2. Upon opening the page, two requests are triggered in Network call — one for Tags and other for Article
  3. Intercept the Tags request, and instead of the original list of Tags, insert three new tags: “Cypress”“Playwright” and “SLASSCOM” Make sure to verify that these tags are displayed correctly in the user interface.
  4. Intercept the Article request, and instead of the original list of articles, provide just one article with modified details. You should change the username, description, and the number of likes. Afterward, confirm that these modifications are accurately reflected in the user interface.
Below are the request we are going to automate :
tags:

Feeds