Open mseeley opened 1 month ago
To address the issue where plugin-provided values using Symbol inject keys are inaccessible in tests, despite working at runtime, consider the following steps:
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.
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.
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.
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.
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.
To continue the conversation, mention @dosu.
Environment
Stackblitz:
Build Modules: -
Local:
Build Modules: -
Reproduction
npm run test
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.
nuxtApp.vueApp
undefined
valueHave we done something wrong? Or, missed some big red text that stable symbols are not guaranteed?
Additional context
I see https://github.com/nuxt/test-utils/commit/fb6f3be64ae66ee43fc4724a0a26f16c97b9e35e is testing a similar case.
Oh, I just found https://github.com/nuxt/test-utils/blob/66c58bc3097246dca015aa293a49ecd5fff0dd11/examples/app-vitest-full/plugins/inject-value.ts#L3
Then I found https://github.com/nuxt/test-utils/issues/750.
I wish this was documented. I would have really liked to have been productive for the last hours.
Logs
No response