[DEPENDABOT]: Bump cypress from 9.7.0 to 10.0.3 (#692)

* [DEPENDABOT]: Bump cypress from 9.7.0 to 10.0.3

Bumps [cypress](https://github.com/cypress-io/cypress) from 9.7.0 to 10.0.3.
- [Release notes](https://github.com/cypress-io/cypress/releases)
- [Changelog](https://github.com/cypress-io/cypress/blob/develop/.releaserc.base.js)
- [Commits](cypress-io/cypress@v9.7.0...v10.0.3)

---
updated-dependencies:
- dependency-name: cypress
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <[email protected]>

* Migrate to Cypress 10

Ran `cypress open` and walked through migration guide. It generated cypress.config.ts
which I renamed to cypress.config.js and reverted to `require()` instead of `import`
because of stupid TypeScript typings warnings related to the plugins, which seem
perfectly fine.

e2e tests all run and pass as before.

Unfortunately, coverage is broken because we also need
`@cypress/[email protected]` which supports Cypress 10, but
it has an issue with this error:
cypress-io/code-coverage#573

* Remove lint

* Fix lock file conflict

* Apparent must still specify cypress config file?

* No difference, reverted, but now bumped Cypress version in CI, hoping...

* Try with updated Cypress GH Action

* Disable broken code coverage

* Try cypress/code-coverage 3.9.x for fun

* Revert "Try cypress/code-coverage 3.9.x for fun"

This reverts commit 68e1d03.

3.9.x fails with the same missing reference error.

* Update lock file for some reason (unexpected)

* Update how cypress/code-coverage plugin is installed/configured

https://docs.cypress.io/guides/tooling/code-coverage#Install-the-plugin

Found a reference to this path that has been the problem so far:

```javascript
    on(
      'file:preprocessor',
      require('@cypress/code-coverage/use-browserify-istanbul')
    );
```

Removed since that's not in the installation instructions (maybe it
was at one point, but no longer).

* See if Codecov GH Action will make everything better

Instead of manually installing codecov globally and running it...

References:

- https://github.com/marketplace/actions/codecov
- https://relatablecode.com/how-to-add-cypress-codecov-in-github-actions-in-react-app

* cypress/code-coverage does NOT instrument the code for you...

https://github.com/cypress-io/code-coverage#instrument-unit-tests

Ah. Finally, circle right back to the original issue of the ellusive
`@cypress/code-coverage/use-browserify-istanbul` reference which
no longer exists in version 3.10.0 of `@cypress/code-coverage`.

The only thing cypress/code-coverage provides now is
`@cypress/code-coverage/use-babelrc`, which has peer dependencies
on webpack, babel-loader, babel/preset-env and babel/core.

After all those added, and babel.config.js configured under 'test'
env (and added `BABEL_ENV=test` to package.json 'test:coverage'
script that runs Cypress with coverage option), things are
looking good locally with .nyc_output/out.json once again generated.

Let's see if it works and reports in GH Actions now.

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Stefan Cameron <[email protected]>

Author: dependabot[bot]

.github/workflows/ci.yml

@@ -16,7 +16,8 @@ jobs:
       matrix:
         node: [14]
     steps:
-      - uses: actions/checkout@master
+      - name: Checkout
+        uses: actions/checkout@v2
 
       - name: Setup environment
         id: setups
@@ -50,28 +51,28 @@ jobs:
 
       - name: Build # Tests to see if a build can succeed
         run: yarn build
+
   E2E:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04 # cypress/browsers image supports Ubuntu 18-20
     name: e2e
     strategy:
       matrix:
         browser: [chrome, firefox]
     timeout-minutes: 20
     container:
-      image: cypress/included:9.7.0
+      image: cypress/browsers:node14.17.0-chrome88-ff89
       options: --user 1001 --shm-size=2g # @see https://github.com/cypress-io/github-action/issues/104#issuecomment-666047965
     env:
-      CYPRESS_BROWSER: ${{ matrix.browser }}
+      BABEL_ENV: test
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout
+        uses: actions/checkout@v2
+
       - name: Test E2E
-        uses: cypress-io/github-action@v2.6.1
+        uses: cypress-io/github-action@v4
         with:
           browser: ${{ matrix.browser }}
           env: coverage=true
-      - name: Install code coverage
-        run: |-
-          yarn global add codecov;
-          echo "$(yarn global bin)" >> $GITHUB_PATH;
-      - name: Code coverage
-        run: codecov;
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v2

babel.config.js

@@ -41,6 +41,8 @@ module.exports = {
       plugins,
     },
     test: {
+      // Jest/Cypress
+      plugins: [...plugins, 'istanbul'],
       presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
     },
   },

cypress.config.js

@@ -0,0 +1,16 @@
+const { defineConfig } = require('cypress');
+const setupPlugins = require('./cypress/plugins/index.js');
+
+module.exports = defineConfig({
+  viewportHeight: 600,
+  viewportWidth: 800,
+  video: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return setupPlugins(on, config);
+    },
+    specPattern: 'test/e2e/**/*.e2e.js',
+  },
+});

cypress.json

@@ -20,11 +20,7 @@ module.exports = (on, config) => {
   if (config.env.coverage === true) {
     // enable coverage
     require('@cypress/code-coverage/task')(on, config);
-    // instrument code
-    on(
-      'file:preprocessor',
-      require('@cypress/code-coverage/use-browserify-istanbul')
-    );
+    on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'));
   }
 
   // fetch fixtures

cypress/plugins/index.js

@@ -32,8 +32,8 @@
     "test:types": "tsc index.d.ts",
     "test:unit": "jest",
     "test:e2e": "ELECTRON_ENABLE_LOGGING=1 cypress run",
-    "test:e2e:dev": "cypress open",
-    "test:coverage": "cypress run --env coverage=true",
+    "test:e2e:dev": "cypress open --config-file=cypress.config.js --browser --e2e",
+    "test:coverage": "BABEL_ENV=test yarn test:e2e --env coverage=true",
     "prepare": "yarn build",
     "prepublishOnly": "yarn test && yarn build",
     "release": "yarn build && changeset publish"
@@ -58,7 +58,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.16.0",
     "@babel/preset-env": "^7.18.2",
     "@changesets/cli": "^2.23.0",
-    "@cypress/code-coverage": "^3.9.12",
+    "@cypress/code-coverage": "^3.10.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
@@ -67,11 +67,13 @@
     "@types/node": "^17.0.43",
     "all-contributors-cli": "^6.20.0",
     "babel-jest": "^28.1.1",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-istanbul": "^6.1.1",
     "brfs": "^2.0.2",
     "browserify": "^17.0.0",
     "budo": "^11.7.0",
     "cross-env": "^7.0.3",
-    "cypress": "^9.7.0",
+    "cypress": "^10.0.3",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -85,6 +87,7 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.7.3",
-    "watchify": "^4.0.0"
+    "watchify": "^4.0.0",
+    "webpack": "^5.73.0"
   }
 }