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 oncomponentDidMount
Create API
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
Is there something we are missing here?