Not reactive in tests? (Vue 3, VueX 4) #252

youri-spendcloud · 2025-02-18T08:33:51Z

When using in Vue 3 with VueX 4, in tests, a mock store doesn't trigger reactive updates eg: a watcher inside an component is not triggered if you change state in a test.

Is this intended?

youri-spendcloud · 2025-02-24T11:47:55Z

@posva Sorry, here is a reproduction

Test

import { describe, test, vi, expect } from 'vitest'
import { Store } from 'vuex-mock-store'
import store from '../../store'
import { mount } from '@vue/test-utils'
import State from '../State.vue'

function createMockStore() {
  return new Store({
    spy: {
      create: (handler) => vi.fn(handler),
    },
    state: {
      count: 0,
    },
  })
}

describe('State', () => {
  test('displays 1 with mock store', async () => {
    const store = createMockStore()

    const wrapper = mount(State, {
      global: {
        mocks: {
          $store: store,
        },
        provide: {
          store,
        },
      },
    })

    wrapper.vm.$store.state.count = 1

    await wrapper.vm.$nextTick()

    console.log(wrapper.html())

    expect(wrapper.text()).toContain('1')

    store.reset()
  })

  test('displays 1 with "real store"', async () => {
    const wrapper = mount(State, {
      global: {
        mocks: {
          $store: store,
        },
        provide: {
          store,
        },
      },
    })

    wrapper.vm.$store.state.count = 1

    await wrapper.vm.$nextTick()
    
    expect(wrapper.text()).toContain('1')

    console.log(wrapper.html())
  })
})

< 79B4 /div>

Component

<script setup lang="ts">
import { useStore } from 'vuex'

const store = useStore()

function increment() {
  store.commit('increment')
}
</script>

<template>
  State component
  <div>
    {{ $store.state.count }}

    <button @click="increment">Increment</button>
  </div>
</template>

<style scoped></style>

Both the stdout's from the tests are displaying different outcomes...

posva added the need reproduction Needs a boiled down reproduction label Feb 18, 2025

posva added the help wanted Extra attention is needed label Feb 24, 2025 — with Volta.net

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Not reactive in tests? (Vue 3, VueX 4) #252

Not reactive in tests? (Vue 3, VueX 4) #252

Uh oh!

Uh oh!

Not reactive in tests? (Vue 3, VueX 4) #252

Not reactive in tests? (Vue 3, VueX 4) #252

Comments

Uh oh!

Uh oh!