Testing Vue watcher that observes a computed property in VueX: Tips and Tricks

Question

Testing Vue watcher that observes a computed property in VueX: Tips and Tricks

Consider the code snippet below:

import { mapState } from 'vuex';
import externalDependency from '...';

export default {
  name: 'Foo',
  computed: {
    ...mapState(['bar'])
  },
  watch: {
    bar () {
     externalDependency.doThing(this.bar);
    }
  }
}

During testing, I need to verify that externalDependency.doThing() is invoked with the value of bar (obtained from the vuex state) as follows:

it('should call externalDependency.doThing with bar', () => {
  const wrapper = mount(Foo);
  const spy = jest.spyOn(externalDependency, 'doThing');

  wrapper.setComputed({bar: 'baz'});

  expect(spy).toHaveBeenCalledWith('baz');
});

Although Vue test-utils currently supports the use of setComputed method for testing, there are warnings indicating that setComputed will be deprecated soon. I am seeking alternative methods to achieve the same level of testing without relying on setComputed:

https://github.com/vuejs/vue-test-utils/issues/331

javascript vue.js vuex vue-test-utils

Answer 1

Answer №1

When looking to achieve a specific outcome

While conducting tests, my goal is to confirm that externalDependency.doThing() is invoked with the value "bar" (which is sourced from the vuex state) as follows:

(and following a purely unit testing approach), simply trigger a change in the watcher, which essentially functions as a callback. There's no necessity to monitor the watcher for changes when dealing with computed or data value modifications - let Vue handle that for you. Therefore, to modify a watcher within a mounted Vue instance, just execute it like this:

wrapper.vm.$options.watch.bar.call(wrapper.vm)

Here, the term bar refers to the specific watcher you are targeting. This method enables you to test the precise functionality that you intend to verify.

This approach was inspired by a comment found at https://github.com/vuejs/vue-test-utils/issues/331#issuecomment-382037200, within a discussion on a vue-test-utils issue, which you had referenced in a previous inquiry.

Answer 2

When looking to achieve a specific outcome

While conducting tests, my goal is to confirm that externalDependency.doThing() is invoked with the value "bar" (which is sourced from the vuex state) as follows:

(and following a purely unit testing approach), simply trigger a change in the watcher, which essentially functions as a callback. There's no necessity to monitor the watcher for changes when dealing with computed or data value modifications - let Vue handle that for you. Therefore, to modify a watcher within a mounted Vue instance, just execute it like this:

wrapper.vm.$options.watch.bar.call(wrapper.vm)

Here, the term bar refers to the specific watcher you are targeting. This method enables you to test the precise functionality that you intend to verify.

This approach was inspired by a comment found at https://github.com/vuejs/vue-test-utils/issues/331#issuecomment-382037200, within a discussion on a vue-test-utils issue, which you had referenced in a previous inquiry.

Answer 3

Answer №2

The documentation for Vue Test Utils introduces a new method that involves using a simple Vuex store setup:

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'

// To avoid global Vue instance pollution, a localVue is used
const localVue = createLocalVue();
localVue.use(Vuex);

describe('Foo.vue', () => {
  let state;
  let store;

  beforeEach(() => {
    // A new store is created for each test to maintain isolation
    state = { bar: 'bar' };
    store = new Vuex.Store({ state });
  })

  it('should call externalDependency.doThing with bar', () => 
  {
    shallowMount(MyComponent, { store, localVue });
    const spy = jest.spyOn(externalDependency, 'doThing');
    // Update the state to trigger the watch
    state.bar = 'baz';
    expect(spy).toHaveBeenCalledWith('baz');
  });
})

Answer 4

The documentation for Vue Test Utils introduces a new method that involves using a simple Vuex store setup:

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'

// To avoid global Vue instance pollution, a localVue is used
const localVue = createLocalVue();
localVue.use(Vuex);

describe('Foo.vue', () => {
  let state;
  let store;

  beforeEach(() => {
    // A new store is created for each test to maintain isolation
    state = { bar: 'bar' };
    store = new Vuex.Store({ state });
  })

  it('should call externalDependency.doThing with bar', () => 
  {
    shallowMount(MyComponent, { store, localVue });
    const spy = jest.spyOn(externalDependency, 'doThing');
    // Update the state to trigger the watch
    state.bar = 'baz';
    expect(spy).toHaveBeenCalledWith('baz');
  });
})

Answer 5

Answer №3

To update a value directly from the source, such as VueX, you can implement it like this in your store.js:

