Next.js 14中Jest测试useFormStatus报错：不是函数的问题求助

你遇到的TypeError: (0 , _reactdom.useFormStatus) is not a function错误，本质是Jest默认的React DOM模拟环境没有包含useFormStatus的实现——虽然这个钩子在React 18.2+和Next.js 13+已经稳定，但测试环境不会自动提供它的模拟，所以需要手动处理，同时还要注意这个钩子的使用限制。

两种可行解决方案 #

1. 直接Mock useFormStatus钩子 #

在测试文件开头添加mock代码，自定义钩子的返回值以满足测试需求：

// 测试文件顶部
jest.mock('react-dom', () => ({
  ...jest.requireActual('react-dom'),
  useFormStatus: () => ({
    pending: false, // 可根据测试场景修改，比如测试pending状态时设为true
    data: null,
    method: 'POST',
    action: '',
  }),
}));

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

2. 在表单action上下文测试组件 #

useFormStatus的设计要求是必须作为表单action属性指定的组件的子组件使用，否则即使在生产环境也可能出现异常。如果你的组件本来就是为表单action场景设计的，测试时可以模拟这个上下文：

import { act } from 'react-dom/test-utils';

// 模拟一个表单action组件
function MockFormAction({ children }) {
  return children;
}

it('renders in form action context', async () => {
  await act(async () => {
    render(
      <form action={MockFormAction}>
        <MyComponent />
      </form>
    );
  });
  expect(1).toBe(1);
});

额外说明 #

如果使用Next.js官方推荐的测试配置（比如结合@testing-library/react和jest-environment-jsdom），确保jsdom版本足够新（至少支持React 18.2的API），不过即使版本达标，还是需要手动mock或者提供正确的上下文才能让测试通过。

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