如何解决React Testing Library中函数语句未被覆盖的问题

以下是针对你测试代码中导致函数未被覆盖的问题修复方案：

• Mock函数未传入组件
  你定义的storeComplaintHandler、storeDispositionHandler等mock函数仅在测试代码中声明，并未作为props传递给<ComplaintForm>组件，组件内部实际调用的不是这些mock实例，因此无法触发断言也不会被统计到代码覆盖。需要将mock函数注入到组件props中：

  // 先定义mock函数
  const storeComplaintHandler = jest.fn();
  const storeDispositionHandler = jest.fn();
  const complaintAndDispositionSel = jest.fn();
  
  // 更新defaultProps，注入mock
  const defaultProps = {
    // 保留原有props
    storeComplaintHandler,
    storeDispositionHandler,
    complaintAndDispositionSel
  };
  
  render(
    <Provider store={mockStore()}>
      <ComplaintForm {...defaultProps} />
    </Provider>
  );
  

• waitFor未使用异步等待
  waitFor是异步方法，必须通过await等待其内部断言执行完成，否则测试会同步结束，断言逻辑会被跳过：

  await user.click(complaintDropdown);
  // 给waitFor加上await
  await waitFor(() => expect(storeComplaintHandler).toHaveBeenCalled());
  await waitFor(() => expect(complaintAndDispositionSel).toHaveBeenCalled());
  

• 错误使用queryByTestId查询必存在元素
  queryByTestId用于查询可能不存在的元素（返回null不报错），如果下拉框是组件渲染后必然存在的元素，应该使用getByTestId，它会在元素不存在时直接抛出错误，便于排查渲染问题：

  const complaintDropdown = screen.getByTestId("ddlComplaint");
  

• 点击下拉框不一定触发目标事件
  原生<select>组件的change事件是在选择选项时触发，而非点击下拉容器。如果是原生select，需要模拟选择选项的动作：

  const complaintDropdown = screen.getByTestId("ddlComplaint");
  // 替换为实际的选项值
  await user.selectOptions(complaintDropdown, "complaint-option-value");
  

  如果是自定义下拉组件，需要模拟组件内部的选项点击动作，比如找到下拉选项元素并调用user.click()。

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