Jest/Vitest unit testing: TypeError: (0 , _reactdom.useFormStatus) is not a function about next.js HOT 5 OPEN

useFormStatus is not available in [email protected] (the version in your package.json). It's available in React Canary/Beta/Experimental chanels. To solve it you can:

• npm i react@canary react-dom@canary
• wait until react@19 is released as stable
• mock useFormStatus until the release.

from next.js.

I get these same types of errors when my tests touch code that contains React.cache. This is included in the internal React version Next is using, but not in the 18.2 release of React itself. It seems like the module resolution that is used by vitest (and presumably jest) isn't the same as whatever Next is doing.

Edit: created an issue for my case of this: #64783

from next.js.

Was this ever resolved ? Got a similar error Error: Uncaught [TypeError: (0 , _reactdom.useFormStatus) is not a function] in a simple jest test.

When I remove uses of useFormStatus in source files, the tests pass.

from next.js.

Thanks. Successfully implemented the first and third option. For the third, which is what I will be using for projects I am currently working:

import { render, screen } from '@testing-library/react';
import Button from './button';
import { useFormStatus } from 'react-dom';

jest.mock('react-dom', () => ({
    useFormStatus: jest.fn(),
}));

describe('Button', () => {
    it('should render label', () => {
        // Arrange
        const label = 'Button';
        (useFormStatus as jest.Mock).mockResolvedValue(true);
        render(<Button type="button" label={label} />);

        // Act and Assertions ...
    });
});

from next.js.

Just to set expectations, the code I posted last night mocking useFormStatus just prevents the error. The test I was originally working on when posting this issue doesn't care about useFormStatus or its parameter values. Later I did try a test where I destructured the mock to set the pending parameter to be true. I could not get this to work. Stepping through the code pending always shows undefined.

// Arrange
const label = 'Button';
(useFormStatus as jest.Mock).mockResolvedValue({ pending: true });
render(
    <form action=""> // 
        <Button
            type="button"
            label={label}
        />
    </form>
);

Have to move along to other priorities, but if I do find a way to make this usable in a test will post here.

from next.js.