如何在vue3组件测试中修改pinia中state的值，并影响到组件？

  • Z时代
  • 2024-02-07
  • 分类：IT

如何在vue3组件测试中修改pinia中state的值，并影响到组件？

使用vue-test-utils对使用pinia的组件进行测试，需要对pinia所存state的值进行修改，但试了很多方法都没有效果。原组件和store文件如下：

// 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" };
    },
});

已经试过下面的方法：

  1. 在测试代码中引入组件内用到的store，并直接进行修改，但改动无法影响到组件；

    // 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. 使用createTestingPinia参数中的initialState，企图覆盖原store的内容，但是同样没有任何效果；

    // 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. 在测试代码中对传入mount函数参数中global.plugins的TestingPinia对象进行操作，但是同样无效；

    // 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. 使用mount函数参数中的global.mocks，把组件内使用到的state用mocks模拟，但这一方法仅对组件里使用setup传入的state有效，而使用mapState传入的则一样没有效果。

    // 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"，
     //但如果组件内的state是通过setup传入的，则是"xxxxx";
    });

请问对于使用mapState传入state的组件，有什么可行的方法做到在测试中改变组件内的state值吗？还是说我的测试思路错了？

回答：

已经使用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");
});

以上是 如何在vue3组件测试中修改pinia中state的值，并影响到组件？ 的全部内容， 来源链接： utcz.com/p/937239.html

回到顶部