gatsbyjs · Nov 23, 2022 · Nov 23, 2022 · Nov 23, 2022 · Nov 23, 2022 · Dec 6, 2022
diff --git a/e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js b/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)

diff --git a/e2e-tests/contentful/cypress/snapshots/gatsby-plugin-image.js/english-0.snap.png b/e2e-tests/contentful/cypress/snapshots/gatsby-plugin-image.js/english-0.snap.png
diff --git a/e2e-tests/contentful/snapshots.js b/e2e-tests/contentful/snapshots.js
diff --git a/e2e-tests/contentful/src/pages/gatsby-plugin-image.js b/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}>

diff --git a/e2e-tests/development-runtime/cypress/integration/remote-file/gatsby-plugin-image.js b/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()

diff --git a/e2e-tests/development-runtime/cypress/integration/static-image/traced.js b/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
       })
   })
 

diff --git a/e2e-tests/production-runtime/cypress/integration/remote-file.js b/e2e-tests/production-runtime/cypress/integration/remote-file.js
@@ -1,143 +1,147 @@
 describe(
-  `remote-file`, 
+  `remote-file`,
   {
     retries: {
       runMode: 4,
     },
   },
   () => {
-  beforeEach(() => {
-    cy.visit(`/remote-file/`).waitForRouteChange()
+    beforeEach(() => {
+      cy.visit(`/remote-file/`).waitForRouteChange()
 
-    // trigger intersection observer
-    cy.scrollTo("top")
-    cy.wait(100)
-    cy.scrollTo("bottom", {
-      duration: 500,
-    })
-    cy.wait(500)
-  })
-
-  async function testImages(images, expectations) {
-    for (let i = 0; i < images.length; i++) {
-      const expectation = expectations[i]
-
-      const res = await fetch(images[i].currentSrc, {
-        method: "HEAD",
+      // trigger intersection observer
+      cy.scrollTo("top")
+      cy.wait(100)
+      cy.scrollTo("bottom", {
+        duration: 500,
       })
-      expect(res.ok).to.be.true
-      if (expectation.width) {
-        expect(Math.ceil(images[i].getBoundingClientRect().width)).to.be.equal(
-          expectation.width
-        )
-      }
-      if (expectation.height) {
-        expect(Math.ceil(images[i].getBoundingClientRect().height)).to.be.equal(
-          expectation.height
-        )
-      }
-    }
-  }
+      cy.wait(500)
+    })
 
-  it(`should render correct dimensions`, () => {
-    cy.get('[data-testid="public"]').then(async $urls => {
-      const urls = Array.from($urls.map((_, $url) => $url.getAttribute("href")))
+    async function testImages(images, expectations) {
+      for (let i = 0; i < images.length; i++) {
+        const expectation = expectations[i]
 
-      for (const url of urls) {
-        const res = await fetch(url, {
+        const res = await fetch(images[i].currentSrc, {
           method: "HEAD",
         })
         expect(res.ok).to.be.true
+        if (expectation.width) {
+          expect(
+            Math.ceil(images[i].getBoundingClientRect().width)
+          ).to.be.equal(expectation.width)
+        }
+        if (expectation.height) {
+          expect(
+            Math.ceil(images[i].getBoundingClientRect().height)
+          ).to.be.equal(expectation.height)
+        }
       }
-    })
-
-    cy.get(".resize").then(async $imgs => {
-      await testImages(Array.from($imgs), [
-        {
-          width: 100,
-          height: 133,
-        },
-        {
-          width: 100,
-          height: 160,
-        },
-        {
-          width: 100,
-          height: 67,
-        },
-      ])
-    })
+    }
 
-    cy.get(".fixed").then(async $imgs => {
-      await testImages(Array.from($imgs), [
-        {
-          width: 100,
-          height: 133,
-        },
-        {
-          width: 100,
-          height: 160,
-        },
-        {
-          width: 100,
-          height: 67,
-        },
-      ])
-    })
+    it(`should render correct dimensions`, () => {
+      cy.get('[data-testid="public"]').then(async $urls => {
+        const urls = Array.from(
+          $urls.map((_, $url) => $url.getAttribute("href"))
+        )
 
-    cy.get(".constrained").then(async $imgs => {
-      await testImages(Array.from($imgs), [
-        {
-          width: 300,
-          height: 400,
-        },
-        {
-          width: 300,
-          height: 481,
-        },
-        {
-          width: 300,
-          height: 200,
-        },
-      ])
-    })
+        for (const url of urls) {
+          const res = await fetch(url, {
+            method: "HEAD",
+          })
+          expect(res.ok).to.be.true
+        }
+      })
 
-    cy.get(".full").then(async $imgs => {
-      await testImages(Array.from($imgs), [
-        {
-          height: 1229,
-        },
-        {
-          height: 1478,
-        },
-        {
-          height: 614,
-        },
-      ])
-    })
-  })
+      cy.get(".resize").then(async $imgs => {
+        await testImages(Array.from($imgs), [
+          {
+            width: 100,
+            height: 133,
+          },
+          {
+            width: 100,
+            height: 160,
+          },
+          {
+            width: 100,
+            height: 67,
+          },
+        ])
+      })
 
-  it(`should render a placeholder`, () => {
-    cy.get(".fixed [data-placeholder-image]")
-      .first()
-      .should("have.css", "background-color", "rgb(232, 184, 8)")
-    cy.get(".constrained [data-placeholder-image]")
-      .first()
-      .should($el => {
-        expect($el.prop("tagName")).to.be.equal("IMG")
-        expect($el.prop("src")).to.contain("data:image/jpg;base64")
+      cy.get(".fixed").then(async $imgs => {
+        await testImages(Array.from($imgs), [
+          {
+            width: 100,
+            height: 133,
+          },
+          {
+            width: 100,
+            height: 160,
+          },
+          {
+            width: 100,
+            height: 67,
+          },
+        ])
       })
-    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")
+
+      cy.get(".constrained").then(async $imgs => {
+        await testImages(Array.from($imgs), [
+          {
+            width: 300,
+            height: 400,
+          },
+          {
+            width: 300,
+            height: 481,
+          },
+          {
+            width: 300,
+            height: 200,
+          },
+        ])
       })
-    cy.get(".full [data-placeholder-image]")
-      .first()
-      .should($el => {
-        expect($el.prop("tagName")).to.be.equal("DIV")
-        expect($el).to.be.empty
+
+      cy.get(".full").then(async $imgs => {
+        await testImages(Array.from($imgs), [
+          {
+            height: 1229,
+          },
+          {
+            height: 1478,
+          },
+          {
+            height: 614,
+          },
+        ])
       })
-  })
-})
+    })
+
+    it(`should render a placeholder`, () => {
+      cy.get(".fixed [data-placeholder-image]")
+        .first()
+        .should("have.css", "background-color", "rgb(232, 184, 8)")
+      cy.get(".constrained [data-placeholder-image]")
+        .first()
+        .should($el => {
+          expect($el.prop("tagName")).to.be.equal("IMG")
+          expect($el.prop("src")).to.contain("data:image/jpg;base64")
+        })
+      cy.get(".constrained_traced [data-placeholder-image]")
+        .first()
+        .should($el => {
+          // 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()
+        .should($el => {
+          expect($el.prop("tagName")).to.be.equal("DIV")
+          expect($el).to.be.empty
+        })
+    })
+  }
+)
diff --git a/e2e-tests/production-runtime/cypress/integration/static-image/traced.js b/e2e-tests/production-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
       })
   })
 

diff --git a/examples/using-contentful/package.json b/examples/using-contentful/package.json
@@ -30,6 +30,7 @@
   "scripts": {
     "develop": "gatsby develop",
     "build": "gatsby build",
+    "clean": "gatsby clean",
     "start": "gatsby serve"
   }
 }
diff --git a/integration-tests/gatsby-cli/__tests__/new.js b/integration-tests/gatsby-cli/__tests__/new.js
@@ -29,7 +29,11 @@ describe(`gatsby new`, () => {
   })
 
   it(`creates a gatsby site with the default starter`, () => {
-    const [code, logs] = GatsbyCLI.from(cwd).invoke([`new`, `gatsby-default`])
+    const [code, logs] = GatsbyCLI.from(cwd).invoke([
+      `new`,
+      `gatsby-default`,
+      `gatsbyjs/gatsby-starter-default#v4`,
+    ])
 
     logs.should.contain(
       `info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git`
@@ -48,7 +52,7 @@ describe(`gatsby new`, () => {
     const [code, logs] = GatsbyCLI.from(cwd).invoke([
       `new`,
       `gatsby-blog`,
-      `gatsbyjs/gatsby-starter-blog`,
+      `gatsbyjs/gatsby-starter-blog#v4`,
     ])
 
     logs.should.contain(