Nuxt•10h ago

vitest not working with imports form '#app'

I use vitest for tests and I want to still use '#app' imports like: import { useRuntimeConfig, useRoute, createError, useRequestURL, useFetch } from '#app' Unfortunately I get this error when running tests FAIL tests/composables/useCraftQuery.test.ts [ tests/composables/useCraftQuery.test.ts ] Error: Cannot find module '#app' imported from '/Users/samuel/Documents/b-privat-projekte/a-repos/nuxt-craftcms/src/runtime/composables/useComposables.ts' ❯ src/runtime/composables/useComposables.ts:4:1 2| import { defu } from 'defu' 3| import { getBearerToken, getCurrentSite, getSiteUri } from '../utils/helper' 4| import { useRuntimeConfig, useRoute, createError, useRequestURL, useFetch } from '#app' | ^ 5| import type { UseFetchOptions } from '#app' 6| import { computed, toValue } from '#imports' Caused by: Error: Failed to load url #app (resolved id: #app) in /Users/samuel/Documents/b-privat-projekte/a-repos/nuxt-craftcms/src/runtime/composables/useComposables.ts. Does the file exist? ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-BMIURPaQ.js:35688:17

4 Replies

kapa.ai•10h ago

Hi @Samuelreichoer. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering—Cannot find module '#app' when running Vitest—is due to the fact that Nuxt's auto-imported aliases like #app are only available within a Nuxt runtime environment. By default, Vitest does not provide this environment, so these imports cannot be resolved during testing. To fix this, you need to run your tests in the Nuxt environment provided by @nuxt/test-utils. Here’s how you can do it: 1. Install the required dependencies:

   npm i --save-dev @nuxt/test-utils vitest

   npm i --save-dev @nuxt/test-utils vitest

2. Configure Vitest to use the Nuxt environment.
You can do this in one of two ways:
- Per-file: Add the following comment at the top of your test file:

     // @vitest-environment nuxt

     // @vitest-environment nuxt

- Globally: Set the environment in your vitest.config.ts:

     import { defineVitestConfig } from '@nuxt/test-utils/config'

     export default defineVitestConfig({
       test: {
         environment: 'nuxt'
       }
     })

     import { defineVitestConfig } from '@nuxt/test-utils/config'

     export default defineVitestConfig({
       test: {
         environment: 'nuxt'
       }
     })

This ensures that Nuxt's auto-imports (like #app) are available in your tests, resolving the import errors you’re seeing. 3. (Optional) Use mockNuxtImport to mock specific Nuxt composables if needed:
If you want to mock certain auto-imported composables, you can use the mockNuxtImport helper:

   import { mockNuxtImport } from '@nuxt/test-utils/runtime'

   mockNuxtImport('useRuntimeConfig', () => () => ({ /* mock config */ }))

   import { mockNuxtImport } from '@nuxt/test-utils/runtime'

   mockNuxtImport('useRuntimeConfig', () => () => ({ /* mock config */ }))

For more details, see the official Nuxt documentation on unit testing and mockNuxtImport. Summary:
You must run your tests in the Nuxt environment to use #app imports. Configure Vitest as shown above, and your tests should work as expected with Nuxt's auto-imported composables and utilities. If you follow these steps and still encounter issues, double-check that your test files are using the correct environment and that your dependencies are up to date. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10h ago

<@1065266379382587422> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamuelreichoerOP•10h ago

@kapa.ai How can I provide values in a vitest to mock module options?

kapa.ai•10h ago

Let me check the knowledge base for you again. One moment! :books: Sorry @Samuelreichoer, 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?

Gaming

Programming

vitest not working with imports form '#app'

Did you find this page helpful?