diff --git a/test/integration/image-component/default/pages/invalid-weight-or-height.js b/test/integration/image-component/default/pages/invalid-weight-or-height.js
new file mode 100644
index 0000000000000..b41d9f11085ce
--- /dev/null
+++ b/test/integration/image-component/default/pages/invalid-weight-or-height.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <div>
+      <p>Invalid weight or height</p>
+
+      <Image
+        src="/test.jpg"
+        width="fill"
+        height="fill"
+        layout="responsive"
+        placeholder="blur"
+        blurDataURL="/test.jpg"
+      />
+    </div>
+  )
+}
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index 3f0f666ee52c6..4f8a8d07625f9 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/test/integration/image-component/default/test/index.test.js
@@ -494,6 +494,15 @@ function runTests(mode) {
       )
     })
 
+    it('should show error when not numeric string width or height', async () => {
+      const browser = await webdriver(appPort, '/invalid-weight-or-height')
+
+      expect(await hasRedbox(browser)).toBe(true)
+      expect(await getRedboxHeader(browser)).toContain(
+        `Image with src "/test.jpg" has invalid "width" or "height" property. These should be numeric values.`
+      )
+    })
+
     it('should show error when static import and placeholder=blur and blurDataUrl is missing', async () => {
       const browser = await webdriver(
         appPort,