Testing Pinia with Vitest - Error: [vite-node] Failed to load @pinia/testing

[aabm00]

Hi

I'm trying to figure out how to test Pinia with vitest and I can't get it to work. I have installed the AE to test with vitest and I am following the example of Mocking Pinia but in Javascript

TestingPinia.vue (Te file to test)

<template>
  <div>
    <button @click="increment" class="on-left">INCREMENT</button>
    Count: {{ count }}
  </div>
</template>

<script setup>
// STORES
import { computed } from "vue";
import { useCounterStore } from "src/stores/example-store";

const CounterStore = useCounterStore();

const count = computed(() => CounterStore.counter);

const increment = () => CounterStore.increment();
</script>

example-store.js (Pinia Store)

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
  actions: {
    increment() {
      this.counter++;
    },
  },
});

I have created a composable to add the install-pinia function code but in javascript. Probably here is the error

useMockPinia.js (Composable)

import { config } from "@vue/test-utils";
import { cloneDeep } from "lodash-es";
import { beforeAll, afterAll } from "vitest";
import { createTestingPinia, TestingOptions } from "@pinia/testing";
import { Plugin } from "vue";

export function installPinia(options) {
  const globalConfigBackup = cloneDeep(config.global);

  beforeAll(() => {
    config.global.plugins.unshift(
      // This is needed because typescript will complain othwerwise
      // Probably due to this being a monorepo as this same setup
      // inside a test project did work correctly
      // createTestingPinia(options) as unknown as Plugin,
      createTestingPinia(options)
    );
  });

  afterAll(() => {
    config.global = globalConfigBackup;
  });
}

TestingPinia.test.js (Test for Pinia)

import { installQuasar } from "@quasar/quasar-app-extension-testing-unit-vitest";
import { mount } from "@vue/test-utils";
import { describe, expect, it } from "vitest";

import { installPinia } from "src/composables/useMockPinia";
import { useCounterStore } from "src/stores/example-store";

import TestingPinia from "src/components/02-vue-test-utils/TestingPinia.vue";

installQuasar();
installPinia({ stubActions: false });

describe("store examples", () => {
  it("should increment the counter", async () => {
    const wrapper = mount(TestingPinia);
    const store = useCounterStore();
    expect(wrapper.text()).toContain(0);
    const btn = wrapper.get("button");
    expect(store.increment).not.toHaveBeenCalled();
    await btn.trigger("click");
    expect(store.increment).toHaveBeenCalled();
    expect(wrapper.text()).toContain(1);
    expect(store.counter).toBe(1);
  });
});

The Error I get when run the test is:

FAIL test/vitest/tests/vue-test-utils/TestingPinia.test.js [ test/vitest/tests/vue-test-utils/TestingPinia.test.js ]
Error: [vite-node] Failed to load @pinia/testing
❯ ../../../../../async F:/PROYECTOS/ONFOCO/ONFOCO_LAB/ofc-vitest/src/composables/useMockPinia.js:7:31
❯ ../../../../../async F:/PROYECTOS/ONFOCO/ONFOCO_LAB/ofc-vitest/test/vitest/tests/vue-test-utils/TestingPinia.test.js:8:31

I would appreciate any help to configure correctly Pinia to work with Vitest in Quasar.

Thanks