add test

Author: styfle

packages/next/src/server/config.ts

@@ -364,22 +364,19 @@ function assignDefaults(
         )
       }
 
-      // Convert URL to RemotePattern
+      // We must convert URL to RemotePattern since URL has a colon in the protocol
+      // and also has additional properties we want to filter out. Also, new URL()
+      // accepts any protocol so we need manual validation here.
       images.remotePatterns = images.remotePatterns.map(
         ({ protocol, hostname, port, pathname, search }) => {
-          if (
-            protocol &&
-            !['http', 'https', 'http:', 'https:'].includes(protocol)
-          ) {
+          const proto = protocol?.replace(/:$/, '')
+          if (!['http', 'https', undefined].includes(proto)) {
             throw new Error(
-              `Specified images.remotePatterns must have protocol "http" or "https" received "${protocol}".`
+              `Specified images.remotePatterns must have protocol "http" or "https" received "${proto}".`
             )
           }
           return {
-            protocol: protocol?.replace(/:$/, '') as
-              | 'http'
-              | 'https'
-              | undefined,
+            protocol: proto as 'http' | 'https' | undefined,
             hostname,
             port,
             pathname,

test/integration/image-optimizer/test/index.test.ts

@@ -567,6 +567,27 @@ describe('Image Optimizer', () => {
       )
     })
 
+    it('should error when images.remotePatterns URL has invalid protocol', async () => {
+      await nextConfig.replace(
+        '{ /* replaceme */ }',
+        `{ images: { remotePatterns: [new URL('file://example.com/**')] } }`
+      )
+      let stderr = ''
+
+      app = await launchApp(appDir, await findPort(), {
+        onStderr(msg) {
+          stderr += msg || ''
+        },
+      })
+      await waitFor(1000)
+      await killApp(app).catch(() => {})
+      await nextConfig.restore()
+
+      expect(stderr).toContain(
+        `Specified images.remotePatterns must have protocol "http" or "https" received "file"`
+      )
+    })
+
     it('should error when images.contentDispositionType is not valid', async () => {
       await nextConfig.replace(
         '{ /* replaceme */ }',