e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js

@@ -78,7 +78,7 @@ describe(`gatsby-plugin-image`, () => {
     testGatsbyPluginImage(`dominant-color`, hasColorPlaceholder)
   )
   it(`traced`, testConfig, () =>
-    testGatsbyPluginImage(`traced`, hasSVGPlaceholder)
+    testGatsbyPluginImage(`traced`, hasColorPlaceholder)
   )
   it(`blurred`, testConfig, () =>
     testGatsbyPluginImage(`blurred`, hasBase64Placeholder)

e2e-tests/contentful/package.json

@@ -5,13 +5,13 @@
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
     "@contentful/rich-text-types": "^14.1.2",
-    "gatsby": "next",
-    "gatsby-plugin-image": "next",
-    "gatsby-plugin-sharp": "next",
-    "gatsby-source-contentful": "next",
-    "gatsby-transformer-remark": "next",
-    "gatsby-transformer-sharp": "next",
-    "gatsby-transformer-sqip": "next",
+    "gatsby": "^4",
+    "gatsby-plugin-image": "^2",
+    "gatsby-plugin-sharp": "^4",
+    "gatsby-source-contentful": "^7",
+    "gatsby-transformer-remark": "^5",
+    "gatsby-transformer-sharp": "^4",
+    "gatsby-transformer-sqip": "^4",
     "modern-normalize": "^1.0.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
@@ -23,7 +23,7 @@
     "cross-env": "^7.0.3",
     "cypress": "^9.7.0",
     "cypress-image-snapshot": "^4.0.1",
-    "gatsby-cypress": "next",
+    "gatsby-cypress": "^2",
     "prettier": "^2.6.2",
     "srcset": "^5.0.0",
     "start-server-and-test": "^1.7.1"

e2e-tests/contentful/src/pages/gatsby-plugin-image.js

@@ -94,7 +94,9 @@ const GatsbyPluginImagePage = ({ data }) => {
         ))}
       </Grid>
 
