test: [Do not merge] Example of failing test with stubbed global provide#1314
test: [Do not merge] Example of failing test with stubbed global provide#1314paulmelero wants to merge 2 commits intonuxt:mainfrom
Conversation
commit: |
📝 WalkthroughWalkthroughA new test case titled "can stub injected values" is added to the test suite. The test mounts a component and overrides an injected value using Vue's provide mechanism, injecting a literal string as VUE_INJECTED_VALUE, then verifies the component renders the stubbed value in its output. Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@examples/app-vitest-full/tests/nuxt/injected-value-component.spec.ts`:
- Around line 31-39: The test is stubbing the wrong provide key: it uses
VUE_INJECTED_VALUE (the injected string) instead of the injection token
CUSTOM_VUE_PLUGIN_SYMBOL that InjectedValueComponent actually injects; update
the mountSuspended call to provide the stub under the CUSTOM_VUE_PLUGIN_SYMBOL
key (not VUE_INJECTED_VALUE) so the component receives the stubbed value when
injected.
| it('can stub injected values', async () => { | ||
| const component = await mountSuspended(InjectedValueComponent, { | ||
| global: { | ||
| provide: { | ||
| [VUE_INJECTED_VALUE]: 'stubbed value', | ||
| }, | ||
| }, | ||
| }) | ||
| expect(component.text()).toContain('stubbed value') |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find the InjectedValueComponent definition
fd -e vue -e ts -e js -path "*/InjectedValueComponent*"Repository: nuxt/test-utils
Length of output: 227
🏁 Script executed:
#!/bin/bash
# Find imports and definitions of VUE_INJECTED_VALUE and CUSTOM_VUE_PLUGIN_SYMBOL
rg -n "VUE_INJECTED_VALUE|CUSTOM_VUE_PLUGIN_SYMBOL" --type ts --type vueRepository: nuxt/test-utils
Length of output: 86
🏁 Script executed:
#!/bin/bash
# Look at the test file to understand imports and context
head -50 examples/app-vitest-full/tests/nuxt/injected-value-component.spec.tsRepository: nuxt/test-utils
Length of output: 1338
🏁 Script executed:
#!/bin/bash
# Find the plugin file that provides the injection
cat examples/app-vitest-full/src/plugins/inject-value.tsRepository: nuxt/test-utils
Length of output: 143
🏁 Script executed:
#!/bin/bash
# Find the component that injects the values
cat examples/app-vitest-full/src/components/InjectedValueComponent.vueRepository: nuxt/test-utils
Length of output: 157
🏁 Script executed:
#!/bin/bash
# List the structure of the examples/app-vitest-full directory
find examples/app-vitest-full -type f -name "*.ts" -o -name "*.vue" | head -20Repository: nuxt/test-utils
Length of output: 1258
🏁 Script executed:
#!/bin/bash
# Search for inject-value plugin file
find examples/app-vitest-full -name "*inject-value*"Repository: nuxt/test-utils
Length of output: 107
🏁 Script executed:
#!/bin/bash
# Search for InjectedValueComponent file
find examples/app-vitest-full -name "*InjectedValueComponent*"Repository: nuxt/test-utils
Length of output: 121
🏁 Script executed:
#!/bin/bash
# Read the plugin file
cat examples/app-vitest-full/plugins/inject-value.tsRepository: nuxt/test-utils
Length of output: 700
🏁 Script executed:
#!/bin/bash
# Read the component file
cat examples/app-vitest-full/components/InjectedValueComponent.vueRepository: nuxt/test-utils
Length of output: 391
Use the correct injection token when stubbing provide.
VUE_INJECTED_VALUE is the injected value (a string: 'injected vue plugin value'), not the injection token. The component actually injects using CUSTOM_VUE_PLUGIN_SYMBOL (a Symbol), so providing with [VUE_INJECTED_VALUE] won't override anything. The stubbing won't work and the test will fail.
🛠️ Proposed fix
- global: {
- provide: {
- [VUE_INJECTED_VALUE]: 'stubbed value',
- },
- },
+ global: {
+ provide: {
+ [CUSTOM_VUE_PLUGIN_SYMBOL]: 'stubbed value',
+ },
+ },🤖 Prompt for AI Agents
In `@examples/app-vitest-full/tests/nuxt/injected-value-component.spec.ts` around
lines 31 - 39, The test is stubbing the wrong provide key: it uses
VUE_INJECTED_VALUE (the injected string) instead of the injection token
CUSTOM_VUE_PLUGIN_SYMBOL that InjectedValueComponent actually injects; update
the mountSuspended call to provide the stub under the CUSTOM_VUE_PLUGIN_SYMBOL
key (not VUE_INJECTED_VALUE) so the component receives the stubbed value when
injected.
2 participants
Caution
This PR should only serve as a reproduction for an issue I encountered with the API, but it's not fixing the issue and should not be merged as-is.
I think this is a reproduction for the case reported in #750, #1206, and #1102 (or some of them).
The main question this PR should answer is: How are we supposed to stub the value of a globally provided value?
In my experience, I could make it work by passing a
provideproperty directly to therenderWithNuxtmethod (forcing the types), but it is inconsistent with the API used by tools like Vue Test Utils.Failing test
https://github.com/nuxt/test-utils/actions/runs/15411633006/job/43364731048?pr=1314
Screensots