Add additional tests for image type detection

packages/next/server/image-optimizer.ts

@@ -497,7 +497,7 @@ function parseCacheControl(str: string | null): Map<string, string> {
  * it matches the "magic number" of known file signatures.
  * https://en.wikipedia.org/wiki/List_of_file_signatures
  */
-function detectContentType(buffer: Buffer) {
+export function detectContentType(buffer: Buffer) {
   if ([0xff, 0xd8, 0xff].every((b, i) => buffer[i] === b)) {
     return JPEG
   }

test/integration/image-optimizer/test/detect-content-type.test.js

@@ -0,0 +1,25 @@
+/* eslint-env jest */
+import { detectContentType } from '../../../../packages/next/dist/server/image-optimizer.js'
+import { readFile } from 'fs/promises'
+import { join } from 'path'
+
+const getImage = (filepath) => readFile(join(__dirname, filepath))
+
+describe('detectContentType', () => {
+  it('should return jpg', async () => {
+    const buffer = await getImage('../public/test.jpg')
+    expect(detectContentType(buffer)).toBe('image/jpeg')
+  })
+  it('should return png', async () => {
+    const buffer = await getImage('../public/test.png')
+    expect(detectContentType(buffer)).toBe('image/png')
+  })
+  it('should return webp', async () => {
+    const buffer = await getImage('../public/animated.webp')
+    expect(detectContentType(buffer)).toBe('image/webp')
+  })
+  it('should return svg', async () => {
+    const buffer = await getImage('../public/test.svg')
+    expect(detectContentType(buffer)).toBe('image/svg+xml')
+  })
+})