React Hook Form结合React Testing Library测试失败排查求助

核心问题 #

你的测试用例无法匹配mock响应，本质是实际发送的GraphQL变量结构与mock定义的变量结构不一致：代码里把表单值嵌套进了request对象作为请求变量，但测试中mock的是平级变量，导致Apollo的MockedProvider无法匹配到对应的mock数据。

具体排查与解决步骤 #

1. 确认实际发送的变量结构 #

先搞清楚代码里到底发了什么变量，这是解决问题的关键：

• 在组件的collectFormData函数里，打印调用Validate时传入的变量：

  const collectFormData = (formValues) => {
    const requestVariables = { request: formValues };
    console.log('实际发送的变量:', requestVariables); // 打印看结构
    Validate({ variables: requestVariables });
  };
  

• 或者在测试用例里捕获请求，查看实际参数：

  import { fireEvent } from '@testing-library/react';
  
  test('表单提交请求匹配', async () => {
    // 渲染组件
    const { getByTestId } = render(
      <MockedProvider mocks={mocks}>
        <YourComponent />
      </MockedProvider>
    );
    // 触发提交
    fireEvent.submit(getByTestId('form-submit-btn'));
    // 捕获useLazyQuery的调用参数
    const [lazyQueryCall] = useLazyQuery.mock.calls;
    console.log('测试中实际发送的变量:', lazyQueryCall[1].variables);
  });
  

2. 同步调整mock的变量结构 #

根据实际发送的嵌套结构，修改测试用例中的mock配置，确保variables完全匹配：

// 错误的平级mock（之前的写法）
const mocks = [
  {
    request: {
      query: YOUR_VALIDATION_QUERY,
      variables: { email: 'test@xxx.com', code: '1234' } // 平级结构
    },
    result: { data: { validate: { success: true } } }
  }
];

// 正确的嵌套mock（修改后）
const mocks = [
  {
    request: {
      query: YOUR_VALIDATION_QUERY,
      variables: {
        request: { email: 'test@xxx.com', code: '1234' } // 和实际结构一致的嵌套request
      }
    },
    result: { data: { validate: { success: true } } }
  }
];

3. 检查表单值的传递逻辑 #

确认collectFormData函数是否正确处理了React Hook Forms的表单值：

• 确保handleSubmit传递给collectFormData的是完整的表单值对象，没有被意外解构或修改
• 确认collectFormData里确实是把表单值包裹进了request对象，而不是直接传递平级值

常见误区 #

很多时候是代码里做了变量嵌套封装，但测试时忘记同步更新mock结构，或者误以为useLazyQuery直接接收平级表单值，忽略了代码里的嵌套处理逻辑。只要保证mock的变量结构和实际发送的完全一致，就能匹配到响应。

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