Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: useActionData cannot be mocked #317

Open
2 of 4 tasks
cjoecker opened this issue Aug 11, 2023 · 10 comments
Open
2 of 4 tasks

[Bug]: useActionData cannot be mocked #317

cjoecker opened this issue Aug 11, 2023 · 10 comments
Labels
bug Something isn't working

Comments

@cjoecker
Copy link

cjoecker commented Aug 11, 2023

Which packages are impacted?

  • remix-validated-form
  • @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.

@cjoecker cjoecker added the bug Something isn't working label Aug 11, 2023
@airjp73
Copy link
Owner

airjp73 commented Aug 11, 2023

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

@cjoecker
Copy link
Author

@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
Copy link

madmax141 commented Sep 12, 2023

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
Copy link
Author

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

@chohner
Copy link
Contributor

chohner commented Sep 22, 2023

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
Copy link
Owner

airjp73 commented Sep 23, 2023

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
Copy link
Owner

airjp73 commented Sep 25, 2023

This should be fixed now in 5.1.5.

@cjoecker
Copy link
Author

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

@cjoecker
Copy link
Author

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
Copy link
Author

cjoecker commented Nov 2, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants