React Testing Library + Vitest + Convex Test?
Can
convex-test be used with Vitest and React Testing Library during unit tests for components?
Docs for convex-test point to examples of testing queries and mutations directly (from within the backend convex directory). Can it also be used to mock component tests which indirectly trigger Convex queries and mutations? Are there best practice examples of this I can see?12 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
Specifically I’m interested in mocking query or mutation failures in order to write unit tests to display error messages.
I haven't tried, but it runs in node so I feel like there has to be a way. But also, not that I'm into mocks generally, but it may be worth just making a one static for your immediate purpose just to keep it simple.
You're right, I may be overcomplicating it! Should probably just try to avoid relying on backend logic when testing component display functionality.
it may be worth just making a one static for your immediate purposeWhat do you mean by this?
Like defining the failure result as a static mock in code, based on the result you expect in production
Potentially slightly out of date but https://stack.convex.dev/testing-react-components-with-convex
Testing React Components with Convex
Oftentimes during testing we want to mock out our backend so we can unit test our UI components without talking to our actual server code.
In this ar...
This is for testing your react components separately from your convex functions -- in theory you could probably wire them up together, but often testing the frontend display logic separate from the backend functions is easier
Ooh I hadn’t seen this article! Thanks @sshader!
I don't see where
ConvexReactClientFake is exposed in convex-helpers, am I missing something?Ah I think this might predate the
convex-helpers npm package -- it's defined outside the npm package but available here https://github.com/get-convex/convex-helpers/tree/main/src/fakeConvexClientGitHub
convex-helpers/src/fakeConvexClient at main · get-convex/convex-hel...
A collection of useful code to complement the official packages. - get-convex/convex-helpers
Ahh right, makes sense!
Thanks 🙂
I just tried using this fake Convex client to test a React hook, and ran into difficulties due to the fact that this fake doesn't simulate the network delay (in the form of
useQuery initially returning undefined). I tried to patch it but the code that it's mocking (the ConvexReactClient) is just too complex for me to grasp sufficiently well for this task, so I gave up.
I'm going to go with my original approach of just mocking the useQuery hook directly, but this feels a lot more brittle. It would be really nice to have an official testing utils for the frontend in convex-test, like y'all have already provided for the backend. Just like the backend testing utils, I think it's a bit of fraught task for users to handle themselves, as it seems like it involves a lot of knowledge of Convex internals to do properly.