如果調用 Luxon 函數，使用 React 測試庫測試 Luxon Datetime 會導致錯誤

Question

我找不到這個問題的答案所以如果重復請刪除。

我有使用 React Hook 形式 (7.22.5) 和 Luxon (2.3.1) 的 React (17.0.26) 組件。

這是組件定義本身是這樣的（無法提供完整的組件代碼）：

const CreateAppointmentForm = () =>{

  const currentDate = Datetime.now();

 const form = useForm<FormSchema>({
    resolver: (values, ...rest) => formSchema(values as FormSchema, ...rest),
    defaultValues: {
      endTime: currentDate.plus({ minute: 15 }),
      startTime: currentDate,
    },
  });
}
  const starTime = watch('startTime');
  const endTime = watch('endTime');
  const duration = endTime.diff(starTime, 'minutes').minutes;

return <div>{duration}</div>
}

當我嘗試使用 React 測試庫運行測試以僅測試組件時，出現以下錯誤：錯誤：未捕獲 [類型錯誤：endTime.diff 不是函數]

如果我記錄 object，我可以看到一個有效的日期時間 object（但它似乎缺少一些屬性），如下圖所示：

我也在使用 Typescript，node 的版本是 16.16.0。

Answer 1

React 鈎子形式只處理字符串。

Date object 使用 RHF 的原因是因為它在內部調用 object 上的toString和Symbol(Symbol.toPrimitive)方法。

不是原始問題的一部分，但是如果你想讓 RHF 處理復雜的對象，那么只需重寫這些方法。

通過定義它們，創建一個新的 class，或者通過使用代理。