React Testing Library测试useForm表单验证消息不显示问题排查

我正在为基于useForm钩子结合Yup校验的React表单编写React Testing Library（RTL）测试，测试场景为点击Add按钮提交未填写完整必填项（标题和描述）的表单，验证输入框下方弹出的错误提示。但编写测试代码后，点击按钮执行screen.debug()并未看到错误消息，表单似乎未触发提交，请求排查问题原因。

表单输入片段 #

<div className="Form__title">
  <label className="Form__title--label" htmlFor="title">
    Title
  </label>
  <input
    {...register("title")}
    type="text"
    placeholder="Title..."
    data-testid="titleInput"
  />
  {errors?.title && (
    <p data-testid="titleError">{errors.title.message}</p>
  )}
</div>

测试代码 #

test("throws title must be at least 1 characters", async () => {
  renderWithProviders(<TileForm />);

  const error = "title must be at least 1 characters";

  const addNewIdeaButton = screen.getByText("Add New Idea");
  await userEvent.click(addNewIdeaButton);
  const descriptionInput = screen.getByTestId("descriptionInput");
  await userEvent.type(descriptionInput, "foo");
  const addButton = screen.getByText("Add");
  await userEvent.click(addButton);

  screen.debug();

  expect(screen.getByTestId("titleError")).toBeInTheDocument();
  // expect(screen.getByTestId("titleError")).toHaveValue(error);
});

排查方向 #

• 检查表单提交绑定：确保表单元素正确使用了useForm提供的handleSubmit，比如<form onSubmit={handleSubmit(yourSubmitHandler)}>，没有绑定的话，点击按钮不会触发校验逻辑。
• 验证Yup规则配置：确认title字段的校验规则包含必填和最小长度限制，示例：

  yup.string().required("Title is required").min(1, "title must be at least 1 characters")
  

  规则缺失会导致错误提示不触发。
• 调整测试操作顺序：先点击"Add New Idea"打开表单后，title输入框完全为空，要确认此时表单是否处于可提交状态，是否有阻止默认提交的逻辑。
• 检查useForm的mode设置：useForm默认mode为onSubmit，如果改成了onTouched或onChange，需要先触发title输入框的blur事件（比如点击页面空白处）才会显示错误。
• 确认renderWithProviders的上下文配置：如果TileForm依赖FormProvider，要确保renderWithProviders里正确包裹了FormProvider并传递了有效的form实例。
• 使用waitFor等待异步更新：react-hook-form的错误提示可能是异步更新的，替换直接断言为：

  await waitFor(() => {
    expect(screen.getByTestId("titleError")).toBeInTheDocument();
  });
  

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