Environment
- Operating System: Linux
- Node Version: v18.18.0
- Nuxt Version: 3.10.3
- CLI Version: 3.10.1
- Nitro Version: 2.9.3
- Package Manager: npm@10.2.3
- Builder: -
- User Config: devtools, modules
- Runtime Modules: @nuxt/test-utils/module@3.11.0
- Build Modules: -
Reproduction
https://stackblitz.com/edit/nuxt-starter-eitvto?file=components%2FCounter%2Findex.spec.ts
Describe the bug
When using either renderSuspended or mountSuspended i run into a strange behaviour.
I use mapState / mapGetters to create computed Properties within my component. But during the render phase, these values are undefined.
Surprisingly, when using the debugger, the actual computed returnes the correct value.
To highlight this strage behaviour i have created a method with a console output like this:
<template>
<div>
<p>Count: {{ count }}</p>
<small>Settings: {{ getIncrementedBy(settings) }}</small>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState({
count: (state) => state.count,
incrementBy: (state) => state.settings.incrementBy,
settings: (state) => state.settings,
}),
},
methods: {
increment() {
this.$store.dispatch('increment');
},
getIncrementedBy(settings) {
console.warn('Settings', settings);
console.warn('Actual Settings', this.$store.state.settings)
return settings.incrementBy;
},
},
};
</script>
It is being used directly in the template like so:
<small>Settings: {{ getIncrementedBy(settings) }}</small>
I'd expect settings to have the exact same value as this.$store.state.settings.
But the actual output is:
Settings undefined
Actual Settings { incrementBy: 1 }
This only occures when using renderSuspended or mountSuspended from @nuxt/test-utils/runtime.
When using render from '@testing-library/vue' it's working as expected.
I hope the above makes sense!
Additional context
No response
Logs
stderr | components/CounterUsingMethod/index.spec.ts > CounterUsingMethod - render > should show initial count
Settings { incrementBy: 1 }
Actual Settings { incrementBy: 1 }
stderr | components/CounterUsingMethod/index.spec.ts > CounterUsingMethod - renderSuspended > should show initial count
Settings undefined
Actual Settings { incrementBy: 1 }
[Vue warn]: Unhandled error during execution of render function
at <Index >
at <Anonymous>
at <Anonymous ref="VTU_COMPONENT" >
at <VTUROOT>
❯ components/CounterUsingMethod/index.spec.ts (3) 10014ms
✓ CounterUsingMethod - render (1)
✓ should show initial count
❯ CounterUsingMethod - renderSuspended (1) 10008ms
× should show initial count 10008ms
⠧ [ beforeEach ]
⠹ [ afterEach ]
↓ CounterUsingMethod - mountSuspended (1) [skipped]
↓ should show initial count [skipped]
Environment
Reproduction
https://stackblitz.com/edit/nuxt-starter-eitvto?file=components%2FCounter%2Findex.spec.ts
Describe the bug
When using either renderSuspended or mountSuspended i run into a strange behaviour.
I use mapState / mapGetters to create computed Properties within my component. But during the render phase, these values are undefined.
Surprisingly, when using the debugger, the actual computed returnes the correct value.
To highlight this strage behaviour i have created a method with a console output like this:
It is being used directly in the template like so:
I'd expect
settingsto have the exact same value asthis.$store.state.settings.But the actual output is:
This only occures when using renderSuspended or mountSuspended from
@nuxt/test-utils/runtime.When using
renderfrom'@testing-library/vue'it's working as expected.I hope the above makes sense!
Additional context
No response
Logs