Merge pull request #383 from Vagr9K/june-2022-upgrades

June 2022 upgrade cycle (Gatsby v4.17).

Author: Vagr9K

.eslintrc.js

@@ -32,6 +32,13 @@ module.exports = {
         tsx: "never",
       },
     ],
+    "react/function-component-definition": [
+      "error",
+      {
+        namedComponents: "arrow-function",
+        unnamedComponents: "arrow-function",
+      },
+    ],
   },
   overrides: [
     {
@@ -59,6 +66,7 @@ module.exports = {
       rules: {
         "react/require-default-props": "off",
         "react/prop-types": "off",
+        "no-restricted-exports": "off",
       },
 
       parser: "@typescript-eslint/parser",
@@ -111,6 +119,9 @@ module.exports = {
             peerDependencies: false,
           },
         ],
+        "import/no-relative-packages": "off",
+        "jest/no-conditional-in-test": "off",
+        "jest/prefer-snapshot-hint": "off",
       },
     },
   ],

.github/workflows/ci.yml

@@ -2,6 +2,7 @@ name: Continuous Integration
 on: [push]
 jobs:
   static-check:
+    if: always()
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -13,6 +14,7 @@ jobs:
       - run: yarn lint:all
 
   type-check:
+    if: always()
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -24,6 +26,7 @@ jobs:
       - run: yarn type-check
 
   jest-tests:
+    if: always()
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -40,6 +43,7 @@ jobs:
         run: yarn test
 
   e2e-tests:
+    if: always()
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -52,7 +56,7 @@ jobs:
           cache: 'yarn'
       - run: yarn install
       - name: Run E2E tests
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4.1.0
         with:
           working-directory: ${{ matrix.project }}
           build: yarn build

.stylelintrc.json

@@ -1,3 +1,14 @@
 {
-  "extends": ["stylelint-config-recommended", "stylelint-prettier/recommended"]
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-styled-components",
+    "stylelint-prettier/recommended"
+  ],
+
+  "overrides": [
+    {
+      "files": ["**/*.tsx"],
+      "customSyntax": "@stylelint/postcss-css-in-js"
+    }
+  ]
 }

.yarn/releases/yarn-3.0.0.cjs

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: "@yarnpkg/plugin-workspace-tools"
 
-yarnPath: .yarn/releases/yarn-3.0.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.1.cjs

.yarn/releases/yarn-3.2.1.cjs

@@ -0,0 +1 @@
+export { default } from "./cypress/config";

.yarnrc.yml

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  fixturesFolder: false,
+  e2e: {
+    baseUrl: "http://localhost:9000",
+    specPattern: "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}",
+  },
+});

cypress.config.ts

@@ -4,5 +4,5 @@
     "lib": ["es5", "dom"],
     "types": ["cypress", "cypress-axe", "@testing-library/cypress"]
   },
-  "include": ["./**/*.ts", "./.eslintrc.js"]
+  "include": ["./**/*.ts", "../cypress.config.ts", "./.eslintrc.js"]
 }

cypress.json

@@ -0,0 +1 @@
+export { default } from "./cypress/config";

cypress/config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from "cypress";
+import pluginConfig from "./plugins/index";
+
+export default defineConfig({
+  fixturesFolder: false,
+  chromeWebSecurity: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      pluginConfig(on);
+
+      return config;
+    },
+    baseUrl: "http://localhost:9000",
+    specPattern: "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}",
+  },
+});

cypress/e2e/sample.test.ts renamed to cypress/e2e/sample.cy.ts

