test-utils
test-utils copied to clipboard
Mapped State from vuex is undefined
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: [email protected]
- Builder: -
- User Config: devtools, modules
- Runtime Modules: @nuxt/test-utils/[email protected]
- 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]