Testing Vuex reducer/mutation in Vue3/Vue-test-utils

Question

I am in the process of migrating to Vue3, so please excuse me for not just using Pinia. I have a reducer like this:

export const mutations: MutationTree<UiState> = {
  SET_LOADING: (state, loading) => {
    Object.assign(state, loading); // before Vue3 this was Vue.set(...) for reactivity
  },
};

and a test like this

it('should set consultationLoading', () => {
  const state = uiState();
  const loading = true;
  const { SET_LOADING } = mutations;
  SET_LOADING(state, loading);
  expect(state.loading).toBe(loading);
});

Since I cannot use Vue.set() (from import Vue from 'vue';) anymore, I just went with Object.assign as recommended in another post. But the state is not updating in the test.

Estus Flask · Accepted Answer · 2024-02-18 10:11:53Z

2

The purpose of Vue.set is to trigger an update where it won't normally work by assignment due to the limitations of Vue 2, this is no longer a problem in Vue 3.

This is JavaScript and not reactivity problem. Currently it's Object.assign(obj, bool) which does nothing.

Should be:

Object.assign(state, { loading: true })

Which is the same as:

state.loading = true

answered Feb 18, 2024 at 10:11

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phil Over a year ago

Ah yes, normally I just use spread operator instead of Object.assign, I missed the wrong param. Thank you

Collectives™ on Stack Overflow

Testing Vuex reducer/mutation in Vue3/Vue-test-utils

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related