Fixing Vue 2 + Vuetify project by adding custom mount command

vue-cli-2/cypress.config.js

@@ -1,15 +1,11 @@
 const { defineConfig } = require("cypress");
-const { startDevServer } = require("@cypress/webpack-dev-server");
+const { devServer } = require("@cypress/webpack-dev-server");
 const webpackConfig = require("@vue/cli-service/webpack.config");
 
 module.exports = defineConfig({
   component: {
-    devServer(cypressDevServerConfig) {
-      return startDevServer({
-        options: cypressDevServerConfig,
-        webpackConfig,
-      });
-    },
+    devServer,
+    devServerConfig: { webpackConfig },
     specPattern: "src/**/*.cy.{js,jsx,ts,tsx}",
   },
 });

vue-cli-2/cypress/support/component.js

@@ -1,9 +1,41 @@
-import "cypress-real-events/support";
+import { mount } from '@cypress/vue';
+import 'vuetify/dist/vuetify.min.css';
+import 'cypress-real-events/support';
+import Vue from 'vue';
+import Vuetify, { VApp } from 'vuetify/lib';
 
-Cypress.Commands.add("vue", () => {
-  return cy.wrap(Cypress.vueWrapper);
+document.head.appendChild(Cypress.$(`<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">`)[0])
+
+Cypress.Commands.add('mount', (component, options = {}) => {
+  // Setup options object
+  options.extensions = options.extensions || {};
+  options.extensions.plugins = options.extensions.plugins || [];
+  options.extensions.components = options.extensions.components || {};
+
+  /* Add any global plugins */
+  Vue.use(Vuetify);
+  const vuetify = new Vuetify({});
+  options.vuetify = vuetify;
+
+  return mount(
+    {
+      render: (h) => {
+        return h(VApp, { vuetify }, [
+          h(component, {
+            vuetify,
+            props: options.propsData,
+            on: {
+              ...options.listeners,
+            },
+            extensions: options.extensions,
+          }),
+        ]);
+      },
+    },
+    options
+  );
 });
 
-Cypress.Commands.add("getBySel", (selector, ...args) => {
+Cypress.Commands.add('getBySel', (selector, ...args) => {
   return cy.get(`[data-test=${selector}]`, ...args);
 });

vue-cli-2/package.json

@@ -23,7 +23,7 @@
     "@vue/cli-service": "~4.5.15",
     "babel-eslint": "^10.1.0",
     "babel-plugin-istanbul": "^6.1.1",
-    "cypress": "https://cdn.cypress.io/beta/npm/10.0.0/circle-10.0-release-c2731890940d40957fe5ac47b000bcb6ebb784a2/cypress.tgz",
+    "cypress": "https://cdn.cypress.io/beta/npm/10.0.0/linux-x64/circle-10.0-release-73e936e28992d5f533a8341a923dd61719bd12d5/cypress.tgz",
     "eslint": "^8.6.0",
     "eslint-plugin-vue": "^8.3.0",
     "html-webpack-plugin": "4",

vue-cli-2/src/components/Card.cy.js

@@ -3,7 +3,7 @@ import Card from "./Card.vue";
 
 describe("CustomCard.vue", () => {
   it("displays the correct title", () => {
-    mount(Card, {
+    cy.mount(Card, {
       propsData: {
         title: "Hello, World!",
       },
@@ -12,17 +12,18 @@ describe("CustomCard.vue", () => {
   });
 
   it("should emit an event when the action v-btn is clicked", () => {
-    mount(Card, {
+    cy.mount(Card, {
       propsData: {
         title: "Hello, World!",
       },
+      listeners: {
+        'action-btn:clicked': cy.spy().as('onActionButtonClicked') 
+      }
     });
 
     cy.get("[data-test='action-button']")
       .click()
-      .vue() // this is a custom Cypress command - located in cypress/support/component.js
-      .then((wrapper) => {
-        expect(wrapper.emitted("action-btn:clicked")).to.have.length(1);
-      });
+      .get('@onActionButtonClicked')
+      .should('have.been.called')
   });
 });

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

@@ -25,4 +25,4 @@
       },
     },
   }
-</script>
+</script>

vue-cli-2/src/components/DatePicker.cy.js

@@ -1,15 +1,7 @@
-import Vuetify from "vuetify";
-import { mount } from "@cypress/vue";
 import DatePicker from "./DatePicker.vue";
 
 describe("DatePicker.vue", () => {
-  let vuetify;
-
-  beforeEach(() => {
-    vuetify = new Vuetify();
-  });
-
-  it("should mount the component", () => {
-    mount(DatePicker, { global: { plugins: [vuetify] } });
-  });
+  it('should render the date picker', () => {
+    cy.mount(DatePicker)
+  })
 });

vue-cli-2/src/components/HelloWorld.cy.js

@@ -1,7 +1,6 @@
-import { mount } from "@cypress/vue";
 import HelloWorld from "./HelloWorld.vue";
 
 it("shows the header", () => {
-  mount(HelloWorld);
+  cy.mount(HelloWorld);
   cy.get("h1").contains("Welcome to Vuetify");
 });

vue-cli-2/src/components/Hover.cy.js

@@ -1,9 +1,8 @@
-import { mount } from "@cypress/vue";
 import Hover from "./Hover.vue";
 
 describe("Hover.vue", () => {
   it("should display the price when the image is hovered over", () => {
-    mount(Hover);
+    cy.mount(Hover);
 
     cy.get(".v-card--reveal").should("not.exist");
     cy.get("[data-test='hover-image']").realHover(); // this is a custom Cypress command - from https://github.com/dmtrKovalenko/cypress-real-events

vue-cli-2/src/components/Parallax.cy.js

@@ -1,20 +1,19 @@
-import { mount } from "@cypress/vue";
 import Parallax from "./Parallax.vue";
 
 describe("Parallax.vue", () => {
   it("the background image should move as the page is scrolled", () => {
-    mount(Parallax);
+    cy.mount(Parallax);
 
     cy.getBySel("parallax").within(() => {
       cy.get(".v-parallax__image")
         .should("have.attr", "style")
-        .should("contain", "transform: translate(-50%, 278px)");
+        .should("contain", "transform: translate(-50%");
 
       cy.scrollTo(0, 200);
 
       cy.get(".v-parallax__image")
         .should("have.attr", "style")
-        .should("contain", "transform: translate(-50%, 394px)");
+        .should("contain", "transform: translate(-50%");
     });
   });
 });

vue-cli-2/src/components/Tabs.cy.js

@@ -1,9 +1,8 @@
-import { mount } from "@cypress/vue";
 import Tabs from "./Tabs.vue";
 
 describe("Tabs.vue", () => {
   it("when a tab is selected, aria-selected='true'", () => {
-    mount(Tabs);
+    cy.mount(Tabs);
     cy.getBySel("tab-0").invoke("attr", "aria-selected").should("eq", "true");
   });
 });