fix(gatsby-image): do not render the source tag if no srcSet is provided (#26766)

anasbouzid · web-flow · commit 268d9821eae2 · 2020-09-03T12:40:04.000+02:00
diff --git a/packages/gatsby-image/src/__tests__/index.js b/packages/gatsby-image/src/__tests__/index.js
@@ -369,4 +369,16 @@ describe(`<Image />`, () => {
     const placeholderImageTag = setup().querySelector(`picture img`)
     expect(placeholderImageTag.getAttribute(`aria-hidden`)).toBe(null)
   })
+
+  it(`should not have a "source" tag if no srcSet is provided`, () => {
+    jest.spyOn(global.console, `warn`)
+
+    const props = {
+      fixed: { ...fixedShapeMock, srcSet: null, srcSetWebp: null },
+    }
+    const sourceTag = setup(false, props).querySelector(`source`)
+    expect(sourceTag).toEqual(null)
+
+    expect(console.warn).toBeCalled()
+  })
 })
diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js
@@ -176,7 +176,7 @@ function generateImageSources(imageVariants) {
           sizes={sizes}
         />
       )}
-      <source media={media} srcSet={srcSet} sizes={sizes} />
+      {srcSet && <source media={media} srcSet={srcSet} sizes={sizes} />}
     </React.Fragment>
   ))
 }

Original file line number	Diff line number	Diff line change
`@@ -176,7 +176,7 @@ function generateImageSources(imageVariants) {`
`176`	`176`	`sizes={sizes}`
`177`	`177`	`/>`
`178`	`178`	`)}`
`179`		`- <source media={media} srcSet={srcSet} sizes={sizes} />`
	`179`	`+ {srcSet && <source media={media} srcSet={srcSet} sizes={sizes} />}`
`180`	`180`	`</React.Fragment>`
`181`	`181`	`))`
`182`	`182`	`}`