解决React Testing Library中异步UI更新的测试挑战

// App.tsx 或 Home.tsx
import React, { useEffect, useState } from 'react';

interface TodoItem {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

interface TodosState {
  all: TodoItem[];
  searched: TodoItem[] | null;
}

function Home() {
  const [todos, setTodos] = useState<TodosState>({ all: [], searched: null });
  const [search, setSearch] = useState<string>('');

  // Effect 1: 首次加载时从API获取所有todos
  useEffect(() => {
    fetch("some url todos") // 实际应用中应替换为真实API地址
      .then((response) => response.json())
      .then((response: TodoItem[]) => { 
        setTodos((prevTodos) => ({ ...prevTodos, all: response }));
      })
      .catch((e) => console.error(e)); 
  }, []);

  // Effect 2: 当搜索关键词'search'变化时，过滤todos
  useEffect(() => { 
    setTodos((prevTodos) => ({
      ...prevTodos,
      searched: search
        ? prevTodos.all.filter((item) => 
            item.title.toLowerCase().includes(search.toLowerCase())
          )
        : null,
    }));
  }, [search]); // 依赖于 search 状态

  const handleOnChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value); // 更新搜索关键词状态
  };

  return (
    <div>
      <div className="search-container">
        <input
          className="search"
          value={search}
          onChange={handleOnChangeInput}
          placeholder="Search todo..."
          data-testid="search"
          type="text"
        />
      </div>
      <div className="todos" data-testid="todos">
        {(todos.searched && todos.searched.length > 0
          ? todos.searched
          : todos.all // 如果没有搜索结果或未搜索，显示所有todos
        ).map(({ title, id }) => (
          <p key={id} data-testid="todo">
            {title}
          </p>
        ))}
      </div>
    </div>
  );
}

export default Home;

// Home.test.tsx
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom'; // 假设 Home 组件使用了路由
import Home from './Home'; // 假设组件文件名为 Home.tsx

const mockResponse = [
    { userId: 1, id: 1, title: "Todo S", completed: false },
    { userId: 1, id: 2, title: "Todo A", completed: true },
    { userId: 1, id: 3, title: "Another Todo", completed: false },
];

beforeEach(() => {
    // 模拟全局的 fetch API
    jest.spyOn(global, "fetch" as any).mockResolvedValue({
        json: () => Promise.resolve(mockResponse), // 确保返回一个 Promise
    });
});

afterEach(() => {
    jest.restoreAllMocks(); // 每次测试后恢复 mock
});

it("should filter todos based on search input", async () => {
    render(
      <MemoryRouter>
        <Home />
      </MemoryRouter>
    );

    // 1. 等待初始数据加载和渲染
    // 由于 fetch 是异步的，组件需要时间来获取数据并更新UI。
    // 使用 findAllByTestId 会等待元素出现。
    await screen.findAllByTestId("todo"); 

    // 2. 模拟用户输入
    const searchInput = screen.getByTestId("search");
    fireEvent.change(searchInput, {
      target: { value: "A" }, // 输入关键词 "A"
    });

    // 3. 立即断言（这里是问题所在）
    // const todos = await screen.findAllByTestId("todo"); // 错误做法，可能未及时更新
    // expect(todos).toHaveLength(1); // 此时 UI 可能仍显示所有 todos
});

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import Home from './Home';

// ... beforeEach, afterEach 和 mockResponse 保持不变 ...

it("should filter todos based on search input", async () => {
    render(
      <MemoryRouter>
        <Home />
      </MemoryRouter>
    );

    // 1. 等待初始数据加载和渲染
    // 确保组件已从mock的fetch中获取数据并显示。
    // findAllByTestId 会等待至少一个匹配的元素出现。
    await screen.findAllByTestId("todo"); 

    // 2. 模拟用户输入
    const searchInput = screen.getByTestId("search");
    fireEvent.change(searchInput, {
      target: { value: "A" }, // 输入关键词 "A"
    });

    // 3. 使用 waitFor 等待 UI 更新并执行断言
    // waitFor 会持续检查其回调函数，直到其中的断言成功。
    await waitFor(() => {
      // 在这里重新查询 DOM，因为之前的元素可能已经变化或被移除
      const todos = screen.getAllByTestId("todo"); 
      expect(todos).toHaveLength(1); // 现在断言将会在 UI 更新后执行
      expect(todos[0]).toHaveTextContent("Todo A"); // 进一步验证内容
    });
});