1
  • 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

enter image description here

Is there something we are missing here? Any help is highly appreciated.

0 Answers0