const state = {
  bar: 'foo',
};
const mutations = {
  SET_BAR: (currentState, payload) => {
    currentState.bar = payload;
  },
};
const actions = {
  setBar: ({ commit }, payload) => {
    commit('SET_BAR', payload);
  },
};

export const mainStore = {
  state,
  mutations,
  actions,
};

export default new Vuex.Store(mainStore);

Next, in your component.spec.js, you would need to follow these steps:

import { mainStore } from '../store';
import Vuex from 'vuex';

//... describe, and other setup functions
it('should call externalDependency.doThing with bar', async () => {
  const localState = {
    bar: 'foo',
  };
  const localStore = new Vuex.Store({
      ...mainStore,
      state: localState,
  });
  const wrapper = mount(Foo, {
    store: localStore,
  });
  const spy = jest.spyOn(externalDependency, 'doThing');
  localStore.state.bar = 'baz';
  await wrapper.vm.$nextTick();
  expect(spy).toHaveBeenCalledWith('baz');
});

Instead of directly updating the state, you can also use the dispatch('setBar', 'baz') method on the store to ensure the mutation takes place correctly.

Note: It's vital to reset your state for each mount (either create a clone or declare it again) to prevent one test from affecting the state for subsequent tests, even if the wrapper was destroyed.

Answer 6

To update a value directly from the source, such as VueX, you can implement it like this in your store.js:

const state = {
  bar: 'foo',
};
const mutations = {
  SET_BAR: (currentState, payload) => {
    currentState.bar = payload;
  },
};
const actions = {
  setBar: ({ commit }, payload) => {
    commit('SET_BAR', payload);
  },
};

export const mainStore = {
  state,
  mutations,
  actions,
};

export default new Vuex.Store(mainStore);

Next, in your component.spec.js, you would need to follow these steps:

import { mainStore } from '../store';
import Vuex from 'vuex';

//... describe, and other setup functions
it('should call externalDependency.doThing with bar', async () => {
  const localState = {
    bar: 'foo',
  };
  const localStore = new Vuex.Store({
      ...mainStore,
      state: localState,
  });
  const wrapper = mount(Foo, {
    store: localStore,
  });
  const spy = jest.spyOn(externalDependency, 'doThing');
  localStore.state.bar = 'baz';
  await wrapper.vm.$nextTick();
  expect(spy).toHaveBeenCalledWith('baz');
});

Instead of directly updating the state, you can also use the dispatch('setBar', 'baz') method on the store to ensure the mutation takes place correctly.

Note: It's vital to reset your state for each mount (either create a clone or declare it again) to prevent one test from affecting the state for subsequent tests, even if the wrapper was destroyed.

Answer 7

Answer №4

In order to effectively manipulate the VueX instance, incorporating a mutator is necessary. Although this may add an additional element to the testing process, it is important to recognize that including VueX in your tests already shifts the existing concept.

Any alterations made to the state in an unexpected manner can lead to deviations in behavior that may not align with the intended usage.

Answer 8

In order to effectively manipulate the VueX instance, incorporating a mutator is necessary. Although this may add an additional element to the testing process, it is important to recognize that including VueX in your tests already shifts the existing concept.

Any alterations made to the state in an unexpected manner can lead to deviations in behavior that may not align with the intended usage.

Testing Vue watcher that observes a computed property in VueX: Tips and Tricks

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Troubleshooting problem with Ajax responseText

Applying REGEX on input text in React Native

What does the error message "Uncaught TypeError: Cannot access property 'style' of an undefined object" mean?

Troubleshooting Vue v-for loop triggering click events on multiple items simultaneously

Transformer Class: An object containing properties that are instances of another class

Incorporating the power of ES6 into a pre-existing website using React

Choose the initial unordered list within a specific division through Jquery

Troubleshooting date range validation in jQuery

The value remains constant until the second button is pressed

Buttoned Up: The Troubling Tale of jQuery and

React/React Hooks: Want to initiate input validation when a user deselects a checkbox

Interactive Thumbnail Selection for HTML5 Video

Is there a way to turn off alerts from Aspx files for HTML and CSS?

Keep going in the for await loop in NodeJS

The JavaScript-rendered HTML button is unresponsive

Adding embedded attributes from a different object

Set the timezone of a Javascript Date to be zero

Is there a specific side effect that warrants creating a new Subscription?

Looking to expand the width of the sub menu to reach the full width of the

Struggling to retrieve information from session storage to pass along to a PHP class