1
  • 我们正在开发一个 react + typescript 项目并尝试使用 cypress实现单元测试。
  • 我有一个名为的组件,其中调用GettingStartedForm了两个 APIcomponentDidMount
  1. Create API
  2. Get API- 创建成功后调用。
  • 我们正在尝试模拟两个 API 调用,但Get API调用没有被模拟。

这是组件,

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,
      );
      ...
  }

这是我的测试,

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>);
    ...
  });
}); 

和控制台消息在这里

在此处输入图像描述

我们在这里缺少什么吗?非常感谢任何帮助。

4

0 回答 0