React组件Fetch API测试指南：正确模拟JSON数据响应

// Api.tsx (FileUploadPage)
import React, {useEffect, useState} from 'react';

export default function FileUploadPage(){
  const [name, setName] = useState("");
  useEffect(() => {
    fetch('mydata.json')
    .then(res => res.json())
    .then(res => setName(res.name)) // 这里期望res是一个对象，并访问其name属性
    .catch(console.error)  
  }, [])
  return(
    <div>
      <span>Name: {name}</span>
    </div>
  )
}

// 错误的测试模拟示例
import { render, screen, waitFor } from '@testing-library/react';
import App from './App'; // 假设App组件内部使用了FileUploadPage
import React from 'react';

global.fetch = jest.fn();
const mockFetch = fetch as jest.MockedFunction<typeof fetch>;

it('fetch call test (错误示例)', async () => {
  mockFetch.mockResolvedValue({
    json: () => Promise.resolve("bill") // 错误：这里返回的是字符串"bill"，而非对象
  } as any); // 类型断言为any以避免TS错误，但这不是根本解决办法

  render(<App />);
  // 等待UI更新，期望显示"Name: bill"
  await waitFor(() => expect(screen.getByText("Name: bill")).toBeInTheDocument());
});

// 正确的测试模拟示例
import { render, screen, waitFor } from '@testing-library/react';
import App from './App'; // 假设App组件内部使用了FileUploadPage
import React from 'react';

// 在所有测试运行前模拟全局的fetch函数
global.fetch = jest.fn();

// 将模拟的fetch函数进行类型断言，以便使用mockResolvedValue等方法
const mockFetch = fetch as jest.MockedFunction<typeof fetch>;

it('fetch call test (正确示例)', async () => {
  // 模拟fetch调用，使其返回一个Promise，该Promise解析为一个模拟的Response对象
  mockFetch.mockResolvedValue({
    // 模拟Response对象的json方法，它应该返回一个Promise，解析到预期的JSON数据对象
    json: () => Promise.resolve({ name: "bill" }) // 修正：返回一个包含"name"属性的对象
  } as Response); // 将模拟的Response对象进行类型断言为Response类型

  // 渲染包含Fetch组件的根组件
  render(<App />);

  // 使用waitFor等待异步操作完成和UI更新
  // 期望在文档中找到包含"Name: bill"的文本元素
  await waitFor(() => expect(screen.getByText("Name: bill")).toBeInTheDocument());
});

// Api.tsx (FileUploadPage) - 确保数据访问的健壮性
import React, { useEffect, useState } from 'react';

export default function FileUploadPage() {
  const [name, setName] = useState("");

  useEffect(() => {
    fetch('mydata.json')
      .then(res => res.json())
      .then(data => { // 将解析后的数据命名为data更清晰
        if (data && typeof data === 'object' && 'name' in data) { // 增加健壮性检查
          setName(data.name);
        } else {
          console.warn("Fetched data does not contain a 'name' property or is not an object:", data);
          setName("Unknown"); // 或其他默认值
        }
      })
      .catch(error => {
        console.error("Error fetching data:", error);
        setName("Error"); // 错误处理
      });
  }, []); // 依赖数组为空，表示只在组件挂载时运行一次

  return (
    <div>
      <span>Name: {name}</span>
    </div>
  );
}