How can I modify the value of state in pinia in vue3 component test and affect the component?

[AilurusRP]

Using vue-test-utils to test the component using pinia, I need to modify the value of the state stored in pinia, but I have tried many methods to no avail. The original component and store files are as follows.

// HelloWorld.vue
<template>
    <h1>{{ title }}</h1>
</template>

<script>
import { useTestStore } from "@/stores/test";
import { mapState } from "pinia";

export default {
    name: "HelloWorld",
    
    computed: {
        ...mapState(useTestStore, ["title"]),
    },
};
</script>

// @/stores/test.js
import { defineStore } from "pinia";

export const useTestStore = defineStore("test", {
    state: () => {
        return { title: "hhhhh" };
    },
});

The following methods have been tried.

1. Import the store used within the component to the test code and make changes directly, but the changes cannot affect the component.

// test.spec.js
import { mount } from "@vue/test-utils";
import { createTestingPinia } from "@pinia/testing";
import HelloWorld from "@/components/HelloWorld.vue";
import { useTestStore } from "@/stores/test";

test("pinia in component test", () => {
 const wrapper = mount(HelloWorld, {
     global: {
         plugins: [createTestingPinia()],
     },
 });
 const store = useTestStore();
 store.title = "xxxxx";

 console.log(wrapper.text()) //"hhhhh";
});

2. Using the initialState in an attempt to overwrite the contents of the original store, but again without any effect.

// test.spec.js
import { mount } from "@vue/test-utils";
import { createTestingPinia } from "@pinia/testing";
import HelloWorld from "@/components/HelloWorld.vue";

test("pinia in component test", () => {
 const wrapper = mount(HelloWorld, {
     global: {
         plugins: [createTestingPinia({ initialState: { title: "xxxxx" } })],
     },
 });
 console.log(wrapper.text()) //"hhhhh";
});

3. Modify the TestingPinia object passed to global.plugins in the test code, but again has no effect.

// test.spec.js
import { mount } from "@vue/test-utils";
import { createTestingPinia } from "@pinia/testing";
import HelloWorld from "@/components/HelloWorld.vue";

test("pinia in component test", () => {
 const pinia = createTestingPinia();
 pinia.state.value.title = "xxxxx";
 const wrapper = mount(HelloWorld, {
     global: {
         plugins: [pinia],
     },
 });
 console.log(wrapper.text()) //"hhhhh";
});

4. Use global.mocks to mock the states used in the component, but this only works for the states passed in with setup() in the component, while the ones passed in with mapState() have no effect.

// test.spec.js
import { mount } from "@vue/test-utils";
import { createTestingPinia } from "@pinia/testing";
import HelloWorld from "@/components/HelloWorld.vue";

test("pinia in component test", () => {
 const wrapper = mount(HelloWorld, {
     global: {
         plugins: [createTestingPinia()],
         mocks: { title: "xxxxx" },
     },
 });
 console.log(wrapper.text()) //"hhhhh"
});

[AilurusRP]

This has been resolved using jest.mock().

import { mount } from "@vue/test-utils";
import { createPinia } from "pinia";
import HelloWorld from "@/components/HelloWorld.vue";

jest.mock("@/stores/test", () => {
    const { defineStore } = require("pinia");
    const useTestStore = defineStore("test", { state: () => ({ title: "xxxxx" }) });
    return { useTestStore };
});

test("pinia in component test", () => {
    const wrapper = mount(HelloWorld, {
        global: { plugins: [createPinia()] },
    });
    expect(wrapper.text()).toBe("xxxxx");
});

[ichbinbobby]

How can I manipulate the state of mocked useTestStore in this case? Like changing the title in another test.

[lance-cheng-asus]

This is a issue! I can't use expect() to verify the attribute from pinia store's state.
Mocking entire store should not be an answer here.