Currently, is there a way to mock getters in Vue 2?

Since Vue2.7, any news on this matter ?

Is there a workaround?

@stephanos-square you need to set the state instead, in order to make the getter generate the value you want

@stephanos-square you need to set the state instead, in order to make the getter generate the value you want

Didn't work for me, the state was changed, but the related getters didn't react to that change

@stephanos-square you need to set the state instead, in order to make the getter generate the value you want

Didn't work for me, the state was changed, but the related getters didn't react to that change

Do you have an example repo? It could be something related to the lifecycle of your test case. If you could share the code I can check it

@stephanos-square you need to set the state instead, in order to make the getter generate the value you want

Didn't work for me, the state was changed, but the related getters didn't react to that change

Do you have an example repo? It could be something related to the lifecycle of your test case. If you could share the code I can check it

Here is an abridged version of what I have:

I have a factory:

const factory = () => {
	return mount(myComponent, {
		pinia: createTestingPinia(),
		localVue
	});
};

Then in the tests:

it("Shows the footer button as disabled when loading", async () => {
		wrapper = factory({});
		const loadingStore = useLoadingStore();
		loadingStore._loadingStack = ["loadingContext"];
		console.log(loadingStore._loadingStack , loadingStore.isLoading ) // logs "["loadingContext"], false"
		const footer = wrapper.find('[data-testid="footer"]');
		expect(footer.findComponent(ButtonComponent).classes("disabled")).toBe(true);
});

The console log I inserted yields the _loadingStack state which I can effectively modify, but the resulting computed isLoading checks for the length > 0 of the _loadingStack array, but, as you see, it still returns false. I have tried inserting some nexTicks in the process, but with no results.

What about the code in your component and in the loadingStore? Maybe there's something strange there. Can you share the repo or a (not)working example?

This is a work around for Vue2 with setup store (not tested with option) working like official documentation.
You just have to create a plugin with the following code

import {
  customRef,
  isRef,
  toRaw,
} from 'vue'
import type { ComputedRef, WritableComputedRef } from 'vue'
import {
  PiniaPluginContext,
} from 'pinia'


function isComputed<T>(
  v: ComputedRef<T> | WritableComputedRef<T> | unknown,
): v is ComputedRef<T> | WritableComputedRef<T> {
  return !!v && isRef(v) && 'effect' in v
}

export function WritableComputedPlugin({ store }: PiniaPluginContext) {
  const rawStore = toRaw(store)

  for (const key in rawStore) {
   /**
     * only value in _hmrPayload are isComputed true
     */
    if (rawStore._hmrPayload.getters[key] && isComputed(rawStore._hmrPayload.getters[key])) {
      const originalComputed = Object.assign({}, rawStore._hmrPayload.getters[key])
      const originalFn = originalComputed.effect.getter
      const defaultValue = originalComputed.value
      originalComputed._value = originalComputed.value
      rawStore[key] = customRef((track, trigger) => {
        // override the computed with a new one
        const overriddenFn = () => originalComputed._value

        return {
          get: () => {
            track()
            return originalComputed._value
          },
          set: (newValue) => {
            // reset the computed to its original value by setting it to its initial state
            if (newValue === undefined) {
              originalComputed.effect.fn = originalFn
              originalComputed._value = defaultValue
              originalComputed._dirty = true
            } else {
              originalComputed.effect.fn = overriddenFn
              originalComputed._value = newValue
            }
            // this allows to trigger the original computed in setup stores
            trigger()
          },
        }
      })
    }
  }
}

then add the plugin to your renderer

pinia: createTestingPinia({
        plugins: [WritableComputedPlugin],
      }),

You can now stub your getters result then reset it by passing undefined value.