Plugin provided through nuxtApp.vueApp values are inaccessible in tests

[mseeley]

Environment

Stackblitz:

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@10.2.3
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

---

Local:

• Operating System: Darwin
• Node Version: v20.11.1
• Nuxt Version: 3.10.3
• CLI Version: 3.10.1
• Nitro Version: 2.8.1
• Package Manager: pnpm@8.15.4
• Builder: -
• User Config: alias, app, components, css, devServer, devtools, experimental, hooks, googleFonts, ignore, i18n, imports, modules, nitro, router, routeRules, postcss, runtimeConfig, telemetry, typescript, vite
• Runtime Modules: @nuxtjs/google-fonts@3.2.0, @nuxtjs/i18n@8.1.1, @nuxt/test-utils/module@3.12.0, @pinia/nuxt@0.5.1
• Build Modules: -

---

Reproduction

• Visit: https://stackblitz.com/edit/github-zqexwa?file=components%2Finject-with-symbol.vue
• Run npm run test
• Observe output
  • A value provided using a string injection key is accessible
  • A value provided using a symbol injection key is not accessible

Describe the bug

We have multiple plugins which provide typed values to our Vue app using Symbol inject keys. This works well at runtime.

At test time these provided values are no longer available to inject.

• Logging demonstrates our plugins are running and providing values to the nuxtApp.vueApp
• Later logging demonstrates components receive an undefined value

Have we done something wrong? Or, missed some big red text that stable symbols are not guaranteed?

Additional context

I see fb6f3be is testing a similar case.

Oh, I just found

test-utils/examples/app-vitest-full/plugins/inject-value.ts

Line 3 in 66c58bc

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

Then I found #750.

I wish this was documented. I would have really liked to have been productive for the last hours.

Logs

No response

[dosubot]

To address the issue where plugin-provided values using Symbol inject keys are inaccessible in tests, despite working at runtime, consider the following steps:

1. Verify Plugin Loading in Tests: Ensure your Nuxt plugin that provides values using a Symbol is correctly loaded during the test environment. This might require configuring your test setup to closely mimic the Nuxt environment or explicitly importing your plugin in a test setup file.

2. Utilize @nuxt/test-utils: This library is designed for testing Nuxt applications and supports mounting components in an environment where Nuxt plugins are loaded. It facilitates testing the integration between your components and the injected values.

3. Consider Mocking the Plugin: If using the plugin directly in your test environment is impractical, you might want to mock the plugin's behavior. This can help isolate your tests from external dependencies.

4. Consistent Symbol Usage: Make sure to use Symbol.for('key') to ensure consistency across different modules or files, as it checks the global Symbol registry and ensures the same Symbol is used everywhere.

5. Explicitly Provide Symbol in Tests: In your test setup, explicitly provide the value associated with the Symbol to Vue's global provide/inject system or the specific component's context you are testing. This mimics the plugin's behavior in your test environment.

Here's a quick example using @nuxt/test-utils:

import { describe, expect, it } from 'vitest'
import { mountSuspended } from '@nuxt/test-utils/runtime'

import { VUE_INJECTED_VALUE } from '~/plugins/inject-value'
import InjectedValueComponent from '~/components/InjectedValueComponent.vue'

describe('InjectedValueComponent', () => {
  it('can use injected values from a plugin', async () => {
    const component = await mountSuspended(InjectedValueComponent)
    expect(component.text()).toContain(VUE_INJECTED_VALUE)
  })
})

This approach ensures your component can access plugin-provided values during tests, similar to runtime behavior. Keep an eye on the related issue in the test-utils repository for any updates or fixes that might directly address your problem.

Details

Sources

• Provides with Symbol not available to rendered component
• Vue provide/inject is not testable in components
• examples/app-vitest-full/plugins/inject-value.ts
• examples/app-vitest-full/tests/nuxt/plugins.spec.ts
• examples/app-vitest-full/tests/nuxt/injected-value-component.spec.ts
• CHANGELOG.md
• src/config.ts
• src/module.ts

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.