如何测试通过Redux管控、onChange时dispatch动作的受控Input组件？

当前测试思路的问题 #

• 你在test函数内重复执行了render(<AddTodoForm/>)，而beforeEach已经默认在每个测试用例执行前完成了渲染操作，属于冗余代码，可以直接删除。
• 整体测试逻辑方向是对的，不需要大改。

实现校验的两种方案 #

方案1：直接校验输入框值（最常用，符合用户侧行为测试逻辑） #

触发change事件后，直接断言输入框的value属性即可，因为你的输入是受控组件，Redux状态更新后组件会自动重渲染同步值：

// 补上校验代码
expect(input).toHaveValue("NEW TODO");

调整后的完整测试代码：

import { render, screen, fireEvent } from "../../../test/test-utils";
import AddTodoForm from "../AddTodoForm";

beforeEach(() => {
  render(<AddTodoForm/>);
});

test("AddTodoForm updated input value", () => {
  // 更推荐用screen的语义化查询方式，比直接操作container更稳定
  const input = screen.getByRole('textbox');
  expect(input).toBeInTheDocument();
  fireEvent.change(input, { target: { value: "NEW TODO" }});
  // 直接断言输入框值
  expect(input).toHaveValue("NEW TODO");
});

注：用screen.getByRole('textbox')查询输入框比直接调用DOM方法的兼容性更好，只要输入框的语义没改，就算页面结构调整也不会导致测试失效

方案2：同时校验Redux状态更新（更严谨，可确认action dispatch逻辑正常） #

如果你的自定义render支持返回store实例，或者可以在测试中单独导入测试用的store，可以同步校验Redux内部状态是否更新：

// 假设你已导入测试用的store实例
test("AddTodoForm updates redux state and input value", () => {
  const input = screen.getByRole('textbox');
  fireEvent.change(input, { target: { value: "NEW TODO" }});
  // 校验输入框值
  expect(input).toHaveValue("NEW TODO");
  // 校验Redux状态
  expect(store.getState().app.addTodoForm.title).toBe("NEW TODO");
});

注意事项 #

• 要确保你测试用的Redux store是每个测试用例独立的，或者每次beforeEach都会重置store的初始状态，避免不同测试用例之间的状态互相污染导致测试结果不准。
• 如果执行断言时提示值不对，可以用waitFor包裹断言，避免异步更新的问题（你的逻辑是同步dispatch更新，正常不需要加，碰到异步场景再使用即可）：

  import { waitFor } from '@testing-library/react';
  // ...
  await waitFor(() => {
    expect(input).toHaveValue("NEW TODO");
  })
  

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