How to manually update vue computed property in test

Question

I have a component Foo with Vuex binding mockedVuexBinding (which is essentially a computed prop).

I want to keep tests simple and don't want to mock the whole store. All vuex bindings I just replaced with computed stubs in test, like this:

const wrapper = shallowMount(Foo, {
  computed: {
    mockedVuexBinding: () => 'foo'
  }
}

But then It turns out that I need to test some behavior from Foo, which relays on change of computed property. So I want to update my computed with a value and test how component reacts on it (e.g. emits new value).

There is no such method as setComputed by analogy with wrapper.setProps or wrapper.setData, so how can I do it? How to replace a mocked computed value with different value?

Answer 1

As usual we can mock everything, in order to mock behavior when computed value changes during test we can do the following:

const wrapper = mount(Component, {
  data() {
    return {
      computedSwitcher: false
    };
  },
  computed: {
    someComputed: {
      get() {
        return this.computedSwitcher;
      },
      set(val) {
        this.computedSwitcher = val;
      }
    }
  }
});

And then when we need to change computed during test we do:

wrapper.vm.someComputed = true;

In other words we link computed to a mocked computedSwitcher that doesn't exist in a real component just for the purpose of testing to mock computed behavior.

One thing to remember, if computed value triggers re-rendering and we want to check something connected to this, after changing computed, also call

await wrapper.vm.$nextTick();