airjp73 / rvf

Easy form validation and state management for React and Remix
https://rvf-js.io
MIT License
840 stars 66 forks source link

[Bug]: useActionData cannot be mocked #317

Closed cjoecker closed 3 months ago

cjoecker commented 1 year ago

Which packages are impacted?

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 commented 1 year ago

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

cjoecker commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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

chohner commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

This should be fixed now in 5.1.5.

cjoecker commented 1 year ago

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

cjoecker commented 1 year ago

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 commented 1 year ago

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 commented 3 months ago

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.