Setting up Vue computed properties for unit tests with vue-test-utils

You can overwrite the computed option when you mount the component:

const wrapper = mount(Home, {
  computed: {
    loaded() {
      return true
    }
  }
})

But mocking computed is dangerous. You might put your component into a state that it can't be in during production.

In Vue 3 (and it's current partner, Vue Test Utils v2 RC 18), you can still stub the result as @ittus mentioned:

const wrapper = mount(Home, {
    computed: {
        loaded() {
            return true
        }
    }
})

However there is a catch, at least when using the excellent vue-class-component (v8 RC 1).

If you start stubbing one computed property, you have to stub them all. Otherwise, they will come back with undefined as their value.

So in this scenario:

export default class Home extends Vue {
    public get loaded(): boolean {
        return true
    }

    public get tipsy(): boolean {
        return true
    }
}

If you mount it as above, then this is the result:

wrapper.vm.loaded === true       // true
wrapper.vm.tipsy === undefined   // true

However, if you stub both of them when you mount:

const wrapper = mount(Home, {
    computed: {
        loaded() {
            return true
        },
        tipsy() {
            return false
        }
    }
})

Then this is the result:

wrapper.vm.loaded === true    // true
wrapper.vm.tipsy === false    // true

A computed property is an object with a setter and a getter. If we want to overwrite what a computed property returns we need to spy on the getter of it. If we want to overwrite what a computed property sets we need to spy on the setter of it.

In the majority of the cases spying on then getter is enough.

eg:

// mocking the getter
jest.spyOn(wrapper.vm, "getProxyExpectedDataBaseLists", "get")
     .mockReturnValue({
       mockId: {}
     });

OR

// mocking the setter
jest.spyOn(wrapper.vm, "getProxyExpectedDataBaseLists", "set")
     .mockReturnValue({
       mockId: {}
     });