Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(next/image): don't call ReactDOM.preload if missing, such as jest #53443

Merged
merged 7 commits into from Aug 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/next/src/client/image-component.tsx
Expand Up @@ -320,7 +320,7 @@ function ImagePreload({
...getDynamicProps(imgAttributes.fetchPriority),
}

if (isAppRouter) {
if (isAppRouter && preload) {
styfle marked this conversation as resolved.
Show resolved Hide resolved
// See https://github.com/facebook/react/pull/26940
preload(
imgAttributes.src,
Expand Down
12 changes: 12 additions & 0 deletions test/production/jest/next-image-preload/app/app/layout.tsx
@@ -0,0 +1,12 @@
import React from 'react'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
1 change: 1 addition & 0 deletions test/production/jest/next-image-preload/app/app/next.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions test/production/jest/next-image-preload/app/app/page.tsx
@@ -0,0 +1,7 @@
import React from 'react'
import Image from 'next/image'
import logo from './next.svg'

export default function MyImage() {
return <Image alt="" src={logo} priority />
}
16 changes: 16 additions & 0 deletions test/production/jest/next-image-preload/app/jest.config.js
@@ -0,0 +1,16 @@
const nextJest = require('next/jest')

const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './',
})

// Add any custom config to be passed to Jest
const customJestConfig = {
// if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
moduleDirectories: ['node_modules', '<rootDir>/'],
testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)
@@ -0,0 +1,50 @@
import { createNext, FileRef } from 'e2e-utils'
import { NextInstance } from 'test/lib/next-modes/base'
import path from 'path'
import execa from 'execa'

const appDir = path.join(__dirname, 'app')

describe('next/jest', () => {
let next: NextInstance

beforeAll(async () => {
next = await createNext({
skipStart: true,
files: {
app: new FileRef(path.join(appDir, 'app')),
styfle marked this conversation as resolved.
Show resolved Hide resolved
[`tests/index.test.tsx`]: `
import { render, screen } from '@testing-library/react'
import Page from '../app/page'

it('<Page /> renders', () => {
render(<Page />)
const logo = screen.getByRole('img')
expect(logo).toBeDefined()
})
`,
'jest.config.js': new FileRef(path.join(appDir, 'jest.config.js')),
},
dependencies: {
jest: '29.6.2',
'jest-environment-jsdom': '29.6.2',
'@testing-library/react': '14.0.0',
'@testing-library/jest-dom': '5.17.0',
},
})
})
afterAll(() => next.destroy())

it('Should not throw preload is undefined error', async () => {
const { stdout, stderr } = await execa(
'pnpm',
['jest', 'tests/index.test.tsx'],
{
cwd: next.testDir,
reject: false,
}
)
// Uncaught [TypeError: (0 , _reactdom.preload) is not a function]
expect(stdout + stderr).not.toContain('is not a function')
})
})