Repository: vercel/next.js
File: test/e2e/app-dir/next-image/next-image.test.ts (TypeScript)

Code before:

describe('app dir - next-image', () => {
  const { next, skipped } = nextTestSetup({
    files: __dirname,
    skipDeployment: true,
  })

  if (skipped) {
    return
  }

  describe('ssr content', () => {
    it('should handle HEAD requests for uncached images', async () => {
      const imagesDir = join(next.testDir, '.next/cache/images')
      await fs.remove(imagesDir).catch(() => {})

      const $ = await next.render$('/')
      const imageUrl = $('#app-layout').attr('src')

      const headRes = await next.fetch(imageUrl, { method: 'HEAD' })
      expect(headRes.status).toBe(200)
      expect(headRes.headers.get('content-type')).toMatch(/^image\//)
      expect(headRes.headers.get('X-Nextjs-Cache')).toBe('MISS')

      const contentLength = headRes.headers.get('content-length')
      expect(Number(contentLength || '0')).toBeGreaterThan(0)

      const getRes = await next.fetch(imageUrl)
      expect(getRes.status).toBe(200)
      expect(getRes.headers.get('content-type')).toMatch(/^image\//)
      expect(getRes.headers.get('X-Nextjs-Cache')).toBe('HIT')

      const getContentLength = getRes.headers.get('content-length')
      expect(Number(getContentLength || '0')).toBeGreaterThan(0)

      const getBody = await getRes.arrayBuffer()
      expect(getBody.byteLength).toBeGreaterThan(0)
      expect(getBody.byteLength).toBe(Number(getContentLength))
    })

    it('should render images on / route', async () => {
      const $ = await next.render$('/')

      const layout = $('#app-layout')

      if (process.env.IS_TURBOPACK_TEST) {
        expect(layout.attr('src')).toMatchInlineSnapshot(
          `"/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.4813cd24.png&w=828&q=85"`
        )
      } else {
        expect(layout.attr('src')).toMatchInlineSnapshot(

Review comment (suggestion):
This should also assert that the body is empty here

```suggestion
      expect(Number(contentLength || '0')).toBeGreaterThan(0)
      const headBody = await getRes.arrayBuffer()
      expect(headBody.byteLength).toBe(0)
```

Code after:

describe('app dir - next-image', () => {
  const { next, skipped } = nextTestSetup({
    files: __dirname,
    skipDeployment: true,
  })

  if (skipped) {
    return
  }

  describe('ssr content', () => {
    it('should handle HEAD requests for uncached images', async () => {
      const imagesDir = join(next.testDir, '.next/cache/images')
      await fs.remove(imagesDir).catch(() => {})

      const $ = await next.render$('/')
      const imageUrl = $('#app-layout').attr('src')

      const headRes = await next.fetch(imageUrl, { method: 'HEAD' })
      expect(headRes.status).toBe(200)
      expect(headRes.headers.get('content-type')).toMatch(/^image\//)
      expect(headRes.headers.get('X-Nextjs-Cache')).toBe('MISS')

      const contentLength = headRes.headers.get('content-length')
      expect(Number(contentLength || '0')).toBeGreaterThan(0)
      const headBody = await headRes.arrayBuffer()
      expect(headBody.byteLength).toBe(0)

      const getRes = await next.fetch(imageUrl)
      expect(getRes.status).toBe(200)
      expect(getRes.headers.get('content-type')).toMatch(/^image\//)
      expect(getRes.headers.get('X-Nextjs-Cache')).toBe('HIT')

      const getContentLength = getRes.headers.get('content-length')
      expect(Number(getContentLength || '0')).toBeGreaterThan(0)

      const getBody = await getRes.arrayBuffer()
      expect(getBody.byteLength).toBeGreaterThan(0)
      expect(getBody.byteLength).toBe(Number(getContentLength))
    })

    it('should render images on / route', async () => {
      const $ = await next.render$('/')

      const layout = $('#app-layout')

      if (process.env.IS_TURBOPACK_TEST) {
        expect(layout.attr('src')).toMatchInlineSnapshot(
          `"/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.4813cd24.png&w=828&q=85"`
        )