test: added cypress component test to git actions

.github/workflows/test.yml

@@ -23,6 +23,25 @@ jobs:
         run: yarn test
 
       - name: Cypress run
+        # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
+        uses: cypress-io/github-action@v5
+        with:
+          install-command: yarn --immutable
+          browser: chrome
+          start: yarn run start-e2e
+          wait-on: 'http://localhost:3000' # Waits for above
+          wait-on-timeout: 120 # Waits for 2 minutes
+          # Records to Cypress Dashboard
+          record: true
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          # created by the GH Action automatically
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Check the coverage value
+        run: yarn test-coverage
+
+      - name: Cypress component run
         # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
         uses: cypress-io/github-action@v5
         with:

.nycrc.json

@@ -0,0 +1,15 @@
+{
+  "all": true,
+  "extends": "@istanbuljs/nyc-config-typescript",
+  "check-coverage": true,
+  "include": [
+      "src/**/*.ts",
+      "src/**/*.tsx"
+    ],
+    "exclude": [
+      "cypress/**/*.*",
+      "**/*.d.ts",
+      "**/*.cy.tsx",
+      "**/*.cy.ts"
+    ]
+}

cypress.config.ts

@@ -6,6 +6,7 @@ export default defineConfig({
   env: {
     codeCoverage: {
       exclude: 'cypress/**/*.*',
+      include: 'src/**/*.tsx',
     },
   },
   e2e: {
@@ -27,11 +28,19 @@ export default defineConfig({
     watchForFileChanges: false,
   },
   component: {
-    supportFile: './cypress/support/components.ts',
+    supportFile: './cypress/support/component.ts',
     devServer: {
       framework: 'react',
       bundler: 'vite',
     },
+    setupNodeEvents(on, config) {
+      console.log('setupNodeEvents for components')
+
+      // https://github.com/bahmutov/cypress-code-coverage
+      require('@cypress/code-coverage/task')(on, config)
+
+      return config
+    },
     specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
   },
   projectId: '5pz59y',

cypress/support/components.ts → cypress/support/component.ts

@@ -16,6 +16,8 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
+import '@cypress/code-coverage/support'
+
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@mui/base": "^5.0.0-beta.8",
     "@mui/material": "^5.14.1",
     "@mui/styled-engine-sc": "^5.12.0",
@@ -21,7 +22,10 @@
     "buffer-browserify": "^0.2.5",
     "camera-controls": "^1.37.4",
     "clsx": "^1.2.1",
+    "create-react-app": "^5.0.1",
     "crypto-browserify": "^3.12.0",
+    "cypress": "^13.4.0",
+    "cypress-vite": "^1.4.2",
     "d3-force-3d": "^3.0.3",
     "events": "^3.3.0",
     "gsap": "^3.10.4",
@@ -42,6 +46,7 @@
     "react-input-mask": "3.0.0-alpha.2",
     "react-is": "^18.2.0",
     "react-player": "^2.11.2",
+    "react-scripts": "^5.0.1",
     "react-spinners": "^0.13.3",
     "react-toastify": "^8.2.0",
     "react-twitter-embed": "^4.0.4",
@@ -133,9 +138,10 @@
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
+    "@bahmutov/cypress-code-coverage": "^2.6.1",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@cypress/code-coverage": "^3.11.0",
+    "@cypress/code-coverage": "^3.12.7",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@testing-library/cypress": "^10.0.1",
     "@testing-library/jest-dom": "^5.16.5",
@@ -154,9 +160,8 @@
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
     "@vitejs/plugin-react": "^4.0.0",
+    "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
-    "cypress": "12.16.0",
-    "cypress-vite": "^1.4.2",
     "eslint": "^8.41.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
@@ -190,6 +195,8 @@
     "node": ">=16.0.0"
   },
   "nyc": {
+    "all": true,
+    "extends": "@istanbuljs/nyc-config-typescript",
     "reporter": [
       "html"
     ]