test: add Sharp image snapshot helper

Author: shuding

test/utils.tsx

@@ -3,6 +3,7 @@ import { join } from 'path'
 import { Resvg } from '@resvg/resvg-js'
 import { toMatchImageSnapshot } from 'jest-image-snapshot'
 import { readFile } from 'node:fs/promises'
+import Sharp from 'sharp'
 
 import { type SatoriOptions } from '../src/index.js'
 
@@ -57,6 +58,22 @@ export function toImage(svg: string, width = 100) {
   return pngData.asPng()
 }
 
+export async function toImageWithSharp(svg: string, width = 100) {
+  const webpDataUris = svg.match(/data:image\/webp;base64,[^"']+/g) || []
+
+  for (const dataUri of webpDataUris) {
+    // Resvg cannot decode embedded WebP, so transcode only the image payload.
+    const webp = Buffer.from(dataUri.slice(dataUri.indexOf(',') + 1), 'base64')
+    const png = await Sharp(webp).png().toBuffer()
+    svg = svg.replace(
+      dataUri,
+      `data:image/png;base64,${png.toString('base64')}`
+    )
+  }
+
+  return toImage(svg, width)
+}
+
 declare global {
   namespace jest {
     interface Matchers<R> {

test/webp.test.tsx

@@ -1,9 +1,8 @@
 import { describe, expect, it } from 'vitest'
-import Sharp from 'sharp'
 
 import satori from '../src/index.js'
 import { resolveImageData } from '../src/handler/image.js'
-import { toImage } from './utils.js'
+import { toImageWithSharp } from './utils.js'
 
 const WEBP_CASES = [
   [
@@ -30,30 +29,14 @@ function decodeBase64(data: string) {
   return Uint8Array.from(atob(data), (char) => char.charCodeAt(0)).buffer
 }
 
-async function toImageWithWebP(svg: string, width: number) {
-  const webpDataUris = svg.match(/data:image\/webp;base64,[^"']+/g) || []
-
-  for (const dataUri of webpDataUris) {
-    // Resvg cannot decode embedded WebP, so transcode only the image payload.
-    const webp = Buffer.from(dataUri.slice(dataUri.indexOf(',') + 1), 'base64')
-    const png = await Sharp(webp).png().toBuffer()
-    svg = svg.replace(
-      dataUri,
-      `data:image/png;base64,${png.toString('base64')}`
-    )
-  }
-
-  return toImage(svg, width)
-}
-
 describe('WebP images', () => {
   it.each(WEBP_CASES)('renders %s images', async (_, data, width, height) => {
     const svg = await satori(<img src={`data:image/webp;base64,${data}`} />, {
       width,
       height,
       fonts: [],
     })
-    expect(await toImageWithWebP(svg, width * 10)).toMatchImageSnapshot()
+    expect(await toImageWithSharp(svg, width * 10)).toMatchImageSnapshot()
   })
 
   it.each(WEBP_CASES)(