rsnext/test/unit/image-rendering.test.ts
ryuurock 0bbbfa4818
Fix next/image noscript tag to only render when lazy (#32918)
Noscript is not required for Image that are loaded immediately

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
2022-01-01 22:46:49 +00:00

49 lines
1.4 KiB
TypeScript

/* eslint-env jest */
import React from 'react'
import ReactDOM from 'react-dom/server'
import Image from 'next/image'
import cheerio from 'cheerio'
describe('Image 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)
})
})