chore(docs): Upgrade Cypress to v10 in E2E Testing (#36204)

* Upgraded Cypress to Version 10 (fixes #36097)

* Added chonges to example

* we -> you

* Update end-to-end-testing.md

* fix example

Co-authored-by: Lennart <lekoarts@gmail.com>

Author: nodebotanist

docs/docs/how-to/testing/end-to-end-testing.md

@@ -13,15 +13,20 @@ To run Gatsby's development server and Cypress at the same time, you'll use the
 npm install --save-dev cypress start-server-and-test
 ```
 
-We also want the URLs used by `cy.visit()` or `cy.request()` to be prefixed, hence you have to create the file `cypress.json` at the root of your project with the following content:
+You need to create a config file for Cypress at the root of the project called `cypress.config.js`. You can use it to preface the URLs used by `cy.visit()` or `cy.request` as well as set the folder the tests are in by adding the following:
 
-```json:title=cypress.json
-{
-  "baseUrl": "http://localhost:8000/"
-}
+```js:title=cypress.config.js
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:8000',
+    specPattern: "cypress/e2e"
+  }
+})
 ```
 
-Last but not least you add additional scripts to your `package.json` to run Cypress:
+You also need to add additional scripts to your `package.json` to run Cypress:
 
 ```json:title=package.json
 {
@@ -37,7 +42,7 @@ Last but not least you add additional scripts to your `package.json` to run Cypr
 
 Type `npm run test:e2e` in your command line and see Cypress running for the first time. A folder named `cypress` will be created at the root of your project and a new application window will pop up. [Cypress' getting started guide](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#) is a good start to learn how to write tests!
 
-_Important note_: If you are running Gatsby with the `--https` flag, whether using your own or automatically generated certificates, you will also need to tell `start-server-and-test` to disable HTTPS certificate checks (otherwise it will wait forever and never actually launch Cypress. You do this by passing in an environmental variable: `START_SERVER_AND_TEST_INSECURE=1`. [start-server-and-test docs](https://github.com/bahmutov/start-server-and-test#disable-https-certificate-checks)).
+**Please note:** If you are running Gatsby with the `--https` flag, whether using your own or automatically generated certificates, you will also need to tell `start-server-and-test` to disable HTTPS certificate checks (otherwise it will wait forever and never actually launch Cypress. You do this by passing in an environmental variable: `START_SERVER_AND_TEST_INSECURE=1`. [start-server-and-test docs](https://github.com/bahmutov/start-server-and-test#disable-https-certificate-checks)).
 
 This means your `test:e2e` script would look like this:
 
@@ -75,26 +80,16 @@ To use cypress-axe, you have to install the `cypress-axe` and [axe-core](https:/
 npm install --save-dev cypress-axe axe-core @testing-library/cypress
 ```
 
-Then you add the `cypress-axe` and `@testing-library/cypress` commands in `cypress/support/index.js`:
+Then you add the `cypress-axe` and `@testing-library/cypress` commands in `cypress/support/e2e.js`:
 
-```js:title=cypress/support/index.js
-import "./commands"
+```js:title=cypress/support/e2e.js
 //highlight-start
 import "cypress-axe"
 import "@testing-library/cypress/add-commands"
 //highlight-end
 ```
 
-Cypress will look for tests inside the `cypress/integration` folder, but you can change the default test folder if you want. Because you're writing end-to-end tests, create a new folder called `cypress/e2e`, and use it as your `integrationFolder` in your `cypress.json`:
-
-```json:title=cypress.json
-{
-  "baseUrl": "http://localhost:8000/",
-  "integrationFolder": "cypress/e2e" // highlight-line
-}
-```
-
-Create a new file inside `cypress/e2e` folder and name it `accessibility.test.js`.
+Create a folder inside the cypress folder and a new file inside `cypress/e2e` folder and name it `accessibility.test.js`.
 
 You'll use the `beforeEach` hook to run some commands before each test. This is what they do:
 
@@ -109,7 +104,8 @@ Finally, inside the first test, you'll use the `checkA11y` command from `cypress
 
 describe("Accessibility tests", () => {
   beforeEach(() => {
-    cy.visit("/").get("main").injectAxe()
+      cy.visit("/").get("main")
+      cy.injectAxe()
   })
   it("Has no detectable accessibility violations on load", () => {
     cy.checkA11y()
@@ -132,7 +128,8 @@ The following test is for the [gatsby-default-starter](https://github.com/gatsby
 
 describe("Accessibility tests", () => {
   beforeEach(() => {
-    cy.visit("/").get("main").injectAxe()
+      cy.visit("/").get("main")
+      cy.injectAxe()
   })
   it("Has no detectable accessibility violations on load", () => {
     cy.checkA11y()
@@ -156,11 +153,13 @@ You'll now write another test for the `gatsby-default-starter` homepage. In this
 
 describe("Accessibility tests", () => {
   beforeEach(() => {
-    cy.visit("/").get("main").injectAxe()
+      cy.visit("/").get("main")
+      cy.injectAxe()
   })
   it("Has no detectable accessibility violations on load", () => {
     cy.checkA11y()
   })
+
   it("Navigates to page 2 and checks for accessibility violations", () => {
     cy.findByText(/go to page 2/i)
       .click()

examples/using-cypress/README.md

@@ -7,4 +7,4 @@ Gatsby example site that shows how to write accessibility tests with Cypress and
 - `npm install`
 - `npm run test:e2e`
 
-See the [End-to-End Testing](https://www.gatsbyjs.com/docs/end-to-end-testing/) guide for a walkthrough and more details.
+See the [End-to-End Testing](https://www.gatsbyjs.com/docs/how-to/testing/end-to-end-testing/) guide for a walkthrough and more details.

examples/using-cypress/cypress.config.js

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

examples/using-cypress/cypress.json

@@ -1,8 +1,7 @@
-/// <reference types="Cypress" />
-
 describe("Accessibility tests", () => {
   beforeEach(() => {
-    cy.visit("/").get("main").injectAxe()
+      cy.visit("/").get("main")
+      cy.injectAxe()
   })
   it("Has no detectable accessibility violations on load", () => {
     cy.checkA11y()

examples/using-cypress/cypress/e2e/accessibility.test.js

@@ -4,31 +4,5 @@ module.exports = {
     description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
     author: `@gatsbyjs`,
   },
-  plugins: [
-    `gatsby-plugin-react-helmet`,
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `images`,
-        path: `${__dirname}/src/images`,
-      },
-    },
-    `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
-    {
-      resolve: `gatsby-plugin-manifest`,
-      options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
-        start_url: `/`,
-        background_color: `#663399`,
-        theme_color: `#663399`,
-        display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
-      },
-    },
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
-  ],
+  plugins: [],
 }

examples/using-cypress/cypress/plugins/index.js

@@ -0,0 +1,3 @@
+exports.onRenderBody = ({ setHtmlAttributes }) => {
+  setHtmlAttributes({ lang: `en` })
+}

examples/using-cypress/cypress/support/index.js examples/using-cypress/cypress/support/e2e.js

@@ -7,8 +7,6 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
-    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
-    "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "cy:open": "cypress open",
@@ -18,25 +16,16 @@
   },
   "dependencies": {
     "gatsby": "next",
-    "gatsby-image": "next",
-    "gatsby-plugin-manifest": "next",
-    "gatsby-plugin-offline": "next",
-    "gatsby-plugin-react-helmet": "next",
-    "gatsby-plugin-sharp": "next",
-    "gatsby-source-filesystem": "next",
-    "gatsby-transformer-sharp": "next",
-    "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-helmet": "^5.2.1"
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@testing-library/cypress": "^5.3.1",
-    "axe-core": "^3.5.5",
-    "cypress": "^4.12.1",
-    "cypress-axe": "^0.8.1",
-    "prettier": "2.1.1",
-    "start-server-and-test": "^1.11.3"
+    "@testing-library/cypress": "^8.0.3",
+    "axe-core": "^4.4.3",
+    "cypress": "^10.3.1",
+    "cypress-axe": "^1.0.0",
+    "start-server-and-test": "^1.14.0"
   },
   "keywords": [
     "gatsby"

examples/using-cypress/gatsby-config.js

@@ -1,10 +1,3 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.com/docs/use-static-query/
- */
-
 import React from "react"
 import PropTypes from "prop-types"
 import { useStaticQuery, graphql } from "gatsby"

examples/using-cypress/gatsby-ssr.js

@@ -1,14 +1,13 @@
 import React from "react"
-
 import Layout from "../components/layout"
-import SEO from "../components/seo"
 
 const NotFoundPage = () => (
   <Layout>
-    <SEO title="404: Not found" />
     <h1>NOT FOUND</h1>
     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
   </Layout>
 )
 
 export default NotFoundPage
+
+export const Head = () => <title>404: Not found</title>

examples/using-cypress/package.json

@@ -1,21 +1,16 @@
 import React from "react"
 import { Link } from "gatsby"
-
 import Layout from "../components/layout"
-import Image from "../components/image"
-import SEO from "../components/seo"
 
 const IndexPage = () => (
   <Layout>
-    <SEO title="Home" />
     <h1>Hi people</h1>
     <p>Welcome to your new Gatsby site.</p>
     <p>Now go build something great.</p>
-    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
-      <Image />
-    </div>
     <Link to="/page-2/">Go to page 2</Link>
   </Layout>
 )
 
 export default IndexPage
+
+export const Head = () => <title>Home</title>

examples/using-cypress/src/components/image.js

@@ -1,16 +1,15 @@
 import React from "react"
 import { Link } from "gatsby"
-
 import Layout from "../components/layout"
-import SEO from "../components/seo"
 
 const SecondPage = () => (
   <Layout>
-    <SEO title="Page two" />
     <h1>Hi from the second page</h1>
     <p>Welcome to page 2</p>
     <Link to="/">Go back to the homepage</Link>
   </Layout>
 )
 
 export default SecondPage
+
+export const Head = () => <title>Page two</title>