Test fails due to unresolved "@tanstack/react-query" import
I'm trying to run a simple test using Vitest with Wasp (version 0.16.2), but I keep getting this error:
[ Client!] FAIL src/tests/components/AppLayout.test.tsx [ src/tests/components/AppLayout.test.tsx ]
[ Client!] Error: Failed to resolve import "@tanstack/react-query" from ".wasp/out/sdk/wasp/dist/client/test/vitest/helpers.jsx". Does the file exist?
[ Client!] ❯ TransformPluginContext._formatError node_modules/vitest/node_modules/vite/dist/node/chunks/dep-Dyl6b77n.js:49258:41
[ Client!] ❯ TransformPluginContext.error node_modules/vitest/node_modules/vite/dist/node/chunks/dep-Dyl6b77n.js:49253:16
[ Client!] ❯ normalizeUrl node_modules/vitest/node_modules/vite/dist/node/chunks/dep-Dyl6b77n.js:64229:23
[ Client!] ❯ async file:/home/felipe/TodoApp/node_modules/vitest/node_modules/vite/dist/node/chunks/dep-Dyl6b77n.js:64361:39
[ Client!] ❯ TransformPluginContext.transform node_modules/vitest/node_modules/vite/dist/node/chunks/dep-Dyl6b77n.js:64288:7
[ Client!] ❯ PluginContainer.transform node_modules/vitest/node_modules/vite/dist/node/chunks/dep-Dyl6b77n.js:49099:18
[ Client!] ❯ loadAndTransform node_modules/vitest/node_modules/vite/dist/node/chunks/dep-Dyl6b77n.js:51938:27
Even basic tests like expect(true).toBeTruthy(); are failing with the same issue.
Has anyone run into this or know what might be causing it?
11 Replies
Hi @infelipe Gomes. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I can see you're having issues with running tests in your Wasp application due to an unresolved import for "@tanstack/react-query". This is a known issue that can occur when testing React components in Wasp.
The error suggests that Vitest is unable to resolve the "@tanstack/react-query" package when importing from the Wasp testing helpers. This typically happens because of dependency resolution issues in the testing environment.
Based on the knowledge sources, Wasp uses Vitest for testing React applications and provides testing utilities through the
wasp/client/test module. The testing setup includes several libraries like:
- vitest: Unit test framework with native Vite support
- @testing-library/react / @testing-library/jest-dom: Testing helpers
- msw: A server mocking library
Wasp Testing Documentation shows that Wasp has built-in support for testing React components, but there might be some issues as mentioned in their documentation: "Wasp is in beta, so keep in mind there might be some kinks / bugs, and possibly some changes with testing support in the future."
To resolve your issue, you could try:
1. Make sure you're running the tests with wasp test client command rather than directly with Vitest
2. Ensure you're not running wasp test while wasp start is running (as mentioned in the docs)
3. Check if you have the correct dependencies installed in your project
If you're still experiencing issues, I'd recommend reaching out to the Wasp team on their Discord channel as mentioned in their documentation: "If you encounter any issues, reach out to us on Discord and we will make sure to help you out!"
The issue might be similar to what was fixed in previous versions where type dependencies were missing, as seen in this GitHub issue where they had to add specific type packages to resolve similar import problems.
Would you like me to provide an example of how to properly set up a React component test in Wasp?
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @infelipe Gomes, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@kapa.ai Already tried everything you suggested, but I keep having the same issue with the same logs
Let me check the knowledge base for you again. One moment! :books:
Wohooo @infelipe Gomes, you just became a Waspeteer level 1!
----------------------
I understand you're still facing the same issue with the unresolved "@tanstack/react-query" import in your tests despite trying the suggestions I provided.
Based on the knowledge sources, this could be related to dependency installation issues that sometimes occur in Wasp projects. Here are some additional troubleshooting steps you could try:
1. Try running
wasp clean followed by wasp start to reinstall all dependencies. This approach has helped users with similar import resolution issues as mentioned in a Discord thread: Discord support thread.
2. Check if you have multiple React instances installed, which can cause issues with hooks and dependencies. This was mentioned as a potential problem in GitHub issue #1640.
3. Verify that Prisma client is properly initialized. Sometimes Wasp needs to run prisma generate when first building the app, as noted in GitHub issue #427.
4. If you're using custom import aliases like @client or @server, make sure they're properly configured in your tsconfig as discussed in GitHub issue #1415.
If none of these solutions work, this might be a bug in Wasp itself, especially since you're using version 0.16.2 which is relatively recent. In that case, I'd recommend:
1. Filing an issue on the Wasp GitHub repository
2. Reaching out to the Wasp team on their Discord with your specific error logs and project setup
The error specifically mentions "@tanstack/react-query" which is used internally by Wasp for query management, so this appears to be an issue with how the testing environment is resolving Wasp's internal dependencies rather than something you can easily fix in your application code.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @infelipe Gomes, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@infelipe Gomes what version of react-query are you using?
On that note, can you share your
package.json?Hey hey
Sorry for the late reply, folks
So, it seems the problem lies with Mantine (Wasp is innocent)
My package.json is fine, no changes there aside from adding Mantime
Was taking a look at the docs yesterday and Mantine needs a custom render function to wrap the contents with MantineProvider
My bad, yesterday was a rough day at work, and I missed an important detail - wasn't thinking straight
Anyway, I will implement the custom render function later today and it might solve the issue I described
I apologize for the concern
Thank you all!
I'm glad you figured it out 🙂 let us know if we can help with anything else
@kapa.ai is that ok to add a setup file for Vitest or is there another way to add global mocks in Wasp?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the knowledge sources, Wasp doesn't explicitly document a specific way to add a global setup file for Vitest or configure global mocks. However, since Wasp uses Vitest for testing React applications, you should be able to follow standard Vitest practices for setting up global mocks.
Looking at the testing documentation, Wasp provides several testing helpers through the
wasp/client/test module, including:
- renderInContext: For rendering components with the necessary providers
- mockServer: For setting up mock servers
- mockQuery and mockApi: For mocking queries and API endpoints
Testing Your React App shows that Wasp includes Vitest and related testing libraries out of the box.
For your specific question about adding a global setup file, it should be fine to add one since Wasp passes all arguments after wasp test client directly to the Vitest CLI. As mentioned in the docs:
All arguments after wasp test client are passed directly to the Vitest CLI, so check out their documentation for all of the options.
This means you could create a setup file and reference it using Vitest's standard configuration options when running tests.
If you're looking to add global mocks specifically for Wasp's operations or APIs, you might want to create a helper file that uses the mockServer, mockQuery, and mockApi utilities that Wasp provides, and then import that helper in your test files.
For example, you could create a testSetup.js file with common mocks and then import it in your test files where needed.
If you continue to experience issues with the "@tanstack/react-query" import error mentioned earlier, adding a setup file might not resolve that particular problem, as it appears to be related to dependency resolution within Wasp's generated code.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @infelipe Gomes, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?