vue2 mocked router read/write example

vue-cli-2/src/components/RouterExample.spec.ct.js

@@ -0,0 +1,46 @@
+import { mount } from "@cypress/vue";
+import RouterExample from "./RouterExample.vue";
+
+const mockRoute = {
+  name: "test",
+  query: {
+    myParam: "defaultValue",
+  },
+};
+
+const mockRouter = ({ pushSpy }) => ({
+  push: pushSpy,
+});
+
+const mountComponent = ({ pushSpy }) => {
+  return mount(RouterExample, {
+    mocks: {
+      $route: mockRoute,
+      $router: mockRouter({ pushSpy }),
+    },
+  });
+};
+
+describe("Date Range Selection Popup", () => {
+  let pushSpy;
+  beforeEach(() => {
+    pushSpy = cy.spy();
+    mountComponent({ pushSpy });
+  });
+
+  it("Reads default query param value", () => {
+    cy.get("div").contains("defaultValue").should("exist");
+  });
+  it("Writes new value to mocked router", () => {
+    cy.get("button")
+      .click()
+      .then(() => {
+        expect(pushSpy).to.be.calledWith({
+          name: 'test',
+          query: {
+            myParam: "newVal",
+          },
+        });
+      });
+  });
+});

vue-cli-2/src/components/RouterExample.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="hello">
+
+    <h1>This component reads from and writes to a query param</h1>
+    <div>{{ myParam }}</div>
+
+    <button @click="updateQueryParams">updateQueryParams</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RouterExample",
+  props: {
+    msg: String,
+  },
+  computed: {
+    // Current value of myParam
+    myParam() {
+      return this.$route.query.myParam;
+    },
+  },
+  methods: {
+    // Sets a new value
+    updateQueryParams() {
+      this.$router
+        .push({
+          name: this.$route.name,
+          query: {
+            myParam: 'newVal'
+          },
+        })
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>