-      <h2>gatsby-plugin-image: Traced SVG Placeholder</h2>
+      <h2>
+        gatsby-plugin-image: Traced SVG Placeholder (fallback to DOMINANT_COLOR)
+      </h2>
       <Grid data-cy="traced">
         {data.default.nodes.map(node => (
           <div key={node.title}>

e2e-tests/development-runtime/cypress/integration/remote-file/gatsby-plugin-image.js

@@ -126,8 +126,9 @@ describe(`remote-file`, () => {
     cy.get(".constrained_traced [data-placeholder-image]")
       .first()
       .should($el => {
-        expect($el.prop("tagName")).to.be.equal("IMG")
-        expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")
+        // traced falls back to DOMINANT_COLOR
+        expect($el.prop("tagName")).to.be.equal("DIV")
+        expect($el).to.be.empty
       })
     cy.get(".full [data-placeholder-image]")
       .first()

e2e-tests/development-runtime/cypress/integration/static-image/traced.js

@@ -5,12 +5,14 @@ describe(`fixed`, () => {
     cy.visit(`/static-image/traced`).waitForRouteChange()
   })
 
-  it(`renders a traced svg`, () => {
+  it(`traced svg (falls back to DOMINANT_COLOR)`, () => {
     cy.getTestElement(tracedTestId)
-      .find(`.gatsby-image-wrapper > img`)
-      .should(`have.attr`, `src`)
-      .and(src => {
-        ;[`data:image/svg+xml`].forEach(part => expect(src).to.include(part))
+      .find(`.gatsby-image-wrapper > [data-placeholder-image]`)
+      .first()
+      .should($el => {
+        // traced falls
+        expect($el.prop("tagName")).to.be.equal("DIV")
+        expect($el).to.be.empty
       })
   })
 

e2e-tests/development-runtime/gatsby-config.js

@@ -70,7 +70,7 @@ module.exports = {
     // 'gatsby-plugin-offline',
   ],
   partytownProxiedURLs: [
-    `https://unpkg.com/three@0.139.1/build/three.js`,
-    `http://localhost:8000/used-by-off-main-thread-2.js`,
+    `http://localhost:8888/three.js`,
+    `http://localhost:8000/used-by-off-main-thread-2.js`, // Meant to be same site
   ],
 }

e2e-tests/development-runtime/gatsby-script-scripts.js

@@ -6,10 +6,10 @@ export const script = {
 }
 
 export const scripts = {
-  [script.three]: `https://cdnjs.cloudflare.com/ajax/libs/three.js/0.144.0/three.min.js`,
-  [script.marked]: `https://cdn.jsdelivr.net/npm/marked/marked.min.js`,
-  [script.jQuery]: `https://code.jquery.com/jquery-3.4.1.min.js`,
-  [script.popper]: `https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js`,
+  [script.three]: `http://localhost:8888/three.js`,
+  [script.marked]: `http://localhost:8888/marked.js`,
+  [script.jQuery]: `http://localhost:8888/j-query.js`,
+  [script.popper]: `http://localhost:8888/popper.js`,
 }
 
 export const scriptStrategyIndex = {

e2e-tests/development-runtime/package.json

@@ -5,20 +5,20 @@
   "author": "Dustin Schau <dustin@gatsbyjs.com>",
   "dependencies": {
     "babel-plugin-search-and-replace": "^1.1.0",
-    "gatsby": "next",
-    "gatsby-image": "next",
-    "gatsby-plugin-image": "next",
-    "gatsby-plugin-less": "next",
-    "gatsby-plugin-manifest": "next",
-    "gatsby-plugin-offline": "next",
-    "gatsby-plugin-sass": "next",
-    "gatsby-plugin-sharp": "next",
-    "gatsby-plugin-stylus": "next",
-    "gatsby-remark-images": "next",
-    "gatsby-source-filesystem": "next",
-    "gatsby-transformer-json": "next",
-    "gatsby-transformer-remark": "next",
-    "gatsby-transformer-sharp": "next",
+    "gatsby": "^4",
+    "gatsby-image": "^3",
+    "gatsby-plugin-image": "^2",
+    "gatsby-plugin-less": "^6",
+    "gatsby-plugin-manifest": "^4",
+    "gatsby-plugin-offline": "^5",
+    "gatsby-plugin-sass": "^5",
+    "gatsby-plugin-sharp": "^4",
+    "gatsby-plugin-stylus": "^4",
+    "gatsby-remark-images": "^6",
+    "gatsby-source-filesystem": "^4",
+    "gatsby-transformer-json": "^4",
+    "gatsby-transformer-remark": "^5",
+    "gatsby-transformer-sharp": "^4",
     "node-fetch": "^2.6.1",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
@@ -33,6 +33,7 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "cross-env CYPRESS_SUPPORT=y ENABLE_GATSBY_REFRESH_ENDPOINT=true GATSBY_EXPERIMENTAL_QUERY_ON_DEMAND=y gatsby develop",
+    "serve-static-files": "node ./serve-static-files.mjs",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "typecheck": "tsc --noEmit",
@@ -46,14 +47,14 @@
     "update:webhook": "node scripts/webhook.js",
     "update:cms-webhook": "node scripts/cms-webhook.js",
     "update:preview": "curl -X POST -d \"{ \\\"fake-data-update\\\": true }\" -H \"Content-Type: application/json\" http://localhost:8000/__refresh",
-    "start-server-and-test": "start-server-and-test develop http://localhost:8000 combined",
-    "start-server-and-test:locally": "start-server-and-test develop http://localhost:8000 cy:open",
+    "start-server-and-test": "start-server-and-test develop http://localhost:8000 serve-static-files http://localhost:8888 combined",
+    "start-server-and-test:locally": "start-server-and-test develop http://localhost:8000 serve-static-files http://localhost:8888 cy:open",
     "cy:open": "cypress open",
     "cy:run": "node ../../scripts/cypress-run-with-conditional-record-flag.js --browser chrome",
     "playwright": "playwright test --project=chromium",
     "playwright:debug": "playwright test --project=chromium --debug",
-    "start-server-and-test:playwright": "start-server-and-test develop http://localhost:8000 playwright",
-    "start-server-and-test:playwright-debug": "start-server-and-test develop http://localhost:8000 playwright:debug",
+    "start-server-and-test:playwright": "start-server-and-test develop http://localhost:8000 serve-static-files http://localhost:8888 playwright",
+    "start-server-and-test:playwright-debug": "start-server-and-test develop http://localhost:8000 serve-static-files http://localhost:8888 playwright:debug",
     "combined": "npm run playwright && npm run cy:run",
     "postinstall": "playwright install chromium"
   },
@@ -63,9 +64,10 @@
     "cross-env": "^5.2.0",
     "cypress": "^9.7.0",
     "cypress-image-snapshot": "^4.0.1",
+    "express": "^4.18.1",
     "fs-extra": "^7.0.1",
-    "gatsby-core-utils": "next",
-    "gatsby-cypress": "next",
+    "gatsby-core-utils": "^3",
+    "gatsby-cypress": "^2",
     "is-ci": "^2.0.0",
     "prettier": "2.0.4",
     "start-server-and-test": "^1.7.11",

e2e-tests/development-runtime/playwright.config.ts

@@ -44,7 +44,6 @@ const config: PlaywrightTestConfig = {
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
   },
-
   /* Configure projects for major browsers */
   projects: [
     {

e2e-tests/development-runtime/playwright/gatsby-script-off-main-thread.spec.ts

@@ -21,7 +21,10 @@ test.describe(`off-main-thread scripts`, () => {
     const templateLiteral = page.locator(`[id=${id.templateLiteral}]`)
     const dangerouslySet = page.locator(`[id=${id.dangerouslySet}]`)
 
-    await expect(partytownSnippet).toContainText(/THREE/) // Forwards configured
+    // Unsure why this locator appears to behave differently, get text content to compare directly
+    const partytownSnippetText = await partytownSnippet.textContent()
+    expect(partytownSnippetText).toMatch(/THREE/) // Forwards configured
+
     await expect(templateLiteral).toHaveText(`${id.templateLiteral}: success`) // Template literal inline scripts loaded
     await expect(dangerouslySet).toHaveText(`${id.dangerouslySet}: success`) // Dangerously set inline scripts loaded
     await expect(scriptWithSrc).toHaveAttribute(`type`, `text/partytown-x`) // Scripts with sources loaded
@@ -39,7 +42,10 @@ test.describe(`off-main-thread scripts`, () => {
     const templateLiteral = page.locator(`[id=${id.templateLiteral}]`)
     const dangerouslySet = page.locator(`[id=${id.dangerouslySet}]`)
 
-    await expect(partytownSnippet).toContainText(/THREE/) // Forwards configured
+    // Unsure why this locator appears to behave differently, get text content to compare directly
+    const partytownSnippetText = await partytownSnippet.textContent()
+    expect(partytownSnippetText).toMatch(/THREE/) // Forwards configured
+
     await expect(templateLiteral).toHaveText(`${id.templateLiteral}: success`) // Template literal inline scripts loaded
     await expect(dangerouslySet).toHaveText(`${id.dangerouslySet}: success`) // Dangerously set inline scripts loaded
     await expect(scriptWithSrc).toHaveAttribute(`type`, `text/partytown-x`) // Scripts with sources loaded, use `type` attr Partytown mutates on success as proxy
@@ -57,7 +63,10 @@ test.describe(`off-main-thread scripts`, () => {
     const dangerouslySet = page.locator(`[id=${id.dangerouslySet}-2]`)
     const scriptWithSrc = page.locator(`[id=${id.scriptWithSrc}]`)
 
-    await expect(partytownSnippet).toContainText(/some-other-forward/) // Forwards configured
+    // Unsure why this locator appears to behave differently, get text content to compare directly
+    const partytownSnippetText = await partytownSnippet.textContent()
+    expect(partytownSnippetText).toMatch(/some-other-forward/) // Forwards configured
+
     await expect(templateLiteral).toHaveText(`${id.templateLiteral}-2: success`) // Template literal inline scripts loaded
     await expect(dangerouslySet).toHaveText(`${id.dangerouslySet}-2: success`) // Dangerously set inline scripts loaded
     await expect(scriptWithSrc).toHaveText(`${id.scriptWithSrc}: success`) // Scripts with sources loaded

e2e-tests/development-runtime/serve-static-files.mjs

@@ -0,0 +1,36 @@
+import express from "express"
+import fs from "fs-extra"
+
+/**
+ * Statically serve assets from `static` folder for tests. Reasons:
+ *
+ * - Making requests to third-party services we don't own can cause flakiness if the service has issues
+ * - Making requests to the same site as the test doesn't simulate real behavior as well as a separate site
+ */
+
+const app = express()
+const port = 8888
+
+app.use(express.static(`static`))
+
+app.get(`/`, (_, res) => {
+  const staticFiles = fs.readdirSync(`static`)
+
+  const staticFilesHTML = staticFiles
+    .map(file => `<li><a href="${file}">${file}</a></li>`)
+    .join(``)
+
+  res.send(
+    `
+    This is a static file server for tests. It serves files from the <code>static</code> folder.
+    Files include:
+    \n<ul>${staticFilesHTML}</ul>
+    `
+  )
+})
+
+app.listen(port, () => {
+  console.info(
+    `Static file server is serving files from \`static\` and available at http://localhost:${port}`
+  )
+})

e2e-tests/development-runtime/static/j-query.js

@@ -0,0 +1,3 @@
+;(() => {
+  window.jQuery = () => `It loaded`
+})()

e2e-tests/development-runtime/static/marked.js

@@ -0,0 +1,5 @@
+;(() => {
+  window.marked = {
+    it: `loaded`,
+  }
+})()

e2e-tests/development-runtime/static/popper.js

@@ -0,0 +1,3 @@
+;(() => {
+  window.Popper = () => `It loaded`
+})()

e2e-tests/development-runtime/static/three.js

@@ -0,0 +1,5 @@
+;(() => {
+  window.THREE = {
+    it: `loaded`,
+  }
+})()

e2e-tests/mdx/package.json

@@ -7,13 +7,13 @@
     "@sindresorhus/slugify": "^1.0.0",
     "cypress": "^9.7.0",
     "fs-extra": "^8.1.0",
-    "gatsby": "next",
-    "gatsby-plugin-mdx": "next",
-    "gatsby-plugin-sharp": "next",
+    "gatsby": "^4",
+    "gatsby-plugin-mdx": "^4",
+    "gatsby-plugin-sharp": "^4",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.27",
-    "gatsby-remark-autolink-headers": "next",
-    "gatsby-remark-images": "next",
-    "gatsby-source-filesystem": "next",
+    "gatsby-remark-autolink-headers": "^5",
+    "gatsby-remark-images": "^6",
+    "gatsby-source-filesystem": "^4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "theme-ui": "^0.3.1"
@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "cross-env": "^5.2.0",
-    "gatsby-cypress": "next",
+    "gatsby-cypress": "^2",
     "is-ci": "^2.0.0",
     "prettier": "2.0.4",
     "start-server-and-test": "^1.7.1"

e2e-tests/path-prefix/package.json

@@ -5,15 +5,15 @@
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
     "cypress": "^9.7.0",
-    "gatsby": "next",
-    "gatsby-plugin-feed": "next",
-    "gatsby-plugin-image": "next",
-    "gatsby-plugin-manifest": "next",
-    "gatsby-plugin-offline": "next",
-    "gatsby-plugin-sharp": "next",
-    "gatsby-plugin-sitemap": "next",
-    "gatsby-source-filesystem": "next",
-    "gatsby-transformer-sharp": "next",
+    "gatsby": "^4",
+    "gatsby-plugin-feed": "^4",
+    "gatsby-plugin-image": "^2",
+    "gatsby-plugin-manifest": "^4",
+    "gatsby-plugin-offline": "^5",
+    "gatsby-plugin-sharp": "^4",
+    "gatsby-plugin-sitemap": "^5",
+    "gatsby-source-filesystem": "^4",
+    "gatsby-transformer-sharp": "^4",
     "http-proxy": "^1.18.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
@@ -40,7 +40,7 @@
     "cpy-cli": "^2.0.0",
     "cross-env": "^5.2.0",
     "del-cli": "^3.0.0",
-    "gatsby-cypress": "next",
+    "gatsby-cypress": "^2",
     "is-ci": "^2.0.0",
     "make-dir-cli": "^2.0.0",
     "npm-run-all": "^4.1.5",