diff --git a/cypress.config.ts b/cypress.config.ts
index 77ab2db8b7..93c311af19 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -11,12 +11,13 @@ export default defineConfig({
},
projectId: '181c7x',
e2e: {
- // We've imported your old cypress plugins here.
- // You may want to clean this up later by importing these.
- setupNodeEvents(on, config) {
- return require('./cypress/plugins/index.ts')(on, config)
- },
baseUrl: 'http://localhost:4173',
specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+ },
+ component: {
+ devServer: {
+ framework: 'vue',
+ bundler: 'vite',
+ },
},
})
diff --git a/cypress/plugins/index.ts b/cypress/plugins/index.ts
deleted file mode 100644
index e158cbbd83..0000000000
--- a/cypress/plugins/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-import path from 'path'
-import { startDevServer } from '@cypress/vite-dev-server'
-
-/**
- * @type {Cypress.PluginConfig}
- */
-export default (on, config) => {
- // `on` is used to hook into various events Cypress emits
- // `config` is the resolved Cypress config
- on('dev-server:start', (options) => {
- return startDevServer({
- options,
- viteConfig: {
- configFile: path.resolve(__dirname, '..', '..', 'vite.config.ts'),
- },
- })
- })
-}
diff --git a/cypress/plugins/tsconfig.json b/cypress/plugins/tsconfig.json
deleted file mode 100644
index a164a22647..0000000000
--- a/cypress/plugins/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "extends": "@vue/tsconfig/tsconfig.node.json",
- "include": ["./**/*"],
- "compilerOptions": {
- "module": "CommonJS",
- "preserveValueImports": false,
- "types": ["node", "cypress/types/cypress"]
- }
-}
\ No newline at end of file
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 4bc18b6841..aa0c8be97d 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -1,3 +1,41 @@
+///
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+// namespace Cypress {
+// interface Chainable {
+// login(email: string, password: string): Chainable
+// drag(subject: string, options?: Partial): Chainable
+// dismiss(subject: string, options?: Partial): Chainable
+// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable
+// }
+// }
+// }
+
/**
* Recursively gets an element, returning only after it's determined to be attached to the DOM for good.
*
diff --git a/cypress/support/component.index.html b/cypress/support/component.index.html
new file mode 100644
index 0000000000..ac6e79fd83
--- /dev/null
+++ b/cypress/support/component.index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ Components App
+
+
+
+
+
\ No newline at end of file
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
new file mode 100644
index 0000000000..c0b98aa838
--- /dev/null
+++ b/cypress/support/component.ts
@@ -0,0 +1,29 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue'
+// Ensure global styles are loaded
+import '../../src/styles/global.scss';
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)
\ No newline at end of file
diff --git a/src/types/cypress.d.ts b/src/types/cypress.d.ts
new file mode 100644
index 0000000000..911324a7da
--- /dev/null
+++ b/src/types/cypress.d.ts
@@ -0,0 +1,12 @@
+import { mount } from 'cypress/vue'
+
+type MountParams = Parameters;
+type OptionsParam = MountParams[1];
+
+declare global {
+ namespace Cypress {
+ interface Chainable {
+ mount: typeof mount;
+ }
+ }
+}
\ No newline at end of file