zero-one-code
diff --git a/‎.github/workflows/test.yml
+22 b/‎.github/workflows/test.yml
+22
diff --git a/‎cypress.config.ts
+8 b/‎cypress.config.ts
+8
diff --git a/‎cypress/support/component-index.html
+12 b/‎cypress/support/component-index.html
+12
diff --git a/‎cypress/support/component.ts
+39 b/‎cypress/support/component.ts
+39
diff --git a/‎package.json
+3-3 b/‎package.json
+3-3
diff --git a/‎src/__tests__/__snapshots__/index.spec.tsx.snap
+477 b/‎src/__tests__/__snapshots__/index.spec.tsx.snap
+477
@@ -0,0 +1,22 @@
+name: test
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - name: install
+        run: pnpm i
+      - name: test
+        run: pnpm test
@@ -1,8 +1,16 @@
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
+  includeShadowDom: true,
   e2e: {
     specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
     baseUrl: 'http://localhost:4173',
   },
+
+  component: {
+    devServer: {
+      framework: 'vue',
+      bundler: 'vite',
+    },
+  },
 });
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
@@ -0,0 +1,39 @@
+// ***********************************************************
+// 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';
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount);
+
+// Example use:
+// cy.mount(MyComponent)
@@ -44,9 +44,9 @@
     "dev": "vite",
     "build": "run-p type-check \"build-js {@}\" --",
     "preview": "vite preview",
-    "test:unit": "vitest",
-    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
-    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+    "test": "cypress run --component && vitest run",
+    "test:snap": "vitest",
+    "test:dev": "cypress open --component",
     "build-only": "vite build",
     "build-js": "node scripts/build.js",
     "type-check": "vue-tsc --build --force",