ReactJS中包含函数调用的函数的Jest测试

// 需要测试的函数
function fetchData(url) {
  // 调用实际的网络请求函数
  return axios.get(url);
}

// 需要测试的函数调用的函数
function processData(data) {
  // 对数据进行处理
  return data.toUpperCase();
}

// 高阶组件，接受一个组件并返回一个新组件
function withDataFetching(WrappedComponent, url) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: null,
        loading: true,
        error: null
      };
    }

    componentDidMount() {
      // 在组件挂载后进行数据请求
      fetchData(url)
        .then(response => {
          this.setState({
            data: response.data,
            loading: false
          });
        })
        .catch(error => {
          this.setState({
            error: error.message,
            loading: false
          });
        });
    }

    render() {
      const { data, loading, error } = this.state;

      // 将数据和状态作为props传递给被包装的组件
      return (
        <WrappedComponent
          data={data}
          loading={loading}
          error={error}
          {...this.props}
        />
      );
    }
  };
}

// 测试用例
describe('withDataFetching', () => {
  it('fetches data and passes it to the wrapped component', async () => {
    const mockData = 'Hello, World!';
    const mockResponse = { data: mockData };
    const mockFetch = jest.fn().mockResolvedValue(mockResponse);
    axios.get = mockFetch;

    // 创建一个被包装的组件
    const MockComponent = () => <div>Mock Component</div>;

    // 使用高阶组件包装被测试的组件
    const WrappedComponent = withDataFetching(MockComponent, 'https://example.com/data');

    // 渲染被包装的组件
    const wrapper = mount(<WrappedComponent />);

    // 等待异步数据请求完成
    await Promise.resolve();

    // 断言数据被正确传递给了被包装的组件
    expect(wrapper.find(MockComponent).prop('data')).toEqual(mockData);
  });
});