React Testing Library：测试异步状态更新与搜索过滤的正确姿势

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>('');

  // 1. 初始数据获取
  useEffect(() => {
    fetch("some url todos") // 模拟API调用
      .then((response) => response.json())
      .then((response: TodoItem[]) => {
        setTodos((prevTodos) => ({ ...prevTodos, all: response }));
      })
      .catch((e) => console.error(e));
  }, []);

  // 2. 根据搜索词过滤待办事项
  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(({ title, id }) => (
          <p key={id} data-testid="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'; // 假设组件路径

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

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

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

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

    // 1. 交互：改变搜索输入框的值
    const searchInput = screen.getByTestId("search");
    fireEvent.change(searchInput, {
      target: { value: "A" },
    });

    // 2. 断言：查找过滤后的待办事项
    // 期望这里能立即找到一个待办事项 "Todo A"
    const todos = await screen.findAllByTestId("todo"); // 可能会在这里失败
    expect(todos).toHaveLength(1);
    expect(screen.getByText("Todo A")).toBeInTheDocument();
    expect(screen.queryByText("Todo S")).not.toBeInTheDocument();
  });
});

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 },
];

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

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

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

    // 1. 等待初始数据加载完成并渲染到UI
    // 使用 findByText 等待一个在初始加载后才出现的元素
    await screen.findByText("Todo S"); // 确保 "Todo S" 在DOM中，表明fetch已完成

    // 2. 交互：改变搜索输入框的值
    const searchInput = screen.getByTestId("search");
    fireEvent.change(searchInput, {
      target: { value: "A" },
    });

    // 3. 等待UI根据搜索结果重新渲染
    // 使用 waitFor 来等待一个条件变为真：即DOM中只剩下过滤后的元素
    await waitFor(() => {
      const todos = screen.getAllByTestId("todo");
      expect(todos).toHaveLength(1); // 断言过滤后只剩一个待办事项
      expect(screen.getByText("Todo A")).toBeInTheDocument(); // 确保 "Todo A" 存在
      expect(screen.queryByText("Todo S")).not.toBeInTheDocument(); // 确保 "Todo S" 不存在
    });
  });
});