使用 Cypress 在按钮单击时模拟 GET api

Question

I'm looking for a way to mock an existing API's response on a button click. When the button, say button A is clicked, the page routes to, let's say #/create-something .

On the FE, there is a loader shown, while in the background there are two XHR requests being made. These two API's response are used to populate two form fields on #/create-something .

The page throws a console error if I don't load these two api's. So, I want to mock these two api's and populate the two form fields using these mocked response.

This is what I'm looking to perform -

1. Click on button A
2. Mock the two API's so that form fields X and Y are populated based on response of mocked API.
3. Perform some form actions.

I have not done or written code for this part since I'm not familiar with how to go about this problem. I have gone through this tutorial but not able to understand if this is the correct way/approach to solve this issue.

Edit 1 : I am adding an example. Let's say I'm hitting this URL - Cats On the initial page load, there are a couple of XHR calls being made. I want to mock the me and the cats API call using fixtures.

I have a urls file which contains the routes -

urls.js

 export const me='/users/me';
 export const cats='3/gallery/r/cats'

In my cats.spec.js folder, I have this code

   import {
       me,
       cats  
    } from '../cats'

 context('Checking if mocking can be done',()=>{
   const mockingAPI = () =>{
       cy.server();
       cy.route(me, 'fixtures:me-mock.json);
       cy.route(cats,'fixtures:me-cats.json);
       cy.wait(2000);
        }

   describe('Actual mock and tests',()=>{
       before(mockingAPI());

       it('lets add some tests',()=>{
        cy.visit('/');

         })

  })
})

PS - If this has already been asked, please point me to the same.

Answer 1

Cypress allows you to stub network requests. When your application makes a request to a particular endpoint, you can intercept it to return a mocked response. You can either use fixtures for your mock response or just pass a plain object as the third argument to cy.request() .

Your setup should be something like this:

it('should...', () => {

  cy.server();
  cy.visit('/');

  // load your mock data
  cy.fixture('me-mock.json').as('meJSON');
  cy.fixture('me-cats.json').as('catsJSON');

  // stub the two server requests to return your mock data
  // make sure you use the full URL
  cy.route('GET', serverUrl + '/users/me', '@meJSON').as('me');
  cy.route('GET', serverUrl + '3/gallery/r/cats', '@catsJSON').as('cats');

  // trigger the requests
  cy.get('#createSomething').click();

  // wait for both requests to resolve
  cy.wait(['@me', '@cats']);

  // then trigger more actions, make assertions, etc...

});

But make sure you use the full URL when defining the route.

Answer 2

I could see that in your question there are no fixtures declared in the before call. I assume that the json files resides in your fixture folder. Please add/correct the example so it has a compile-able code. Also correct the api routes so they have the same behavior (either add the leading forward slash or remove it and correct the visit method). Make sure that the routes are the one that are called on your actual (live) application and you are mocking them correctly (with proper responses). Move the visit in your before method. Remove the wait call because it could hide some errors that needs to be addressed. Check if the page loads on cy.visit() and that all of the necessary 'GET' calls are mocked. If you mock all of your get methods and authenticate properly (if it is applicable) you should see the content that you need. There is only one problem that the test is not written properly and could not find the query selector that you are looking for but this is not part of the question.

Answer 3

You can try any mock server, they let you configure a static MockAPI that will always return what's configured at it.

For personal use i recommend Wiremock as it can be run as a standalone server pretty quickly. Also you can integrate it as part of your maven test goal .

Of course the only point of using this tool over something Cypress already does is maybe that you can save an exisiting API as static, for example you can point it to production, save every result and then re-use it as a test.

Another options:

• JsonServer : Created with for front-end developers who need a quick back-end for prototyping and mocking.
• MockServer : This is an open source mocking framework for HTTP and HTTPS released under the Apache License.