build: set up cypress in github actions

.github/workflows/cypress.yml

@@ -0,0 +1,23 @@
+name: Cypress tests
+on: [push]
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        env:
+          REACT_APP_API_HOST: ${{ secrets.REACT_APP_API_HOST }}
+        with:
+          config: baseUrl=http://localhost:3000
+          start: yarn start:ci
+          wait-on: 'http://localhost:3000'
+          wait-on-timeout: 180
+          browser: chrome
+          headless: true
+
+      - name: Coverage Report
+        run: npx nyc report --reporter=text-summary

.gitignore

@@ -5,9 +5,6 @@
 /.pnp
 .pnp.js
 
-# testing
-/coverage
-
 # production
 /build
 
@@ -25,6 +22,8 @@ yarn-error.log*
 # cache
 .eslintcache
 
-# test
+# testing and coverage
 cypress/screenshots
 cypress/videos
+/.nyc_output
+/coverage

cypress/plugins/index.js

@@ -1,3 +1,6 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable global-require */
+
 /// <reference types="cypress" />
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
@@ -15,12 +18,16 @@
 /**
  * @type {Cypress.PluginConfig}
  */
-module.exports = (on, config) => ({
-  ...config,
-  env: {
-    'cypress-react-selector': {
-      root: '#root',
+module.exports = (on, config) => {
+  const newConfig = {
+    ...config,
+    env: {
+      'cypress-react-selector': {
+        root: '#root',
+      },
+      API_HOST: process.env.REACT_APP_API_HOST,
     },
-    API_HOST: process.env.REACT_APP_API_HOST,
-  },
-});
+  };
+  require('@cypress/code-coverage/task')(on, newConfig);
+  return newConfig;
+};

cypress/support/index.js

@@ -12,6 +12,8 @@
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
+// eslint-disable-next-line import/no-extraneous-dependencies
+import '@cypress/code-coverage/support';
 
 // Import commands.js using ES2015 syntax:
 import './commands';

package.json

@@ -33,6 +33,7 @@
   },
   "scripts": {
     "start": "env-cmd -f ./.env.local react-scripts start",
+    "start:ci": "react-scripts -r @cypress/instrument-cra start",
     "build": "react-scripts build",
     "test": "env-cmd -f ./.env.test react-scripts test",
     "eject": "react-scripts eject",
@@ -63,6 +64,8 @@
   "devDependencies": {
     "@commitlint/cli": "11.0.0",
     "@commitlint/config-conventional": "11.0.0",
+    "@cypress/code-coverage": "3.9.2",
+    "@cypress/instrument-cra": "1.4.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
@@ -74,10 +77,18 @@
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-react": "7.22.0",
     "husky": "4.3.7",
+    "istanbul-lib-coverage": "3.0.0",
     "npm-run-all": "4.1.5",
+    "nyc": "15.1.0",
     "prettier": "2.2.1",
     "pretty-quick": "3.1.0",
     "standard-version": "9.1.0",
     "typescript": "4.1.3"
+  },
+  "nyc": {
+    "exclude": [
+      "src/serviceWorker.js",
+      ""
+    ]
   }
 }