package upgrades, cypress migration

Author: colbyfayock

.gitignore

@@ -69,6 +69,6 @@ yarn-error.log
 .yarn-integrity
 
 # Cypress
-cypress
-tests/screenshots
-tests/videos
+cypress/downloads
+cypress/screenshots
+cypress/videos

.nvmrc

@@ -1 +1 @@
-12
+14

cypress.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:8000/",
+  },
+});

cypress.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

tests/integrations/home.test.js cypress/e2e/home.cy.js

@@ -10,16 +10,16 @@
 //
 //
 // -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
+// Cypress.Commands.add('login', (email, password) => { ... })
 //
 //
 // -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
 //
 //
 // -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
 //
 //
-// -- This is will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/fixtures/example.json

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/e2e.js is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import "./cypress-commands";
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

tests/cypress-commands.js cypress/support/commands.js

@@ -9,41 +9,41 @@
     "url": "https://twitter.com/colbyfayock"
   },
   "dependencies": {
-    "gatsby": "^3.13.0",
-    "gatsby-plugin-manifest": "^3.14.0",
-    "gatsby-plugin-react-helmet": "^4.14.0",
-    "gatsby-plugin-react-leaflet": "3.0.0",
+    "cypress": "^10.1.0",
+    "gatsby": "^4.16.0",
+    "gatsby-plugin-manifest": "^4.16.0",
+    "gatsby-plugin-react-helmet": "^5.16.0",
+    "gatsby-plugin-react-leaflet": "3.0.3",
     "gatsby-plugin-resolve-src": "^2.1.0",
-    "gatsby-plugin-sass": "^4.13.0",
-    "gatsby-source-filesystem": "^3.5.0",
-    "gatsby-source-graphql": "^3.5.0",
-    "leaflet": "^1.7.1",
+    "gatsby-plugin-sass": "^5.16.0",
+    "gatsby-source-filesystem": "^4.16.0",
+    "gatsby-source-graphql": "^4.16.0",
+    "leaflet": "^1.8.0",
     "path": "^0.12.7",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-helmet": "^6.1.0",
-    "react-icons": "^4.2.0",
-    "react-leaflet": "^3.1.0",
-    "sass": "^1.39.0"
+    "react-icons": "^4.4.0",
+    "react-leaflet": "^4.0.0",
+    "sass": "^1.52.3"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.15.4",
-    "@babel/preset-react": "^7.14.5",
-    "babel-jest": "^27.1.0",
-    "babel-preset-gatsby": "^1.13.0",
-    "cypress": "^8.3.1",
+    "@babel/eslint-parser": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
+    "babel-jest": "^28.1.1",
+    "babel-preset-gatsby": "^2.16.0",
     "enzyme": "^3.11.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-cypress": "^2.11.3",
-    "eslint-plugin-react": "^7.25.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint": "^8.17.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "husky": "4.3.8",
-    "jest": "^27.1.0",
-    "lint-staged": "^11.1.2",
-    "prettier": "^2.5.0",
-    "prettier-eslint": "^13.0.0",
-    "prettier-eslint-cli": "^5.0.1",
+    "jest": "^28.1.1",
+    "lint-staged": "^13.0.1",
+    "prettier": "^2.7.0",
+    "prettier-eslint": "^15.0.1",
+    "prettier-eslint-cli": "^6.0.1",
     "start-server-and-test": "^1.14.0"
   },
   "keywords": [
@@ -62,8 +62,8 @@
     "cy:run": "cypress run --headless",
     "cy:verify": "cypress verify",
     "develop": "gatsby develop",
-    "format": "prettier-eslint --eslint-config-path ./config/eslint.config.js --write $PWD/'**/*.js'",
-    "format:nopath": "prettier-eslint --eslint-config-path ./config/eslint.config.js --write",
+    "format": "prettier-eslint --eslint-config-path $PWD/config/eslint.config.js --write $PWD/'**/*.js'",
+    "format:nopath": "prettier-eslint --eslint-config-path $PWD/config/eslint.config.js --write",
     "lint": "eslint -c ./config/eslint.config.js . --ext .js",
     "start": "yarn develop",
     "serve": "gatsby serve",

tests/cypress-support.js cypress/support/e2e.js

@@ -1,4 +1,5 @@
 import React, { useRef, useEffect } from "react";
+import PropTypes from "prop-types";
 import { Helmet } from "react-helmet";
 import L from "leaflet";
 import { Marker, useMap } from "react-leaflet";
@@ -81,6 +82,10 @@ const MapEffect = ({ markerRef }) => {
   return null;
 };
 
+MapEffect.propTypes = {
+  markerRef: PropTypes.object,
+};
+
 const IndexPage = () => {
   const markerRef = useRef();