使用Jest和酶测试更改状态的异步componentDidMount

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? <p>Data loaded: {data}</p> : <p>Loading data...</p>}
      </div>
    );
  }
}

export default MyComponent;

import React from 'react';
import { mount } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should fetch data and update state', async () => {
    const mockData = 'Mock data';
    global.fetch = jest.fn().mockImplementation(() =>
      Promise.resolve({
        json: () => Promise.resolve(mockData),
      })
    );

    const wrapper = mount(<MyComponent />);

    // 等待异步操作完成
    await new Promise(resolve => setImmediate(resolve));

    // 断言状态已更新
    expect(wrapper.state().data).toEqual(mockData);

    // 断言渲染结果
    expect(wrapper.text()).toContain(`Data loaded: ${mockData}`);
  });
});