next.js/test/unit/next-image-legacy.test.ts

/* eslint-env jest */
import React from 'react'
import ReactDOM from 'react-dom/server'
import Image from 'next/legacy/image'
import cheerio from 'cheerio'

let deploymentId: string | undefined
jest.mock('next/dist/shared/lib/deployment-id.js', () => {
  return {
    __esModule: true,
    getDeploymentId() {
      return deploymentId
    },
    getDeploymentIdQuery(ampersand = false): string {
      let id = deploymentId
      if (id) {
        return `${ampersand ? '&' : '?'}dpl=${id}`
      }
      return ''
    },
    getAssetToken() {
      throw new Error("getAssetToken shouldn't be called ")
    },
    getAssetTokenQuery(ampersand = false) {
      throw new Error("getAssetTokenQuery shouldn't be called ")
    },
  }
})

describe('Image Legacy Rendering', () => {
  it('should render Image on its own', async () => {
    const element = React.createElement(Image, {
      id: 'unit-image',
      src: '/test.png',
      width: 100,
      height: 100,
      loading: 'eager',
    })
    const html = ReactDOM.renderToString(element)
    const $ = cheerio.load(html)
    const img = $('#unit-image')
    expect(img.attr('id')).toBe('unit-image')
    expect(img.attr('src')).toContain('test.png')
    expect(img.attr('srcset')).toContain('test.png')
  })

  it('should only render noscript element when lazy loading', async () => {
    const element = React.createElement(Image, {
      src: '/test.png',
      width: 100,
      height: 100,
      loading: 'eager',
    })
    const element2 = React.createElement(Image, {
      src: '/test.png',
      width: 100,
      height: 100,
      priority: true,
    })
    const elementLazy = React.createElement(Image, {
      src: '/test.png',
      width: 100,
      height: 100,
    })
    const $ = cheerio.load(ReactDOM.renderToString(element))
    const $2 = cheerio.load(ReactDOM.renderToString(element2))
    const $lazy = cheerio.load(ReactDOM.renderToString(elementLazy))
    expect($('noscript').length).toBe(0)
    expect($2('noscript').length).toBe(0)
    expect($lazy('noscript').length).toBe(1)
  })

  it('should render noscript element when placeholder=blur', async () => {
    const element1 = React.createElement(Image, {
      src: '/test.png',
      width: 100,
      height: 100,
      loading: 'eager',
      placeholder: 'blur',
      blurDataURL: 'data:image/png;base64',
    })
    const element2 = React.createElement(Image, {
      src: '/test.png',
      width: 100,
      height: 100,
      placeholder: 'blur',
      blurDataURL: 'data:image/png;base64',
      loading: 'eager',
    })
    const element3 = React.createElement(Image, {
      src: '/test.png',
      width: 100,
      height: 100,
      placeholder: 'blur',
      blurDataURL: 'data:image/png;base64',
      priority: true,
    })
    const $1 = cheerio.load(ReactDOM.renderToString(element1))
    const $2 = cheerio.load(ReactDOM.renderToString(element2))
    const $3 = cheerio.load(ReactDOM.renderToString(element3))
    expect($1('noscript').length).toBe(1)
    expect($2('noscript').length).toBe(1)
    expect($3('noscript').length).toBe(1)
  })

  it('should render the correct sizes passed when a noscript element is rendered', async () => {
    const element = React.createElement(Image, {
      src: '/test.png',
      width: 100,
      height: 100,
      sizes: '50vw',
    })
    const $ = cheerio.load(ReactDOM.renderToString(element))
    const noscriptImg = $('noscript img')
    expect(noscriptImg.attr('sizes')).toBe('50vw')
    expect(noscriptImg.attr('srcset')).toContain(
      '/_next/image?url=%2Ftest.png&w=384&q=75 384w'
    )
  })

  it.each([
    {
      name: 'without deployment add',
      src: '/_next/static/media/test.3f1a293b.png',
      expected: `/_next/image?url=${encodeURIComponent('/_next/static/media/test.3f1a293b.png')}&w=3840&q=75`,
    },
    {
      name: 'adding a deployment id',
      src: '/_next/static/media/test.3f1a293b.png',
      dpl: 'dpl_123',
      expected: `/_next/image?url=${encodeURIComponent('/_next/static/media/test.3f1a293b.png')}&w=3840&q=75&dpl=dpl_123`,
    },
    {
      name: 'respect existing deployment id',
      src: '/_next/static/media/test.3f1a293b.png?dpl=dpl_existing',
      dpl: 'dpl_123',
      expected: `/_next/image?url=${encodeURIComponent('/_next/static/media/test.3f1a293b.png')}&w=3840&q=75&dpl=dpl_existing`,
    },
    {
      name: 'unoptimized without deployment add',
      unoptimized: true,
      src: '/_next/static/media/test.3f1a293b.png',
      expected: '/_next/static/media/test.3f1a293b.png',
    },
    {
      name: 'unoptimized adding a deployment id',
      unoptimized: true,
      src: '/_next/static/media/test.3f1a293b.png',
      dpl: 'dpl_123',
      expected: '/_next/static/media/test.3f1a293b.png?dpl=dpl_123',
    },
    {
      name: 'unoptimized respect existing deployment id',
      unoptimized: true,
      src: '/_next/static/media/test.3f1a293b.png?dpl=dpl_existing',
      dpl: 'dpl_123',
      expected: '/_next/static/media/test.3f1a293b.png?dpl=dpl_existing',
    },
    {
      name: 'unicode: without deployment add',
      src: '/_next/static/media/äöüščří.3f1a293b.png',
      expected: `/_next/image?url=${encodeURIComponent('/_next/static/media/äöüščří.3f1a293b.png')}&w=3840&q=75`,
    },
    {
      name: 'unicode: adding a deployment id',
      src: '/_next/static/media/äöüščří.3f1a293b.png',
      dpl: 'dpl_123',
      expected: `/_next/image?url=${encodeURIComponent('/_next/static/media/äöüščří.3f1a293b.png')}&w=3840&q=75&dpl=dpl_123`,
    },
    {
      name: 'unicode: respect existing deployment id',
      src: '/_next/static/media/äöüščří.3f1a293b.png?dpl=dpl_existing',
      dpl: 'dpl_123',
      expected: `/_next/image?url=${encodeURIComponent('/_next/static/media/äöüščří.3f1a293b.png')}&w=3840&q=75&dpl=dpl_existing`,
    },
    {
      name: 'unicode: unoptimized without deployment add',
      unoptimized: true,
      src: '/_next/static/media/äöüščří.3f1a293b.png',
      expected: '/_next/static/media/äöüščří.3f1a293b.png',
    },
    {
      name: 'unicode: unoptimized adding a deployment id',
      unoptimized: true,
      src: '/_next/static/media/äöüščří.3f1a293b.png',
      dpl: 'dpl_123',
      expected: '/_next/static/media/äöüščří.3f1a293b.png?dpl=dpl_123',
    },
    {
      name: 'unicode: unoptimized respect existing deployment id',
      unoptimized: true,
      src: '/_next/static/media/äöüščří.3f1a293b.png?dpl=dpl_existing',
      dpl: 'dpl_123',
      expected: '/_next/static/media/äöüščří.3f1a293b.png?dpl=dpl_existing',
    },
  ])(
    'should correctly handle deployment ids: $name',
    async ({ src, unoptimized, dpl, expected }) => {
      deploymentId = dpl
      try {
        const element = React.createElement(Image, {
          src,
          unoptimized,
          width: 100,
          height: 100,
          sizes: '50vw',
        })
        const $ = cheerio.load(ReactDOM.renderToString(element))
        const noscriptImg = $('noscript img')
        expect(noscriptImg.attr('src')).toBe(expected)
      } finally {
        deploymentId = undefined
      }
    }
  )
})