开玩笑测试 - useFormStatus 不是函数

Question

在 Next.js 14 上使用

useFormStatus

钩子进行简单的测试。它导致错误

TypeError: (0 , _reactdom.useFormStatus) is not a function

一旦我移除

useFormStatus

，测试就通过了。

源文件使用

useFormStatus

:

import { useFormStatus } from "react-dom";

export default function MyComponent(){
    const {pending} = useFormStatus()
    if(pending){
        return null
    }
    return ( <div>some jsx</div>)

}

测试：

it('renders', () => {
    render(<MyComponent />) //error on render
    expect(1).toBe(1)

})

我应该尝试嘲笑

useFormStatus

吗？在 Next 13 中，我相信

useFormStatus

是实验性的，但我相信它现在已经稳定了。

Answer 1

在Next.js 13中，useFormStatus钩子是react-dom包的一部分，但从Next.js 14开始，react-dom似乎不再提供它。

要解决此问题，您有以下几种选择：

1. 模拟 useFormStatus 挂钩：如果您只测试 MyComponent 并且不需要 useFormStatus 的实际功能，则模拟它可能是一个可行的选择。您可以为其创建一个模拟实现。 jest.mock('react-dom', () => ({ __esModule：正确， useFormStatus: jest.fn(), })); 这样，您就可以告诉 Jest 用模拟函数替换 useFormStatus，这应该可以消除测试期间的 TypeError。
2. 使用不同的钩子或方法：如果 useFormStatus 对于您的组件逻辑至关重要并且您需要正确测试它，请考虑它是否仍然在不同的包中可用，或者是否有可以使用的替代钩子。