React Testing Library测试Task组件失败：无法找到指定data-testid元素

问题核心分析 #

你遇到的测试失败问题，主要源于两个关键错误：

1. 测试Store初始状态的键名不匹配 #

createTestStore中注册的reducer键是tasksArray，但测试代码里传入的初始状态用了tasks作为键名，导致Redux Store的tasksArray状态始终为空数组——不仅初始任务无法渲染，提交新任务后的状态更新也无法被组件正确读取。

2. 异步用户操作未正确等待 #

userEvent的type和click方法是异步的，手动用act包裹无法保证状态更新和DOM渲染完成，必须用await等待操作结束后再执行断言。

修正后的测试代码 #

test("when form is submitted a new task is rendered", async () => { 
  // 修正：初始状态键名改为tasksArray，匹配reducer的注册名
  const initialTasks = [{ id: 1, myTask: "Initial task" }];
  const store = createTestStore({ tasksArray: initialTasks });

  render (
    <Provider store={store}>
      <App />
    </Provider>
  );

  // 新增断言：验证初始任务是否正确渲染，确认Store状态正常
  const initialTask = screen.getByText("Initial task");
  expect(initialTask).toBeInTheDocument();

  const input = screen.getByTestId("text-input");
  const addBtn = screen.getByTestId("add-btn");

  // 修正：用await等待异步操作完成，无需手动调用act
  await userEvent.type(input, "new task");
  await userEvent.click(addBtn);

  // 提交后状态同步更新，直接用getByTestId即可找到元素
  const newTask = screen.getByTestId("task");
  expect(newTask).toBeInTheDocument();
  // 额外断言任务文本是否正确
  expect(screen.getByText("new task")).toBeInTheDocument();
});

可选优化：简化List组件逻辑 #

List组件中tasks && tasks.map的判断多余，因为空数组的map不会渲染任何内容，简化后代码更清晰：

import { selectTasksArray } from "../../redux/tasksSlice";
import { useSelector } from "react-redux";
import Task from "../Task/Task";

export default function List() {
  const tasks = useSelector(selectTasksArray);
  return (
    <section data-testid="list">
      {tasks.map(task => {
        const { id, myTask } = task;
        return (
          <Task id={id} myTask={myTask} key={id} />
        )
      })}
    </section>
  )
}

验证效果 #

修正后，测试会先确认初始任务正常渲染，再执行表单提交操作，等待DOM更新后即可找到带有data-testid="task"的Task组件，测试将通过。

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