test-utils icon indicating copy to clipboard operation
test-utils copied to clipboard

Mapped State from vuex is undefined

Open marcel-wtfoxtrot opened this issue 11 months ago • 0 comments

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]

marcel-wtfoxtrot avatar Mar 13 '24 11:03 marcel-wtfoxtrot