Javascript 如何在reactJS中使用fetch操作测试组件

我有以下组件

import React, { Component } from 'react';

export class SomeComponent extends Component {
  constructor() {
    super();

    this.state = {
      firstName: '',
      lastName: '',
      isDone: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  public render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            firstName:
            <input
              type="text"
              name="firstName"
              placeholder="enter your first name"
              value={this.state.firstName}
              onChange={this.handleInputChange}
            />
          </label>
          <label>
            lastName:
            <input
              type="text"
              name="lastName"
              placeholder="enter your last name"
              value={this.state.lastName}
              onChange={this.handleInputChange}
            />
          </label>
          <div>
            <input type="submit" value="Submit" />
          </div>
        </form>
      </div>
    );
  }

  private handleInputChange(event) {
    const target = event.target;
    const name = target.name;
    const value = target.value;

    this.setState({ [name]: value });
  }

  private handleSubmit(event) {
    event.preventDefault();

    this.setState({ isDone: true });

    const nameMatch = () => {
      return !(this.state.firstName.match('^Cel.*') && this.state.firstName.endsWith('on'));
    };

    if (nameMatch()) {
      alert('Please enter a valid name');
      return;
    }

    if (!this.state.lastName.endsWith('on')) {
      alert('check lastname too');
      return;
    }
    this.getFullName();
  }

  private getFullName() {


    const params = {
      firstName: this.state.firstName,
      lastName: this.state.lastName
    };

    const urlendPoint = `https://github.com/`;

    // (urlendPoint as any).search = new URLSearchParams(params);

    fetch(urlendPoint)
      .then(response => response.json())
      .then(data => data)
      .catch(error => {
        alert('Please check the names and try again');
      });

   ...do something...
  }
}

import React，{Component}来自'React'；
导出类SomeComponent扩展组件{
构造函数（）{
超级（）；
此.state={
名字：''，
姓氏：“”，
isDone：错
};
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleInputChange=this.handleInputChange.bind（this）；
}
公共渲染（）{
返回(
名字：
姓氏：
);
}
私有handleInputChange（事件）{
const target=event.target；
const name=target.name；
常量值=target.value；
this.setState（{[name]：value}）；
}
私人handleSubmit（事件）{
event.preventDefault（）；
this.setState（{isDone:true}）；
常量名称匹配=（）=>{
return！（this.state.firstName.match（“^Cel.*”）&this.state.firstName.endsWith（'on'）；
};
if（nameMatch（））{
警报（“请输入有效名称”）；
返回；
}
如果（！this.state.lastName.endsWith（'on'））{
警报（“也检查姓氏”）；
返回；
}
此参数为.getFullName（）；
}
私有getFullName（）{
常量参数={
名字：this.state.firstName，
lastName:this.state.lastName
};
常量URL端点=`https://github.com/`;
//（urlendPoint，如有）。搜索=新的URLSearchParams（params）；
获取（URL端点）
.then（response=>response.json（））
.然后（数据=>数据）
.catch（错误=>{
警报（'请检查名称并重试'）；
});
…做点什么。。。
}
}

作为单元测试的一部分，在react using Jest and Ezyme中，我有以下测试用例

it('should fetch data correctly', (done) => {
            fetch.mockResponseOnce(JSON.stringify([]));
 let wrapper = shallow(<SomeComponent />).instance();
  expect(wrapper.state.fullName).toEqual([]);
});

it（'应该正确获取数据'，（完成）=>{
fetch.mockResponseOnce（JSON.stringify（[]）；
让wrapper=shallow（）.instance（）；
expect（wrapper.state.fullName）.toEqual（[]）；
});

在这里，我试图模拟fetch操作并测试已定义的getfullName（）函数

执行此操作时，我得到一个错误

Timeout-Async回调没有在jest.setTimeout.Timeout指定的5000ms超时内调用。Timeout-Async回调没有在指定的5000ms超时内调用
通过jest.setTimeout.

---

但我不明白出了什么问题。我应该如何模拟函数，以便模拟获取和测试函数

如何模拟

fetch

以便以后能够

fetch.mockResponseOnce

？您不调用done callback，或者在测试块中使用async wait，或者如果您指定显式完成，则必须调用done，否则测试将无法执行stop@quirimmo-我的问题不是它没有结束，我的问题是，当我运行上述测试时，我没有涵盖整个函数。那么，如何修改测试用例以覆盖整个功能呢？