Jest cannot test form actions

[Dinika]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP PREEMPT_DYNAMIC Thu Jul 27 20:01:18 UTC 2023
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.10
      eslint-config-next: 13.4.10
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: standalone

Which area(s) of Next.js are affected? (leave empty if unsure)

Jest (next/jest)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/Dinika/nextjs-serveractions-jest

To Reproduce

git clone https://github.com/Dinika/nextjs-serveractions-jest.git
cd nextjs-serveractions-jest
yarn
yarn test

Describe the Bug

While I am able to test component that call server actions (by using the action prop on form element), I am not able to test that a given server action was called or that the form was submitted. I get the following error:

  console.error
    Warning: Invalid value for prop `action` on <form> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior 
        at form
        at Home

 FAIL  app/Home.test.tsx
  Home
    ✓ WORKS - Tests that do not submit form work (62 ms)
    ✕ DOES NOT WORK - Tests that check server action is called dont work (15 ms)

  ● Home › DOES NOT WORK - Tests that check server action is called dont work

    expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

      26 |         const formEl = container.querySelector('form');
      27 |         formEl.dispatchEvent(new Event('submit'));
    > 28 |         expect(spy).toHaveBeenCalled();
         |                     ^
      29 |     });
      30 |
      31 | });

      at Object.toHaveBeenCalled (app/Home.test.tsx:28:21)

Expected Behavior

It should be possible to test that the form was submitted.

Which browser are you using? (if relevant)

firefox

How are you deploying your application? (if relevant)

No response

[Fredkiss3]

I think you may need to install experimental version of react for it to work. Then again, the story around testing with app router is not yet complete so it may also not work.

[mongolyy]

I think you may need to install experimental version of react for it to work.

Thanks for the comment. Thanks to you I was able to make the test work as intended.

It worked with experimental react and react-dom, but even with canary, the test worked as intended in my environment.

Since canary uses code closer to the next version, it may be better to use canary if it works here. https://react.dev/community/versioning-policy#canary-channel

[BryanAM]

I have the same error for a form action on a component when testing in JEST.

console.error
Warning: Invalid value for prop `action` on <form> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior 

Operating System:

      Platform: MacOS
      Sonoma 14.1.2
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
    Relevant Packages:
      next: 14.0.1
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6

[iugmali]

Same isse here, running from Ubuntu 22.04.

console.error
    Warning: Invalid value for prop `action` on <form> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior 

Node and npm versions:

Node: 20.9.0
npm: 10.2.5

Relevant packages:

next: 14.0.1
react: 18.2.0
react-dom: 18.2.0

@testing-library/jest-dom: 6.1.5
@testing-library/react: 14.1.2
jest: 29.7.0
typescript: 5.2.2

[Ruffeng]

I am facing the same issues.

   Platform: MacOS
      Sonoma 14.2.1
    Binaries:
      Node: 21.4.0
      npm: 10.2.4
    Relevant Packages:
      next: 14.1.0
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.3.3

[Kikketer]

Similar here as well, but I had initially tried with Vitest which didn't throw the error seen in the comment: https://github.com/vercel/next.js/issues/54757#issuecomment-1913227606 but the action is never called (per the original bug ticket).

Moving over to Jest it does throw the "action is an invalid prop" error.

So sight differences depending on the test framework you wish to use, but neither actually work.

[chancegraff]

I'm encountering this issue using Next.js out of the box

[Ruffeng]

I had some discussions regarding other problems with the Testing library and NextJS some weeks ago in their repo. They suggested that there's a mismatched version between NextJS envs and test envs. Meanwhile Next is using React Canary, probably the test environment is still in React 18.2. That could explain as well this possible issue. React 19 should solve this issue (if I am not wrong). https://github.com/testing-library/react-testing-library/issues/1209#issuecomment-1948404719

[jthrilly]

I experienced a variation of this issue here: https://github.com/vercel/next.js/issues/64783

The fundamental problem is that next is using an internal version of react that testing libraries (and any other normal node process) won't have access to. It isn't clear at all when the package version of react/react-dom will be resolved, and when the internal one will. You can configure a resolve alias to fix some of your testing scenarios, but it is just a bad design IMO.