chore(deps): update dependency cypress to v15 (#361)

* chore(deps): update dependency cypress to v15

* fix: migrate webpack example from vue-cli-service to webpack bundler for Cypress 15

vue-cli-service CT support was dropped in Cypress 14. Migrate the webpack
example to use webpack directly with vue-loader, matching the Cypress 15
migration guide.

- Replace @vue/cli-service and @vue/cli-plugin-e2e-cypress with direct webpack
- Add webpack.config.js with VueLoaderPlugin and HtmlWebpackPlugin
- Update cypress.config.ts: framework "vue-cli" → "vue", add baseUrl
- Update scripts to use webpack-dev-server and start-server-and-test
- Fix propsData → props in CT test (Vue 2 → Vue 3 API)
- Update cypress to v15.18.0 in webpack example

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: upgrade webpack-dev-server to v5 and fix require() lint error

Cypress 15's @cypress/webpack-dev-server requires webpack-dev-server v5.
Also inline the CT webpack config using ES module imports to fix the
no-require-imports lint rule.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Jakub Freisler <jakub@frsource.org>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 3 people

examples/webpack/cypress.config.ts

@@ -1,8 +1,10 @@
 import { defineConfig } from "cypress";
 import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
+import { VueLoaderPlugin } from "vue-loader";
 
-module.exports = defineConfig({
+export default defineConfig({
   e2e: {
+    baseUrl: "http://localhost:8080",
     setupNodeEvents(on, config) {
       initPlugin(on, config);
     },
@@ -14,8 +16,18 @@ module.exports = defineConfig({
       initPlugin(on, config);
     },
     devServer: {
-      framework: "vue-cli",
+      framework: "vue",
       bundler: "webpack",
+      webpackConfig: {
+        plugins: [new VueLoaderPlugin()],
+        module: {
+          rules: [
+            { test: /\.vue$/, loader: "vue-loader" },
+            { test: /\.css$/, use: ["vue-style-loader", "css-loader"] },
+            { test: /\.(png|jpg|gif|svg)$/, type: "asset/resource" },
+          ],
+        },
+      },
     },
   },
 });

examples/webpack/cypress/component/HelloWorld.cy.ts

@@ -6,7 +6,7 @@ const msg = "Some random test message";
 describe("HelloWorld.cy.js", () => {
   it("playground", () => {
     mount(HelloWorld, {
-      propsData: { msg },
+      props: { msg },
     }).then(() => {
       cy.contains("h1", msg);
       cy.matchImage();

examples/webpack/package.json

@@ -3,23 +3,30 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:open": "vue-cli-service test:e2e --env \"pluginVisualRegressionImagesPath={spec_path}/__image_snapshots_local__\"",
-    "test:run": "vue-cli-service test:e2e",
+    "serve": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "test:open": "cypress open --env \"pluginVisualRegressionImagesPath={spec_path}/__image_snapshots_local__\"",
+    "test:run": "cypress run",
     "test:ct": "pnpm test:open --component",
-    "test:ct:ci": "pnpm test:run --component --headless",
-    "test:e2e": "pnpm test:open --e2e",
-    "test:e2e:ci": "pnpm test:run --e2e --headless"
+    "test:ct:ci": "pnpm test:run --component",
+    "test:e2e": "start-server-and-test serve http://localhost:8080 \"pnpm test:open --e2e\"",
+    "test:e2e:ci": "start-server-and-test serve http://localhost:8080 \"pnpm test:run --e2e\""
   },
   "dependencies": {
     "vue": "3.2.45"
   },
   "devDependencies": {
     "@frsource/cypress-plugin-visual-regression-diff": "workspace:*",
-    "@vue/cli-plugin-e2e-cypress": "5.0.8",
-    "@vue/cli-service": "5.0.8",
-    "cypress": "13.14.2",
-    "typescript": "5.0.4"
+    "@vue/compiler-sfc": "3.2.45",
+    "css-loader": "6.11.0",
+    "cypress": "15.18.0",
+    "html-webpack-plugin": "5.6.3",
+    "start-server-and-test": "2.0.10",
+    "typescript": "5.0.4",
+    "vue-loader": "17.4.2",
+    "vue-style-loader": "4.1.3",
+    "webpack": "5.99.9",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "^5.0.0"
   }
 }

examples/webpack/webpack.config.js

@@ -0,0 +1,27 @@
+const path = require('path')
+const { VueLoaderPlugin } = require('vue-loader')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: './src/main.js',
+  resolve: {
+    extensions: ['.js', '.ts', '.vue'],
+    alias: { '@': path.resolve(__dirname, 'src') },
+  },
+  devServer: { port: 8080 },
+  plugins: [
+    new VueLoaderPlugin(),
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+      title: 'Vue App',
+      templateParameters: { BASE_URL: '/' },
+    }),
+  ],
+  module: {
+    rules: [
+      { test: /\.vue$/, loader: 'vue-loader' },
+      { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] },
+      { test: /\.(png|jpg|gif|svg)$/, type: 'asset/resource' },
+    ],
+  },
+}

packages/cypress-plugin-visual-regression-diff/package.json

@@ -72,7 +72,7 @@
     "@types/tmp": "0.2.6",
     "@vitest/coverage-v8": "4.1.9",
     "cpy-cli": "4.2.0",
-    "cypress": "13.17.0",
+    "cypress": "15.18.0",
     "del-cli": "7.0.0",
     "microbundle": "0.15.1",
     "prettier": "3.9.0",