[Bug]: useActionData cannot be mocked

[cjoecker]

Which packages are impacted?

• [X] remix-validated-form
• [X] @remix-validated-form/with-zod
• [ ] @remix-validated-form/with-yup
• [ ] zod-form-data

What version of these packages are you using?

remox-validated-form: 5.0.2

Please provide a link to a minimal reproduction of the issue.

https://codesandbox.io/p/sandbox/react-typescript-forked-vzq65s?file=%2Fsrc%2FApp.test.tsx%3A14%2C24

Steps to Reproduce the Bug or Issue

1. Create a unit test with vitest and testing-library
2. Add ValidatedForm to a component and render it in a test
3. Mock useActionData

Expected behavior

useActionData is moked and the error useActionData must be used within a data router is not shown

Additional context

I know that useActionData is mocked because in the mockImplementation I'm logging something that is shown in the console of the test because I also use the hook in the Demo component. But ValidatedForm is not using the mock and I still don't know why.

[airjp73]

It sounds like you might need to inline the dependency to get this to work like that. (reference). Have you tried that?

[cjoecker]

@airjp73 good point! But after adding the inline dependency configuration, it is still not working. I open an issue in vitest to see if it is coming from the library.

[madmax141]

also running into this issue, any luck @cjoecker ? I also looked into rendering validated form in a remix stub (an experimental testing utility for remix seen used here https://github.com/remix-run/remix/blob/dev/packages/remix-testing/tests/stub-test.tsx) but that also didn't work unfortunately

[cjoecker]

@madmax141 nope. Also still no answer in the Vitest issue :(

[chohner]

Looks like we are seeing this newly in our E2E tests after updating to Remix v2 and remix-validated-forms 5.1.3

Seems to be fixed in 5.1.4 :)

[airjp73]

It seems this error is happening in actual apps too, not just in vitest. It's looking like it's a dependency resolution problem where RVF is pulling in a different version of remix from the rest of the app.

[airjp73]

This should be fixed now in 5.1.5.

[cjoecker]

@airjp73 I updated all dependencies in the codesandbox but I still get the same error 😭

[cjoecker]

I got this answer from the vitest maintainer but I still didn't manage to make it work. Feel free to give it a try.

[cjoecker]

As a workaround for the people still struggling with this, I'm using now the createRemixStub for mocking the useLoaderData and it is working fine.

[airjp73]

RVF v6 has been released 🎉

This should hopefully be addressed in that version. If it's still a problem after upgrading, please feel free to open a new issue.

You can find the documentation here and the migration guide here.