fix: adding snapshot support

Author: JessicaSachs

cypress.json

@@ -1,7 +1,10 @@
 {
-  "experimentalComponentTesting": true,
   "componentFolder": "packages/",
-  "pluginsFile": "./plugins.js",
-  "testFiles": "**/*.test.*",
-  "supportFile": "packages/tests/support.ts"
+  "pluginsFile": "./packages/tests/plugins.js",
+  "testFiles": "**/*.cy.*",
+  "supportFile": "packages/tests/support.tsx",
+  "ignoreTestFiles": "**/*.snap",
+  "video": false,
+  "fixturesFolder": false,
+  "reporter": "spec"
 }

cypress/fixtures/example.json

@@ -15,7 +15,11 @@
     "build": "lerna run build --no-private --stream",
     "dev": "NODE_ENV=development vite serve playground --config ./vite.config.ts",
     "playground:build": "yarn install && yarn build && yarn bootstrap && NODE_ENV=production vite build playground --config ./vite.config.ts",
-    "cypress:open:ct": "cypress open-ct",
+    "cy:open": "cypress open-ct",
+    "cy:run": "cypress run-ct --quiet",
+    "test:unit": "jest",
+    "test:component": "cy:run",
+    "test": "jest && yarn cy:run",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
@@ -35,8 +39,7 @@
     "c-spinner": "yarn workspace @chakra-ui/c-spinner",
     "c-badge": "yarn workspace @chakra-ui/c-badge",
     "c-portal": "yarn workspace @chakra-ui/c-portal",
-    "c-popper": "yarn workspace @chakra-ui/c-popper",
-    "cy": "node ../../github/cypress/scripts/cypress.js open-ct"
+    "c-popper": "yarn workspace @chakra-ui/c-popper"
   },
   "license": "MIT",
   "private": true,
@@ -49,6 +52,7 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@cypress/vite-dev-server": "^1.1.0",
     "@cypress/vue": "^3.0.0-alpha.4",
+    "@cypress/snapshot": "2.1.7",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/user-event": "^12.6.2",
     "@testing-library/vue": "^6.3.4",
@@ -70,7 +74,7 @@
     "concurrently": "^5.3.0",
     "consola": "^2.15.0",
     "cross-env": "^7.0.2",
-    "cypress": "https://cdn.cypress.io/beta/npm/6.9.0/circle-develop-3700fe7271b016f8a89c5a7a4c40d0af62155b45/cypress.tgz",
+    "cypress": "https://cdn.cypress.io/beta/npm/6.9.0/circle-7.0-release-e4f5bb7181aea3046563f630289a0c4684fcb1d9/cypress.tgz",
     "esbuild-jest": "^0.4.0",
     "eslint": "^7.0.0",
     "eslint-config-prettier": "^6.12.0",
@@ -97,7 +101,7 @@
     "ts-jest": "^26.5.0",
     "ts-node": "^9.0.0",
     "typescript": "^4.1.2",
-    "vite": "2.1.2",
+    "vite": "^2.1.5",
     "vite-plugin-components": "^0.6.6",
     "vite-plugin-pages": "^0.3.0",
     "vitepress": "^0.12.0",

cypress/support/commands.js

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src"]
-}
+}

cypress/support/index.js

@@ -12,20 +12,21 @@ describe('Alert Examples', () => {
 
 it('contains the correct role', () => {
   cy.mount(Examples.BaseAlert.default)
+    .then(() => {})
     .get('[role=alert]')
     .should('exist')
 })
 
 it.only('renders its children', () => {
-  debugger;
   cy.mount(
     <CAlert data-testid="alert" variant="left-accent" status="info" mb="3">
       <CAlertIcon mr="2" />
       <CAlertTitle> Info alert </CAlertTitle>
       <CAlertDescription> Something just happened </CAlertDescription>
     </CAlert>
-  ).get('[data-testid=alert]')
+  )
+    .get('[data-testid=alert]')
     .should('contain', 'Info alert')
     .and('contain', 'Something just happened')
     .and('descendants', 'svg')
-})
+})