fix(gatsby-remark-image-contentful): show useful error message for files that can not be rendered as image (#32530)

axe312ger · web-flow · commit 77e9aabdff51 · 2021-08-06T14:49:04.000+02:00
* fix: show useful error message for files that can not be rendered as image fixes #32511 * test(unit): improve sharp mock
diff --git a/packages/gatsby-remark-images-contentful/src/__tests__/index.js b/packages/gatsby-remark-images-contentful/src/__tests__/index.js
@@ -16,18 +16,33 @@ jest.mock(`../utils/`, () => {
 })
 
 jest.mock(`axios`)
-jest.mock(`sharp`, () => () => {
-  return {
-    metadata: jest.fn(() => {
-      return {
-        width: 200,
-        height: 200,
-        density: 75,
-      }
-    }),
+
+jest.mock(`sharp`, () => {
+  const metadataMock = jest.fn(() => {
+    return {
+      width: 200,
+      height: 200,
+      density: 75,
+    }
+  })
+
+  const sharp = () => {
+    const pipeline = {
+      metadata: metadataMock,
+    }
+    return pipeline
   }
+
+  sharp.metadataMock = metadataMock
+
+  return sharp
 })
 
+const sharp = require(`sharp`)
+const mockSharpFailure = () => {
+  sharp.metadataMock.mockRejectedValueOnce(new Error(`invalid image`))
+}
+
 const createNode = content => {
   const node = {
     id: 1234,
@@ -131,7 +146,6 @@ test(`it transforms images in markdown`, async () => {
   const content = `
 ![image](${imagePath})
   `.trim()
-
   const nodes = await plugin(createPluginOptions(content, imagePath))
 
   expect(nodes.length).toBe(1)
@@ -237,3 +251,25 @@ test(`it transforms images in markdown with webp srcSets if option is enabled`,
   expect(node.value).toMatchSnapshot()
   expect(node.value).not.toMatch(`<html>`)
 })
+
+test(`it shows an useful error message when the file is not a valid image`, async () => {
+  mockSharpFailure()
+
+  const imagePath = `//images.ctfassets.net/k8iqpp6u0ior/752jwCIe9dwtfi9mLbp9m2/bc588ee25cf8299bc33a56ca32f8677b/Gatsby-Logos.zip`
+
+  const content = `
+![image](${imagePath})
+  `.trim()
+
+  const reporter = {
+    panic: jest.fn(),
+  }
+
+  await plugin(createPluginOptions(content, imagePath, { reporter }))
+
+  expect(reporter.panic).toHaveBeenCalledTimes(1)
+  expect(reporter.panic).toHaveBeenCalledWith(
+    `The image "${imagePath}" (with alt text: "image") doesn't appear to be a supported image format.`,
+    expect.any(Error)
+  )
+})
diff --git a/packages/gatsby-remark-images-contentful/src/index.js b/packages/gatsby-remark-images-contentful/src/index.js
@@ -64,6 +64,7 @@ module.exports = async (
     }
     const metaReader = sharp()
 
+    // @todo to increase reliablility, this should use the asset downloading function from gatsby-source-contentful
     let response
     try {
       response = await axios({
@@ -81,7 +82,15 @@ module.exports = async (
 
     response.data.pipe(metaReader)
 
-    const metadata = await metaReader.metadata()
+    let metadata
+    try {
+      metadata = await metaReader.metadata()
+    } catch (error) {
+      reporter.panic(
+        `The image "${node.url}" (with alt text: "${node.alt}") doesn't appear to be a supported image format.`,
+        error
+      )
+    }
 
     response.data.destroy()
 
