Unable to mock API call

654 Views Asked by At
  • We are working on a react + typescript project & trying to implement unit testing using cypress.

  • I have a component called GettingStartedForm where two APIs are called on componentDidMount

    1. Create API
    2. Get API - is called once the creation is successful.
  • We are trying to mock both API calls but the Get API call is not getting mocked.

Here is the component,

componentDidMount() {
  this.createMethod();
}
/* Create Method */
createMethod() {
  const contentType = 'application/json';
  const pathAPICreate = '/v1/create/';

  postData(pathAPICreate, contentType, '')
      .then((response:any)=> {
        this.getData();
      }).catch((error:any)=>{
        ...
      });
}
/* Get step data */
async getData() {
  const contentType = 'application/json';
  const pathData = '/v1/data/';
  try {
    const dataResponse = await getCreatedData(
        pathData,
        contentType,
    );
    ...
}

Here is my test,

import GettingStartedForm from '../GettingStartedForm';
import React from 'react';
import {mount} from '@cypress/react';

describe('Onboarding getting started form - step 1', () => {
  beforeEach(() => {
    cy.intercept('POST', '**/v1/create', {data: 'success'}).as('createConsultant');
    cy.intercept('GET', '**/v1/data/', {fixture: 'gettingStartedStepResponse.json'}).as('stepData');
  });
  it('Should render all elements', () => {
    mount(<GettingStartedForm
      nextFormHandler={(e, formStatus) => false}
      previousFormHandler={(e, formStatus) => false}
    ></GettingStartedForm>);
    ...
  });
}); 

and console message here

Error message

Is there something we are missing here?

0

There are 0 best solutions below