N
Nuxt•3w ago
nath_an_v

CANNOT RESOLVE #app & #imports from vitest into my nuxt-module

Hello everyone, i'm recently working on my own nuxt-module. And I want to add some tests. But I've some imports from "#imports" or "#app" (like useNuxtApp) into my nuxt module, and these type of imports raised some errors when i'm running tests. I tryied to add some alliases into my vitest.config.ts, but nothing changed.
2 Replies
kapa.ai
kapa.ai•3w ago
Hi @nath_an_v. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand your frustration with resolving #app and #imports aliases in your Nuxt module tests. This is a common issue when testing Nuxt modules with Vitest. Based on the knowledge sources, there are a few approaches to handle this: Use mockNuxtImport for auto-imports The recommended way to handle Nuxt auto-imports in tests is to use mockNuxtImport from @nuxt/test-utils/runtime: 
import { mockNuxtImport } from '@nuxt/test-utils/runtime'

// Mock useNuxtApp or any other auto-import
mockNuxtImport('useNuxtApp', () => {
  return () => {
    // Return a mock implementation
    return { 
      // Mock the properties/methods you need
    }
  }
})

// Then run your tests
import { mockNuxtImport } from '@nuxt/test-utils/runtime'

// Mock useNuxtApp or any other auto-import
mockNuxtImport('useNuxtApp', () => {
  return () => {
    // Return a mock implementation
    return { 
      // Mock the properties/methods you need
    }
  }
})

// Then run your tests
This approach is specifically designed for mocking Nuxt's auto-import functionality in tests Nuxt Testing Documentation. Set up the Nuxt testing environment Make sure you've properly set up the Nuxt testing environment: 1. Install the required dependencies: 
npm i --save-dev @nuxt/test-utils vitest @vue/test-utils happy-dom
npm i --save-dev @nuxt/test-utils vitest @vue/test-utils happy-dom
2. Add @nuxt/test-utils/module to your nuxt.config.ts (optional): 
export default defineNuxtConfig({
  modules: [
    '@nuxt/test-utils/module'
  ]
})
export default defineNuxtConfig({
  modules: [
    '@nuxt/test-utils/module'
  ]
})
3. Create a vitest.config.ts using defineVitestConfig: 
import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  // any custom Vitest config you require
})
import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  // any custom Vitest config you require
})
4. Make sure your test files use the Nuxt environment by either: - Adding .nuxt. to the test filename (e.g., my-file.nuxt.test.ts) - Adding // @vitest-environment nuxt as a comment in the test file This setup ensures that your tests run in a proper Nuxt environment Nuxt Testing Documentation. Recent issues with alias resolution There have been some recent issues with Nuxt alias resolution, particularly with #app imports. A recent PR (#30148) addressed issues with nuxt and nuxt/app resolutions, which might be related to your problem GitHub PR #30148. Make sure you're using the latest version of Nuxt and its testing utilities, as this might resolve your issue. If you're still experiencing problems, you might need to provide more specific error messages and details about your setup for more targeted assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@887246763700928513> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?