Skip to content

Mapped State from vuex is undefined #774

Description

@marcel-wtfoxtrot

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]

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions