Provides with Symbol not available to rendered component

[lucasecdb]

Environment

• Operating System: Darwin
• Node Version: v20.11.0
• Nuxt Version: 3.10.0
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: pnpm@8.14.2
• Builder: -
• User Config: modules, imports, typescript
• Runtime Modules: @nuxt/test-utils/module@3.11.0
• Build Modules: -

Reproduction

https://github.com/lucasecdb/nuxt-context-error-repro

Describe the bug

Provided value in plugin does not reach the component when using a Symbol() as key.

You can check the behavior by running pnpm test in the MRE. If you run the app using pnpm start and go to http://localhost:3006 you can see the "hello world" string correctly.

Additional context

No response

Logs

No response

[marcel-wtfoxtrot]

@lucasecdb

Got the same issue when using vuetify.

Vuetify is using a Symbol internally. Running a test for component which is using a Vuetify Component, the test fails with the following error:

Error: [Vuetify] Could not find defaults instance

Here is a small reproduction repo: https://stackblitz.com/edit/nuxt-starter-7jgbwx?file=vitest.config.ts

[marcel-wtfoxtrot]

FYI @danielroe

I just had a deeper look into this.

I've added a couple of breakpoints and ran vitest.

Here are a couple of findings:

1. All Plugins are available within Init Phase (initApp and setup() of nuxt-root)

2. Plugins seem to be available within setup function of actual component being tested / mounted.

3. Within the actual inject (vue runtime-core) instance.parent.provides is an empty object. Therefore injection fails / throws.

4. I also found that within createApp of vue-test-utils's mounting process provides is also on empty object.

I hope this is helpful on finding the cause of this issue. For now i have to go back to @vue/test-utils.

[danielroe]

This is probably a regression from #726

[marcel-wtfoxtrot]

Thank you for this quick response. Also just found this comment within the examples plugin

// TODO: investigate why `Symbol()` export without global registry doesn't match

https://github.com/nuxt/test-utils/blob/main/examples/app-vitest-full/plugins/inject-value.ts#L1

[harunari0928]

I came up with the ad-hoc solution. Sorry if you already know this.
https://github.com/lucasecdb/nuxt-context-error-repro/pull/1/files

This solution intends that the imported symbol always become same value.

[Nalex75]

I was able to make my plugin work in frontend and to be correctly read by @nuxt/test-utils. Here is my solution for other developers having difficulties with this issue until a more permanent fix has been found.

Before:

export default defineNuxtPlugin((nuxtApp) => {
  const myPlugin = {
    validUUID(uuid) {
      const re = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/
      return re.test(uuid)
    }
  }

  nuxtApp.provide('myPlugin', myPlugin)
})

After:

export default defineNuxtPlugin((nuxtApp) => {
  const myPlugin = {
    validUUID(uuid) {
      const re = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/
      return re.test(uuid)
    }
  }

  const myPluginToUse = {
    install: (app, options) => {
      // inject globaly available method $myPlugin()
      app.config.globalProperties.$myPlugin = myPlugin
    },
  }

  nuxtApp.vueApp.use(myPluginToUse)
})

$myPlugin will now be available at nuxtApp.vueApp.config.globalProperties so it should work as intended in frontend and be available for vitest