N
Nuxt•2w ago
ivancic_josip

Nuxt test utils and provide/inject

Any idea how to test a component that is using provide and inject, without creating a test only wrapper. This is what I tried, based on the docs https://test-utils.vuejs.org/api/#global-provide 
// in symbols
export const SearchContextKey: InjectionKey<SearchContext> =
  Symbol("SearchContext");

// in test
renderSuspended(SearchResultCard, {
    props: {
      article: { ...article, ...articleData },
    },
    global: {
      provide: {
        [SearchContextKey]: {
          type: 'article'
        }
      }
    }
  });
// in symbols
export const SearchContextKey: InjectionKey<SearchContext> =
  Symbol("SearchContext");

// in test
renderSuspended(SearchResultCard, {
    props: {
      article: { ...article, ...articleData },
    },
    global: {
      provide: {
        [SearchContextKey]: {
          type: 'article'
        }
      }
    }
  });
Vue Test Utils
The official testing suite utils for Vue.js 3
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @ivancic_josip. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To test a component using provide/inject in Nuxt without creating a test-only wrapper, you can use the renderSuspended function from @nuxt/test-utils/runtime along with the global option to provide the necessary context. However, there's a slight modification needed in your approach. Here's how you can do it: 
import { renderSuspended } from '@nuxt/test-utils/runtime'
import { SearchContextKey } from './path-to-your-symbols'
import SearchResultCard from './path-to-SearchResultCard.vue'

// in test
await renderSuspended(SearchResultCard, {
  props: {
    article: { ...article, ...articleData },
  },
  global: {
    provide: {
      [SearchContextKey as symbol]: {
        type: 'article'
      }
    }
  }
});
import { renderSuspended } from '@nuxt/test-utils/runtime'
import { SearchContextKey } from './path-to-your-symbols'
import SearchResultCard from './path-to-SearchResultCard.vue'

// in test
await renderSuspended(SearchResultCard, {
  props: {
    article: { ...article, ...articleData },
  },
  global: {
    provide: {
      [SearchContextKey as symbol]: {
        type: 'article'
      }
    }
  }
});
The key difference is in how you provide the injection key. Since SearchContextKey is a symbol, you need to cast it as symbol when using it as a key in the provide object. This approach is based on the Nuxt Test Utils documentation, which builds upon Vue Test Utils but is specifically tailored for testing Nuxt components. The renderSuspended function allows you to render components that might have asynchronous setup or rely on Nuxt-specific features. Remember that renderSuspended returns a promise, so you need to await it or use it in an async test function. If you encounter any issues with this approach, you might need to ensure that your Nuxt test environment is properly set up as described in the Nuxt documentation on Unit Testing. Citations: Nuxt Documentation - Getting Started - Testing ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@733318860945621052> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?