什么是JavaScript的生成器函数在测试模拟中的使用，以及它如何逐步生成模拟数据或状态？

// 模拟一个分阶段返回数据的API服务
function* mockSequentialApiCalls() {
  console.log("Mock API: Fetching user info...");
  yield Promise.resolve({ id: 1, name: 'Alice', email: 'alice@example.com' });

  console.log("Mock API: Fetching user permissions...");
  yield Promise.resolve(['admin', 'editor']);

  console.log("Mock API: Fetching feature config...");
  yield Promise.resolve({ featureA: true, featureB: false });

  console.log("Mock API: All done, subsequent calls might error or be empty.");
  yield Promise.reject(new Error('No more data')); // 模拟后续请求无数据或错误
}

// 在测试中如何使用
// 假设有一个 fetchData 函数被我们模拟
const apiMockGenerator = mockSequentialApiCalls();

// 模拟 fetchData 函数，使其每次调用都从生成器获取下一个值
// 实际测试框架中，这会通过 jest.spyOn().mockImplementation() 或类似方法实现
const mockedFetchData = jest.fn(() => apiMockGenerator.next().value);

// 假设我们测试的组件或函数会调用 mockedFetchData
async function testComponentBehavior() {
  console.log('--- Test Step 1 ---');
  const userInfo = await mockedFetchData();
  console.log('Received user info:', userInfo);
  // 在这里可以断言 UI 或状态是否正确反映了用户信息

  console.log('--- Test Step 2 ---');
  const permissions = await mockedFetchData();
  console.log('Received permissions:', permissions);
  // 断言权限相关的逻辑

  console.log('--- Test Step 3 ---');
  const config = await mockedFetchData();
  console.log('Received config:', config);
  // 断言配置相关的逻辑

  console.log('--- Test Step 4 (Error scenario) ---');
  try {
    await mockedFetchData();
  } catch (error) {
    console.log('Caught expected error:', error.message);
    // 断言错误处理逻辑
  }
}

// 执行模拟测试流程
// testComponentBehavior(); // 在实际测试文件中会被 Jest/Vitest 调用

// src/apiService.js
export const apiService = {
  fetchUserPosts: async (userId) => {
    // 实际的API调用逻辑
    console.log(`Fetching posts for user ${userId} from real API...`);
    return new Promise(resolve => setTimeout(() => resolve([{ id: 101, title: 'Real Post' }]), 500));
  }
};

// --- 测试文件 test/myComponent.test.js ---
import { apiService } from '../src/apiService'; // 导入实际服务
import { render, screen, waitFor } from '@testing-library/react';
import MyComponent from '../src/MyComponent'; // 假设这是我们要测试的组件

// 定义一个生成器来提供模拟响应
function* postApiResponses() {
  console.log("Mock: First call - user 1 posts");
  yield Promise.resolve([
    { id: 1, title: 'Post 1 by User 1' },
    { id: 2, title: 'Post 2 by User 1' }
  ]);

  console.log("Mock: Second call - user 2 posts");
  yield Promise.resolve([
    { id: 3, title: 'Post 1 by User 2' }
  ]);

  console.log("Mock: Third call - no posts (empty array)");
  yield Promise.resolve([]);

  console.log("Mock: Fourth call - API error");
  yield Promise.reject(new Error('Network is down'));
}

describe('MyComponent with Generator Mocks', () => {
  let mockGenerator; // 声明一个变量来存储生成器实例

  beforeEach(() => {
    mockGenerator = postApiResponses(); // 每次测试前重置生成器实例
    // 使用 jest.spyOn 模拟 apiService.fetchUserPosts
    // 关键在于 mockImplementation 返回生成器 .next().value
    jest.spyOn(apiService, 'fetchUserPosts').mockImplementation(
      (userId) => {
        const { value, done } = mockGenerator.next();
        if (done) {
          // 如果生成器已经完成，可以返回一个默认值，或者抛出错误，取决于测试需求
          console.warn("Mock generator exhausted, returning default/error.");
          return Promise.reject(new Error('Mock data exhausted'));
        }
        return value; // 返回生成器 yield 的值
      }
    );
  });

  afterEach(() => {
    jest.restoreAllMocks(); // 清理模拟
  });

  it('should display posts for user 1 on initial load', async () => {
    render(<MyComponent userId={1} />);
    await waitFor(() => {
      expect(screen.getByText('Post 1 by User 1')).toBeInTheDocument();
      expect(screen.getByText('Post 2 by User 1')).toBeInTheDocument();
    });
  });

  it('should display posts for user 2 on subsequent load (e.g., user change)', async () => {
    // 第一次调用在上面的测试中已经模拟过了，这里我们模拟第二次调用
    // 假设 MyComponent 内部会根据 userId 变化再次调用 fetchUserPosts
    render(<MyComponent userId={2} />); // 这会触发第一次模拟
    await waitFor(() => {
      expect(screen.getByText('Post 1 by User 1')).toBeInTheDocument(); // 第一次调用结果
    });

    // 假设组件内部有一个按钮可以切换用户，这里我们直接模拟第二次调用
    // 实际测试中，你可能需要模拟用户交互来触发第二次调用
    const secondCallResult = await apiService.fetchUserPosts(2); // 模拟组件内部再次调用
    await waitFor(() => {
      expect(secondCallResult).toEqual([{ id: 3, title: 'Post 1 by User 2' }]);
    });
  });

  it('should handle API errors gracefully', async () => {
    // 触发前两次模拟，到达错误模拟点
    await apiService.fetchUserPosts(1); // 第一次
    await apiService.fetchUserPosts(2); // 第二次
    await apiService.fetchUserPosts(3); // 第三次 (空数组)

    // 现在调用第四次，应该会抛出错误
    await expect(apiService.fetchUserPosts(4)).rejects.toThrow('Network is down');
    // 在这里你可以断言 UI 是否显示了错误信息
  });
});