when i learn vue2 + vitest by vue2 demo, miss this line, and get unexpect result, make me confused

[zhanglolo]

here is component:

<script setup>
import { computed, ref } from "vue";

const counter = ref(0);
const doubleCount = computed(() => counter.value * 2);
</script>

<template>
  <div>
    <div>{{ counter }} * 2 = {{ doubleCount }}</div>
    <button @click="counter += 1">+1</button>
  </div>
</template>

vite.config.js without this line
alias: [{ find: /^vue$/, replacement: 'vue/dist/vue.runtime.common.js' }]

export default defineConfig({
  resolve: {
    alias: {
      "~": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  test: {
    environment: "jsdom",
    //alias: [{ find: /^vue$/, replacement: "vue/dist/vue.runtime.common.js" }],
  },
  plugins: [vue2()],
});

this result is unexpected. after 'click', counter should be 1 and doubleCount should be 2

  test("renders content", async () => {
    const wrapper = mount(HelloWorld);

    expect(wrapper.html()).toMatchInlineSnapshot(`
      "<div>
        <div>0 * 2 = 0</div><button>+1</button>
      </div>"
    `);

    await wrapper.get("button").trigger("click");

    expect(wrapper.html()).toMatchInlineSnapshot(`
      "<div>
        <div>0 * 2 = 0</div><button>+1</button>
      </div>"
    `);
  });

why this is important?

need help

[sheremet-va]

vue test utils uses CJS version of vue. if you don't alias it in your application, Vitest will use ESM version. this is why we have this line in example

[zhanglolo]

thanks for your reply.

---

another problem.
after add alias: [{ find: /^vue$/, replacement: 'vue/dist/vue.runtime.common.js' }]
when i add pinia to this component. config as pinia document.

<script setup>
import { storeToRefs } from "pinia";
import { useCounterStore } from "~/stores/counter.js";
const { counter, doubleCount, increment } = storeToRefs(useCounterStore());
</script>

<template>
  <div>
    <div>{{ counter }} * 2 = {{ doubleCount }}</div>
    <button @click="increment">+1</button>
  </div>
</template>

await wrapper.get("button").trigger("click"); doesn't seem to be working properly, and snapshot not change.

await wrapper.get("button").trigger("click"); it called, but snapshot not change.
🤨 what's wrong here?

  test("renders content", async () => {
    const localVue = createLocalVue();
    localVue.use(PiniaVuePlugin);

    const wrapper = mount(HelloWorld, {
      localVue,
      pinia: createTestingPinia({
        createSpy: vi.fn,
      }),
    });

    const counter = useCounterStore();
    expect(counter.counter).toBe(0);

    await wrapper.get("button").trigger("click");

    expect(counter.increment).toHaveBeenCalledTimes(1);

    expect(wrapper.html()).toMatchInlineSnapshot(`
      "<div>
        <div>0 * 2 = 0</div><button>+1</button>
      </div>"
    `);

    await wrapper.get("button").trigger("click");

    expect(counter.increment).toHaveBeenCalledTimes(2);

    expect(wrapper.html()).toMatchInlineSnapshot(`
      "<div>
        <div>0 * 2 = 0</div><button>+1</button>
      </div>"
    `);
  });

[sheremet-va]

It's possible it is the same error. alias only works for imports inside your project. pinia might import vue from ESM, and not CJS. try adding pinia to test.deps.inline

[zhanglolo]

It's possible it is the same error. alias only works for imports inside your project. pinia might import vue from ESM, and not CJS. try adding pinia to test.deps.inline

I tried inline: [/^pinia$/] and inline: true , both didn't work.

---

And after change assertion to store, i found pinia didn't update itself status. (so snapshot won't update)
From the assertion, increment have been called 1 times, but counter didn't plus one.
when i add a logger in pinia action increment, didn't log anything.
So, is increment actually called? is related to createSpy: vi.fn ?
Looking forward to your reply

  test("renders content", async () => {
    const localVue = createLocalVue();
    localVue.use(PiniaVuePlugin);

    const wrapper = mount(HelloWorld, {
      localVue,
      pinia: createTestingPinia({
        createSpy: vi.fn,
      }),
    });

    const counter = useCounterStore();
    expect(counter.counter).toMatchInlineSnapshot('0');
    expect(counter.doubleCount).toMatchInlineSnapshot('0');

    await wrapper.get("button").trigger("click");
    
    expect(counter.increment).toHaveBeenCalledTimes(1);
    expect(counter.counter).toMatchInlineSnapshot('0');
    expect(counter.doubleCount).toMatchInlineSnapshot('0');
  });

[sheremet-va]

So, is increment actually called? is related to createSpy: vi.fn ?

Yes, actions are stubbed by default: https://pinia.vuejs.org/api/interfaces/pinia_testing.TestingOptions.html#stubactions

[zhanglolo]

So, is increment actually called? is related to createSpy: vi.fn ?

Yes, actions are stubbed by default: https://pinia.vuejs.org/api/interfaces/pinia_testing.TestingOptions.html#stubactions

YESSS!!! config stubActions: false, and everything works as expect!

Thanks for your help! 🥳
May be i should add a demo about this.