test: add code-coverage

Author: spaenleh

.eslintrc

@@ -5,9 +5,9 @@
   },
   "extends": [
     "airbnb",
-    "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "prettier",
+    "plugin:react/recommended",
     "plugin:cypress/recommended"
   ],
   "globals": {
@@ -24,6 +24,8 @@
   },
   "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
   "rules": {
+    "import/no-import-module-exports": "off",
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "import/prefer-default-export": "off",
     "prettier/prettier": "error",
     "import/extensions": [
@@ -40,6 +42,8 @@
         "allowExpressions": true
       }
     ],
+    "@typescript-eslint/no-var-requires": "off",
+    "global-require": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "comma-dangle": "off",

.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+/.nyc_output
 
 # production
 /build

cypress/integration/home.spec.ts cypress/integration/home.spec.jscypress/integration/home.spec.ts renamed to cypress/integration/home.spec.js

@@ -15,8 +15,13 @@
 /**
  * @type {Cypress.PluginConfig}
  */
-// eslint-disable-next-line no-unused-vars
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  require('@cypress/code-coverage/task')(on, config);
+  // include any other plugin code...
+
+  // It's IMPORTANT to return the config object
+  // with any changed environment variables
+  return config;
 };

cypress/plugins/index.js

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

cypress/support/index.js

@@ -9,21 +9,21 @@
     "Basile Spaenlehauer"
   ],
   "dependencies": {
-    "@testing-library/cypress": "^8.0.2",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "@testing-library/cypress": "8.0.2",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "13.2.0",
+    "@testing-library/user-event": "14.1.1",
+    "@types/jest": "27.5.0",
+    "@types/node": "16.11.33",
+    "@types/react": "18.0.8",
+    "@types/react-dom": "18.0.3",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "react-scripts": "5.0.1",
-    "typescript": "^4.4.2"
+    "typescript": "4.6.4"
   },
   "scripts": {
-    "start": "env-cmd -f ./.env.local react-scripts start",
+    "start": "env-cmd -f ./.env.local react-scripts -r @cypress/instrument-cra start",
     "start:test": "env-cmd -f ./.env.test react-scripts -r @cypress/instrument-cra start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -33,31 +33,35 @@
     "hooks:install": "husky install",
     "hooks:uninstall": "husky uninstall",
     "lint": "eslint .",
+    "cypress:open": "env-cmd -f ./.env.local cypress open",
     "test:once": "concurrently -k -s first \"yarn start:test\" \"wait-on http://localhost:3333 && yarn test:ci\" ",
-    "test:ci": "env-cmd -f ./.env.test cypress run --headless"
+    "test:ci": "env-cmd -f ./.env.test cypress run && nyc report --reporter=text --reporter=text-summary",
+    "cov:report": "open ./coverage/lcov-report/index.html"
   },
   "devDependencies": {
-    "@commitlint/cli": "16.1.0",
-    "@commitlint/config-conventional": "16.0.0",
-    "@cypress/instrument-cra": "^1.4.0",
-    "@typescript-eslint/eslint-plugin": "^5.22.0",
-    "@typescript-eslint/parser": "^5.22.0",
-    "concurrently": "^7.1.0",
-    "cypress": "^9.6.0",
-    "eslint": "^8.14.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^2.7.1",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.5.0",
-    "husky": "^7.0.4",
-    "prettier": "^2.6.2",
-    "pretty-quick": "^3.1.3",
-    "standard-version": "^9.3.2"
+    "@commitlint/cli": "16.2.4",
+    "@commitlint/config-conventional": "16.2.4",
+    "@cypress/code-coverage": "3.9.12",
+    "@cypress/instrument-cra": "1.4.0",
+    "@typescript-eslint/eslint-plugin": "5.22.0",
+    "@typescript-eslint/parser": "5.22.0",
+    "concurrently": "7.1.0",
+    "cypress": "9.6.0",
+    "eslint": "8.14.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-import-resolver-typescript": "2.7.1",
+    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-react-hooks": "4.5.0",
+    "husky": "7.0.4",
+    "nyc": "15.1.0",
+    "prettier": "2.6.2",
+    "pretty-quick": "3.1.3",
+    "standard-version": "9.3.2"
   },
   "browserslist": {
     "production": [
@@ -71,5 +75,13 @@
       "last 1 safari version"
     ]
   },
+  "nyc": {
+    "all": true,
+    "include": "src/*.{js,ts,jsx,tsx}",
+    "exclude": [
+      "src/setupTests.ts",
+      "src/*.d.ts"
+    ]
+  },
   "packageManager": "[email protected]"
 }

package.json

@@ -15,7 +15,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["cypress"]
+    "types": ["node", "cypress"]
   },
   "include": ["src"]
 }