mocking vue router with global.mocks

Author: Wiriyamu

src/App.vue

@@ -2,20 +2,26 @@
   <button @click="increment">Click</button>
   <div v-if="count % 2 === 0">Count: {{ count }}. Count is even.</div>
   <div v-if="count % 2 !== 0">Count: {{ count }}. Count is odd.</div>
+
+  <div>PostID: {{ postId }}</div>
 </template>
 
 <script>
-import { computed } from "vue";
-import { useStore } from "vuex";
 export default {
-  setup() {
-    const store = useStore();
-    const count = computed(() => store.state.count);
-    const increment = () => {
-      store.commit("increment");
-    };
+  name: "App.vue",
+  computed: {
+    postId() {
+      return this.$route.params.postId;
+    },
 
-    return { count, increment };
+    count() {
+      return this.$store.state.count;
+    },
+  },
+  methods: {
+    increment() {
+      this.$store.commit("increment");
+    },
   },
 };
 </script>

tests/unit/example.spec.js

@@ -17,9 +17,17 @@ const createVuexStore = () => {
 
 function factory() {
   const store = createVuexStore();
+
   return mount(App, {
     global: {
       plugins: [store],
+      mocks: {
+        $route: {
+          params: {
+            postId: "1",
+          },
+        },
+      },
     },
   });
 }
@@ -37,4 +45,9 @@ describe("App", () => {
     await wrapper.find("button").trigger("click");
     expect(wrapper.html()).toContain("Count: 2. Count is even");
   });
+
+  it("render router", async () => {
+    const wrapper = factory();
+    expect(wrapper.html()).toContain("PostID: 1");
+  });
 });