测试React组件异步状态更新与搜索过滤功能

import React, { useState, useEffect } from 'react';

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

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

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

  // 模拟数据获取
  useEffect(() => {
    fetch("some url todos") // 实际应用中替换为真实API
      .then((response) => response.json())
      .then((response: TodoItem[]) => {
        setTodos((prevTodos) => ({ ...prevTodos, all: response }));
      })
      .catch((e) => console.error("Error fetching todos:", e));
  }, []);

  // 根据搜索输入过滤待办事项
  useEffect(() => {
    setTodos((prevTodos) => ({
      ...prevTodos,
      searched: search
        ? prevTodos.all.filter((item) =>
            item.title.toLowerCase().includes(search.toLowerCase())
          )
        : null,
    }));
  }, [search, todos.all]); // 依赖 todos.all 确保在 all 数据更新后也能正确过滤

  const handleOnChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value);
  };

  const displayedTodos = todos.searched && todos.searched.length > 0
    ? todos.searched
    : todos.all;

  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">
        {displayedTodos.map((todo) => (
          <p key={todo.id} data-testid="todo">
            {todo.title}
          </p>
        ))}
      </div>
    </div>
  );
};

export default Home;

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import Home from './Home'; // 假设Home组件在同一目录下

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

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

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

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

  // 初始渲染后，可能还未完成数据获取和UI更新
  // const initialTodos = await screen.findAllByTestId("todo");
  // expect(initialTodos).toHaveLength(2); // 这一步可能因为异步渲染而失败或不稳定

  const searchInput = screen.getByTestId("search");
  fireEvent.change(searchInput, {
    target: { value: "A" },
  });

  // 问题所在：fireEvent.change触发状态更新，但组件可能尚未重新渲染以反映过滤后的结果
  const todos = await screen.findAllByTestId("todo"); // 这里的findAllByTestId可能在UI更新前就执行
  expect(todos).toHaveLength(1); // 期望失败，因为可能仍然看到所有待办事项
});

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

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

beforeEach(() => {
  jest.spyOn(global, "fetch" as any).mockResolvedValue({
    json: () => Promise.resolve(mockResponse),
  });
});

afterEach(() => {
  jest.restoreAllMocks();
});

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

  // 1. 等待初始数据加载和渲染完成
  // waitFor会等待直到回调函数中的断言成功
  await waitFor(() => {
    // 确保初始的两个待办事项都已渲染
    expect(screen.getAllByTestId("todo")).toHaveLength(2);
  });

  const searchInput = screen.getByTestId("search");
  fireEvent.change(searchInput, {
    target: { value: "A" },
  });

  // 2. 等待搜索输入后的UI更新
  // 在这里使用waitFor，确保组件在过滤后重新渲染，并且只显示一个待办事项
  await waitFor(() => {
    const todos = screen.getAllByTestId("todo"); // 重新查询DOM
    expect(todos).toHaveLength(1);
    expect(todos[0]).toHaveTextContent("Todo A");
  });

  // 进一步测试清空搜索框
  fireEvent.change(searchInput, {
    target: { value: "" },
  });

  await waitFor(() => {
    const todos = screen.getAllByTestId("todo");
    expect(todos).toHaveLength(2); // 应该恢复显示所有待办事项
  });
});