如何使用jest和酶在reactJs中使用fetch调用构建测试用例

npm install --save-dev jest enzyme enzyme-adapter-react-16 enzyme-to-json

// api.js

export const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};

// MyComponent.js

import React, { useState, useEffect } from 'react';
import { fetchData } from './api';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchDataFromApi = async () => {
      const result = await fetchData();
      setData(result);
    };

    fetchDataFromApi();
  }, []);

  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default MyComponent;

// MyComponent.test.js

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
import { fetchData } from './api';

jest.mock('./api', () => ({
  fetchData: jest.fn(),
}));

describe('MyComponent', () => {
  it('should render loading message initially', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('p').text()).toEqual('Loading...');
  });

  it('should render data after successful API call', async () => {
    const mockData = [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
    ];

    fetchData.mockResolvedValue(mockData);

    const wrapper = shallow(<MyComponent />);
    await fetchData();

    expect(wrapper.find('li')).toHaveLength(2);
    expect(wrapper.find('li').at(0).text()).toEqual('Item 1');
    expect(wrapper.find('li').at(1).text()).toEqual('Item 2');
  });
});

npm test