@@ -14,7 +14,7 @@ type SiteMapData = {
 
 type ParseSitemapArgs = { siteUrl: string; sitemapString: string };
 
-const pluginConfig: Cypress.PluginConfig = (on) => {
+const pluginConfig = (on: Cypress.PluginEvents): void => {
   on("task", {
     // Parse the RSS feed and return a list of links to posts
     parseRss(rssString: string) {

cypress/support/index.ts renamed to cypress/support/e2e.ts

@@ -4,5 +4,5 @@
     "lib": ["es5", "dom"],
     "types": ["cypress", "cypress-axe", "@testing-library/cypress"]
   },
-  "include": ["./**/*.ts", "./.eslintrc.js"]
+  "include": ["./**/*.ts", "../cypress.config.ts", "./.eslintrc.js"]
 }

cypress/tsconfig.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "gatsby-theme-advanced-demo",
   "description": "GatsbyJS theme demo built on top of gatsby-theme-advanced.",
-  "version": "4.0.0",
+  "version": "4.17.0",
   "author": "Ruben Harutyunyan <vagr9k@gmail.com>",
   "keywords": [
     "gatsby",
@@ -39,9 +39,9 @@
     "test:e2e:ci": "CYPRESS_SUPPORT=y npm run build && start-server-and-test serve http://localhost:9000 cy:run"
   },
   "dependencies": {
-    "gatsby": "^4.0.0",
-    "gatsby-plugin-image": "^2.0.0",
-    "gatsby-plugin-mdx": "^3.0.0",
+    "gatsby": "^4.17.1",
+    "gatsby-plugin-image": "^2.17.0",
+    "gatsby-plugin-mdx": "^3.17.0",
     "gatsby-theme-advanced": "*",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
@@ -50,49 +50,52 @@
     "react-share": "^4.4.0"
   },
   "devDependencies": {
-    "@testing-library/cypress": "^8.0.1",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/jest": "^27.0.2",
-    "@types/lodash": "^4.14.176",
-    "@types/node": "^16.11.4",
-    "@types/react": "^17.0.31",
-    "@types/react-dom": "^17.0.10",
-    "@types/react-helmet": "^6.1.4",
-    "@types/xml2js": "^0.4.9",
-    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "axe-core": "^4.3.3",
-    "babel-jest": "^27.3.1",
-    "babel-preset-gatsby": "^2.0.0",
-    "cypress": "^8.6.0",
-    "cypress-axe": "^0.13.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-airbnb-typescript": "^14.0.1",
-    "eslint-config-prettier": "^8.3.0",
+    "@stylelint/postcss-css-in-js": "^0.38.0",
+    "@testing-library/cypress": "^8.0.3",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.5",
+    "@types/jest": "^28.1.3",
+    "@types/lodash": "^4.14.182",
+    "@types/node": "^18.0.0",
+    "@types/react": "^17.0.47",
+    "@types/react-dom": "^17.0.17",
+    "@types/react-helmet": "^6.1.5",
+    "@types/xml2js": "^0.4.11",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "axe-core": "^4.4.2",
+    "babel-jest": "^28.1.1",
+    "babel-preset-gatsby": "^2.17.0",
+    "cypress": "^10.2.0",
+    "cypress-axe": "^1.0.0",
+    "eslint": "^8.18.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jest": "^25.2.2",
-    "eslint-plugin-jest-dom": "^3.9.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-jest-dom": "^4.0.2",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "^4.12.4",
-    "gatsby-cypress": "^2.0.0",
-    "gh-pages": "^3.2.3",
-    "jest": "^27.3.1",
-    "markdownlint-cli2": "^0.3.2",
-    "prettier": "^2.4.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^5.5.1",
+    "gatsby-cypress": "^2.17.0",
+    "gh-pages": "^4.0.0",
+    "jest": "^28.1.1",
+    "markdownlint-cli2": "^0.4.0",
+    "postcss-syntax": "^0.36.2",
+    "prettier": "^2.7.1",
     "start-server-and-test": "^1.14.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-recommended": "^5.0.0",
-    "stylelint-prettier": "^1.2.0",
-    "ts-jest": "^27.0.7",
-    "ts-node": "^10.4.0",
-    "ts-prune": "^0.10.1",
-    "typescript": "^4.4.4",
+    "stylelint": "^14.9.1",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-recommended": "^8.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-prettier": "^2.0.0",
+    "ts-jest": "^28.0.5",
+    "ts-node": "^10.8.1",
+    "ts-prune": "^0.10.3",
+    "typescript": "^4.7.4",
     "write-good": "^1.0.8",
     "xml2js": "^0.4.23"
   }

examples/advanced-demo/cypress.config.ts

@@ -0,0 +1 @@
+export { default } from "./cypress/config";

examples/advanced-demo/cypress.json

@@ -0,0 +1,18 @@
+import { defineConfig } from "cypress";
+import pluginConfig from "./plugins/index";
+
+export default defineConfig({
+  fixturesFolder: false,
+  chromeWebSecurity: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      pluginConfig(on);
+
+      return config;
+    },
+    baseUrl: "http://localhost:9000",
+    specPattern: "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}",
+  },
+});

examples/advanced-demo/cypress/config.ts

@@ -14,7 +14,7 @@ type SiteMapData = {
 
 type ParseSitemapArgs = { siteUrl: string; sitemapString: string };
 
-const pluginConfig: Cypress.PluginConfig = (on) => {
+const pluginConfig = (on: Cypress.PluginEvents): void => {
   on("task", {
     // Parse the RSS feed and return a list of links to posts
     parseRss(rssString: string) {

examples/advanced-demo/cypress/e2e/accessibility.test.ts renamed to examples/advanced-demo/cypress/e2e/accessibility.cy.ts

@@ -4,5 +4,5 @@
     "lib": ["es5", "dom"],
     "types": ["cypress", "cypress-axe", "@testing-library/cypress"]
   },
-  "include": ["./**/*.ts", "./.eslintrc.js"]
+  "include": ["./**/*.ts", "../cypress.config.ts", ".eslintrc.js"]
 }