วิธีจัดการกับ Next/Image ใน NextJS เพื่อใช้งานกับ Component Testing ใน Cypress

import Image from 'next/image'
import React from 'react'

type Props = {}

const CustomImage = (props: Props) => {
  return (
    <div>
      <h1>Custom Image</h1>
      {/* public/example.webp */}
      <Image src='/example.webp' alt='example image' width={300} height={165} />
    </div>
  )
}

export default CustomImage

npm install -D webpack
หรือ
yarn add -D webpack

import { defineConfig } from "cypress";
import path from "path";
import { NormalModuleReplacementPlugin } from "webpack";

export default defineConfig({
  component: {
    devServer: {
      framework: "next",
      bundler: "webpack",
      // Add webpackConfig
      webpackConfig: {
        plugins: [
          new NormalModuleReplacementPlugin(
            /next\/image/,
            require.resolve(
              path.join(__dirname, "cypress", "mocks", "next", "image")
            )
          ),
        ],
      },
    },
  },
});

// cypress/mocks/next/image.tsx
import type { ImageProps } from 'next/image'

/**
 * Converts the next/image static image URL to a regular path.
 *
 * Example:
 *
 * /_next/static/media/404.ea2b1f50.png -> /assets/images/404.png
 */
const convertURL = (url: string) => {
  const newURL = url
    .replace(/\/_next\/static\/media\//, '/public/') // Use actual images location
    .replace(/(?<=\.)(.+)(?=png|jp?eg|tiff?|png|webp|bmp|gif|svg)/, '')
  return newURL
}

const Image = (props: ImageProps) => {
  // Regular path to image resource
  if (typeof props.src === 'string') {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img
        src={props.src}
        alt={props.alt}
        width={props.width}
        height={props.height}
        style={props.style}
      />
    )
  }

  let src: string
  // StaticImageData - an import of image resource
  if ('src' in props.src) {
    src = props.src.src
  } else {
    // StaticRequire
    src = props.src.default.src
  }

  // eslint-disable-next-line @next/next/no-img-element
  return <img src={convertURL(src)} alt={props.alt} style={props.style} />
}

export default Image