TypeError：无法使用 React hook 表单和 RTL 测试用例中的 React 最新版本读取未定义的属性（读取“取消订阅”）

Question

我们最近升级了我们的React应用程序以使用react-18.3.1版本以及react-hook-formlatest = 7.54.1，但是在运行测试用例时我们开始遇到以下错误：

      42 |                      setSomeState(newValue); // changed to dummy for now
      43 |              })
    > 44 |              return () => subscription.unsubscribe()
         |                                        ^
      45 |      }, [watch])
      46 |      return {
      47 |              nameCount,

      at unsubscribe (src/pages/TestFileName.tsx:44:29)
      at safelyCallDestroy (node_modules/react-dom/cjs/react-dom.development.js:3922:844)
      at commitHookEffectListUnmount (node_modules/react-dom/cjs/react-dom.development.js:3929:331)
      at commitPassiveUnmountInsideDeletedTreeOnFiber (node_modules/react-dom/cjs/react-dom.development.js:4161:525)
      at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (node_modules/react-dom/cjs/react-dom.development.js:4156:24)
      at commitPassiveUnmountEffects_begin (node_modules/react-dom/cjs/react-dom.development.js:4143:2054)
      at commitPassiveUnmountEffects (node_modules/react-dom/cjs/react-dom.development.js:4143:1714)
      at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:4640:360)
      at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:4635:371)
      at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:4625:82)
      at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:4549:209)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:4444:97)
      at flushSyncCallbacks (node_modules/react-dom/cjs/react-dom.development.js:2155:108)
      at flushSync (node_modules/react-dom/cjs/react-dom.development.js:4457:66)
      at ReactDOMRoot.Object.<anonymous>.ReactDOMHydrationRoot.unmount.ReactDOMRoot.unmount [as unmount] (node_modules/react-dom/cjs/react-dom.development.js:4917:1902)
      at Object.unmount (node_modules/@testing-library/react/dist/pure.js:178:12)
      at node_modules/@testing-library/react/dist/pure.js:309:12
      at node_modules/@testing-library/react/dist/act-compat.js:71:24
      at act (node_modules/react/cjs/react.development.js:2194:20)
      at node_modules/@testing-library/react/dist/act-compat.js:70:25
      at node_modules/@testing-library/react/dist/pure.js:308:28
      at node_modules/@testing-library/react/dist/act-compat.js:70:25
      at node_modules/@testing-library/react/dist/pure.js:308:28
      at node_modules/@testing-library/react/dist/pure.js:308:28
          at Array.forEach (<anonymous>)
      at cleanup (node_modules/@testing-library/react/dist/pure.js:304:22)
      at Object.<anonymous> (src/pages/TestFileName.test.tsx:78:10)

TestFileName.tsx 中的示例代码片段：

const [nameCount, setNameCount] = useState(someStateData?.name?.length || 0)

useEffect(() => {
        const subscription = watch((value) => {
            setNameCount(value.name.length);
        })
        return () => subscription.unsubscribe(); // line where it is failing in test
    }, [watch])
    return {
        nameCount
    }
}

PS： 谁能指导一下可能缺少的内容，为什么我们会收到此错误？

Answer 1

来自 react-hook-form 观看文档

当defaultValue没有定义时，watch的第一次渲染会返回undefined，因为它是在register之前调用的。建议在 useForm 中提供 defaultValues 以避免这种行为，但您可以将内联 defaultValue 设置为第二个参数。

您是否为您的

useForm

声明提供了 defaultValues 对象？

const {watch} = useForm({defaultValues})