diff --git a/docs/docs/how-to/testing/end-to-end-testing.md b/docs/docs/how-to/testing/end-to-end-testing.md
index 61aaaa64e3070..fa2c422a2447c 100644
--- a/docs/docs/how-to/testing/end-to-end-testing.md
+++ b/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()
diff --git a/examples/using-cypress/README.md b/examples/using-cypress/README.md
index c38115d942927..7b5a4824da509 100644
--- a/examples/using-cypress/README.md
+++ b/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.
diff --git a/examples/using-cypress/cypress.config.js b/examples/using-cypress/cypress.config.js
new file mode 100644
index 0000000000000..1498823c30e88
--- /dev/null
+++ b/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"
+ }
+})
diff --git a/examples/using-cypress/cypress.json b/examples/using-cypress/cypress.json
deleted file mode 100644
index b3fa4e0598cc1..0000000000000
--- a/examples/using-cypress/cypress.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "baseUrl": "http://localhost:8000/",
- "integrationFolder": "cypress/e2e"
-}
diff --git a/examples/using-cypress/cypress/e2e/accessibility.test.js b/examples/using-cypress/cypress/e2e/accessibility.test.js
index ff755ba7cee8f..d510182690318 100644
--- a/examples/using-cypress/cypress/e2e/accessibility.test.js
+++ b/examples/using-cypress/cypress/e2e/accessibility.test.js
@@ -1,8 +1,7 @@
-///
-
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()
diff --git a/examples/using-cypress/cypress/plugins/index.js b/examples/using-cypress/cypress/plugins/index.js
deleted file mode 100644
index aa9918d215305..0000000000000
--- a/examples/using-cypress/cypress/plugins/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-///
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-module.exports = (on, config) => {
- // `on` is used to hook into various events Cypress emits
- // `config` is the resolved Cypress config
-}
diff --git a/examples/using-cypress/cypress/support/index.js b/examples/using-cypress/cypress/support/e2e.js
similarity index 100%
rename from examples/using-cypress/cypress/support/index.js
rename to examples/using-cypress/cypress/support/e2e.js
diff --git a/examples/using-cypress/gatsby-config.js b/examples/using-cypress/gatsby-config.js
index 999bd3d349f97..41974db097195 100644
--- a/examples/using-cypress/gatsby-config.js
+++ b/examples/using-cypress/gatsby-config.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: [],
}
diff --git a/examples/using-cypress/gatsby-ssr.js b/examples/using-cypress/gatsby-ssr.js
new file mode 100644
index 0000000000000..3a9b76c385f65
--- /dev/null
+++ b/examples/using-cypress/gatsby-ssr.js
@@ -0,0 +1,3 @@
+exports.onRenderBody = ({ setHtmlAttributes }) => {
+ setHtmlAttributes({ lang: `en` })
+}
\ No newline at end of file
diff --git a/examples/using-cypress/package.json b/examples/using-cypress/package.json
index 4185b26bef8fb..26bf4324531da 100644
--- a/examples/using-cypress/package.json
+++ b/examples/using-cypress/package.json
@@ -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"
diff --git a/examples/using-cypress/src/components/image.js b/examples/using-cypress/src/components/image.js
deleted file mode 100644
index b134a7b80be74..0000000000000
--- a/examples/using-cypress/src/components/image.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-/*
- * This component is built using `gatsby-image` to automatically serve optimized
- * images with lazy loading and reduced file sizes. The image is loaded using a
- * `useStaticQuery`, which allows us to load the image from directly within this
- * component, rather than having to pass the image data down from pages.
- *
- * For more information, see the docs:
- * - `gatsby-image`: https://gatsby.dev/gatsby-image
- * - `useStaticQuery`: https://www.gatsbyjs.com/docs/use-static-query/
- */
-
-const Image = () => {
- const data = useStaticQuery(graphql`
- query {
- placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
- childImageSharp {
- fluid(maxWidth: 300) {
- ...GatsbyImageSharpFluid
- }
- }
- }
- }
- `)
-
- return
-}
-
-export default Image
diff --git a/examples/using-cypress/src/components/layout.js b/examples/using-cypress/src/components/layout.js
index 67ae709096747..15a5e9382daf3 100644
--- a/examples/using-cypress/src/components/layout.js
+++ b/examples/using-cypress/src/components/layout.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"
diff --git a/examples/using-cypress/src/components/seo.js b/examples/using-cypress/src/components/seo.js
deleted file mode 100644
index b40a909ae8c8b..0000000000000
--- a/examples/using-cypress/src/components/seo.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * SEO component that queries for data with
- * Gatsby's useStaticQuery React hook
- *
- * See: https://www.gatsbyjs.com/docs/use-static-query/
- */
-
-import React from "react"
-import PropTypes from "prop-types"
-import Helmet from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
-
-function SEO({ description, lang, meta, title }) {
- const { site } = useStaticQuery(
- graphql`
- query {
- site {
- siteMetadata {
- title
- description
- author
- }
- }
- }
- `
- )
-
- const metaDescription = description || site.siteMetadata.description
-
- return (
-
- )
-}
-
-SEO.defaultProps = {
- lang: `en`,
- meta: [],
- description: ``,
-}
-
-SEO.propTypes = {
- description: PropTypes.string,
- lang: PropTypes.string,
- meta: PropTypes.arrayOf(PropTypes.object),
- title: PropTypes.string.isRequired,
-}
-
-export default SEO
diff --git a/examples/using-cypress/src/images/gatsby-astronaut.png b/examples/using-cypress/src/images/gatsby-astronaut.png
deleted file mode 100644
index da58ece0a8c5b..0000000000000
Binary files a/examples/using-cypress/src/images/gatsby-astronaut.png and /dev/null differ
diff --git a/examples/using-cypress/src/images/gatsby-icon.png b/examples/using-cypress/src/images/gatsby-icon.png
deleted file mode 100644
index 908bc78a7f559..0000000000000
Binary files a/examples/using-cypress/src/images/gatsby-icon.png and /dev/null differ
diff --git a/examples/using-cypress/src/pages/404.js b/examples/using-cypress/src/pages/404.js
index bc4c31d79353c..876a75e44ab88 100644
--- a/examples/using-cypress/src/pages/404.js
+++ b/examples/using-cypress/src/pages/404.js
@@ -1,14 +1,13 @@
import React from "react"
-
import Layout from "../components/layout"
-import SEO from "../components/seo"
const NotFoundPage = () => (
-
NOT FOUND
You just hit a route that doesn't exist... the sadness.
)
export default NotFoundPage
+
+export const Head = () => 404: Not found
diff --git a/examples/using-cypress/src/pages/index.js b/examples/using-cypress/src/pages/index.js
index 7eb6257d2e022..285edc99ff622 100644
--- a/examples/using-cypress/src/pages/index.js
+++ b/examples/using-cypress/src/pages/index.js
@@ -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 = () => (
-
Hi people
Welcome to your new Gatsby site.
Now go build something great.
-
-
-
Go to page 2
)
export default IndexPage
+
+export const Head = () => Home
diff --git a/examples/using-cypress/src/pages/page-2.js b/examples/using-cypress/src/pages/page-2.js
index 666c23ef30f9d..d00575fa98f44 100644
--- a/examples/using-cypress/src/pages/page-2.js
+++ b/examples/using-cypress/src/pages/page-2.js
@@ -1,12 +1,9 @@
import React from "react"
import { Link } from "gatsby"
-
import Layout from "../components/layout"
-import SEO from "../components/seo"
const SecondPage = () => (
-
Hi from the second page
Welcome to page 2
Go back to the homepage
@@ -14,3 +11,5 @@ const SecondPage = () => (
)
export default SecondPage
+
+export const Head = () => Page two