传递模拟常量到mockResolvedValue时出现TypeScript ts(2345)错误

为什么TypeScript报错？ #

核心原因是mock数据类型与API函数返回类型不匹配：

• 实际API函数getCuratedPhotos调用client.photos.curated()后，返回的是单个包含照片数组的响应对象（就是你mock数据里带page、per_page、photos字段的那个对象）。
• 但你把mockPhotos定义成了Array<Photos>（数组类型），而mockResolvedValue要求传入的值必须和原函数返回类型完全一致，所以TypeScript抛出了类型不兼容的错误。

为什么数据未加载？ #

因为mock数据类型错误，组件期望接收一个包含photos数组的单个对象，结果收到的是数组，组件无法正确解析数据，自然不会渲染出照片内容。

修复步骤 #

1. 修正mock数据的类型和结构 #

把mockPhotos从数组改成单个Photos对象：

// 模拟常量
export const mockPhotos: Photos = {
    "page": 1,
    "per_page": 10,
    "photos": [
         {
            "id": 15823317,
            "width": 4043,
            "height": 6064,
            "url": "https://www.pexels.com/photo/love-summer-sun-leaf-15823317/",
            "photographer": "Mathilde Langevin",
            "photographer_url": "https://www.pexels.com/@mathilde",
            "photographer_id": 157994802,
            "avg_color": "#9B9887",
            "src": {
                "original": "https://images.pexels.com/photos/15823317/pexels-photo-15823317.jpeg",
                "large2x": "https://images.pexels.com/photos/15823317/pexels-photo-15823317.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
                "large": "https://images.pexels.com/photos/15823317/pexels-photo-15823317.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
                "medium": "https://images.pexels.com/photos/15823317/pexels-photo-15823317.jpeg?auto=compress&cs=tinysrgb&h=350",
                "small": "https://images.pexels.com/photos/15823317/pexels-photo-15823317.jpeg?auto=compress&cs=tinysrgb&h=130",
                "portrait": "https://images.pexels.com/photos/15823317/pexels-photo-15823317.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
                "landscape": "https://images.pexels.com/photos/15823317/pexels-photo-15823317.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
                "tiny": "https://images.pexels.com/photos/15823317/pexels-photo-15823317.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
            },
            "liked": false,
            "alt": ""
        },
        // 其他照片数据...
    ],
    "total_results": 8000,
    "next_page": "https://api.pexels.com/v1/curated/?page=3&per_page=10",
    "prev_page": "https://api.pexels.com/v1/curated/?page=1&per_page=10"
}

2. 调整测试代码，确保mock生效并验证数据加载 #

测试里的mock调用现在类型会匹配，同时要等待数据加载完成后再断言照片渲染：

// test.tsx中的测试代码
test('Photos will load', async () => {
    const mockCuratedPhotos = jest.spyOn(endpoints, 'getCuratedPhotos');
    mockCuratedPhotos.mockResolvedValue(mockPhotos);
    
    render(<Home />)
    
    // 验证基础元素存在
    expect(screen.getByText('Home')).toBeInTheDocument();
    expect(screen.getByTestId('search')).toBeInTheDocument();
    
    // 等待照片加载并验证（用照片实际的alt文本更准确）
    const firstPhoto = await screen.findByAltText('');
    expect(firstPhoto).toBeInTheDocument();
    
    // 清理mock
    mockCuratedPhotos.mockRestore();
})

3. 可选：明确API函数的返回类型 #

为了避免后续类型混淆，可以给getCuratedPhotos明确返回类型：

// 实际API函数
export const getCuratedPhotos = async (page?: number): Promise<Photos | undefined> => {
  const client = createClient(key);
  try {
    if (!page) {
      return await client.photos.curated({ per_page: 10 });
    } else {
      return await client.photos.curated({ per_page: 10, page });
    }
  } catch (e) {
    console.log('error', e);
    return undefined;
  }
}

内容的提问来源于stack exchange，提问作者London804