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.

Sign up for GitHub

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

Jump to bottom

[DevOverlay] Add Basic Stories for Error Containers #74697

Open
wants to merge 1 commit into
base: canary
Choose a base branch
from
Open

[DevOverlay] Add Basic Stories for Error Containers #74697

wants to merge 1 commit into from
+160 −12

Conversation

devjiwonchoi
Copy link
Member

@devjiwonchoi devjiwonchoi commented Jan 9, 2025 •
edited
Loading

This PR added stories for Error containers: Errors, BuildError, RootLayoutMissingTagsError.

Note: Filenames are Pascal for now to benefit the vscode file nesting. Will change all to kebab in once.

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Jan 9, 2025
@devjiwonchoi Graphite App
Copy link
Member Author

This stack of pull requests is managed by Graphite. Learn more about stacking.

@devjiwonchoi devjiwonchoi force-pushed the 01-10-_devoverlay_add_basic_stories_for_error_containers branch from 64e1b4c to e4f4d0e Compare January 9, 2025 18:15
@devjiwonchoi devjiwonchoi marked this pull request as ready for review January 9, 2025 18:15
@ijjk
Copy link
Member

ijjk commented Jan 9, 2025

Failing test suites

Commit: e4f4d0e

pnpm test test/integration/next-image-new/default/test/index.test.ts (turbopack)

  • Image Component Default Tests > production mode > should load the images
  • Image Component Default Tests > production mode > should preload priority images
  • Image Component Default Tests > production mode > should not pass through user-provided srcset (causing a flash)
  • Image Component Default Tests > production mode > should update the image on src change
  • Image Component Default Tests > production mode > should callback onLoadingComplete when image is fully loaded
  • Image Component Default Tests > production mode > should callback native onLoad with sythetic event
  • Image Component Default Tests > production mode > should callback native onError when error occurred while loading image
  • Image Component Default Tests > production mode > should callback native onError even when error before hydration
  • Image Component Default Tests > production mode > should work with image with blob src
  • Image Component Default Tests > production mode > should work when using flexbox
  • Image Component Default Tests > production mode > should work when using overrideSrc prop
  • Image Component Default Tests > production mode > should work with sizes and automatically use responsive srcset
  • Image Component Default Tests > production mode > should render no wrappers or sizers
  • Image Component Default Tests > production mode > should lazy load with placeholder=blur
  • Image Component Default Tests > production mode > should handle the styles prop appropriately
  • Image Component Default Tests > production mode > should warn when legacy prop layout=fill
  • Image Component Default Tests > production mode > should warn when legacy prop layout=responsive
  • Image Component Default Tests > production mode > should render picture via getImageProps
  • Image Component Default Tests > production mode > should not create an image folder in server/chunks
  • Image Component Default Tests > production mode > should render as unoptimized with missing src prop
  • Image Component Default Tests > production mode > should render as unoptimized with empty string src prop
  • Image Component Default Tests > production mode > should correctly ignore prose styles
  • Image Component Default Tests > production mode > should apply style inheritance for img elements but not wrapper elements
  • Image Component Default Tests > production mode > should apply filter style after image loads
  • Image Component Default Tests > production mode > should emit image for next/dynamic with non ssr case
  • Image Component Default Tests > production mode > should correctly rotate image
  • Image Component Default Tests > production mode > should create images folder in static/media for edge runtime
  • Image Component Default Tests > production mode > should have data url placeholder when enabled
  • Image Component Default Tests > production mode > should remove data url placeholder after image loads
  • Image Component Default Tests > production mode > should render correct objectFit when data url placeholder and fill
  • Image Component Default Tests > production mode > should have blurry placeholder when enabled
  • Image Component Default Tests > production mode > should remove blurry placeholder after image loads
  • Image Component Default Tests > production mode > should render correct objectFit when blurDataURL and fill
  • Image Component Default Tests > production mode > should be valid HTML
  • Image Component Default Tests > production mode > Fill-mode tests > should include a data-attribute on fill images
  • Image Component Default Tests > production mode > Fill-mode tests > should add position:absolute to fill images
  • Image Component Default Tests > production mode > Fill-mode tests > should add 100% width and height to fill images
  • Image Component Default Tests > production mode > Fill-mode tests > should add position styles to fill images
Expand output

● Image Component Default Tests › production mode › should load the images

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should preload priority images

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should not pass through user-provided srcset (causing a flash)

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should update the image on src change

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should callback onLoadingComplete when image is fully loaded

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should callback native onLoad with sythetic event

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should callback native onError when error occurred while loading image

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should callback native onError even when error before hydration

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should work with image with blob src

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should work when using flexbox

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should work when using overrideSrc prop

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should work with sizes and automatically use responsive srcset

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should render no wrappers or sizers

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should lazy load with placeholder=blur

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should handle the styles prop appropriately

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should warn when legacy prop layout=fill

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should warn when legacy prop layout=responsive

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should render picture via getImageProps

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should not create an image folder in server/chunks

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should render as unoptimized with missing src prop

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should render as unoptimized with empty string src prop

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should correctly ignore prose styles

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should apply style inheritance for img elements but not wrapper elements

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should apply filter style after image loads

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should emit image for next/dynamic with non ssr case

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › Fill-mode tests › should include a data-attribute on fill images

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › Fill-mode tests › should include a data-attribute on fill images

page.goto: Protocol error (Page.navigate): Cannot navigate to invalid URL
Call log:
  - navigating to "http://localhost:undefined/fill", waiting until "load"

  282 |     opts?.beforePageLoad?.(page)
  283 |
> 284 |     await page.goto(url, { waitUntil: 'load' })
      |                ^
  285 |   }
  286 |
  287 |   back(options) {

  at BrowserInterface.goto (lib/browsers/playwright.ts:284:16)
  at webdriver (lib/next-webdriver.ts:136:3)
  at Object.<anonymous> (integration/next-image-new/default/test/index.test.ts:1342:17)

● Image Component Default Tests › production mode › Fill-mode tests › should add position:absolute to fill images

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › Fill-mode tests › should add position:absolute to fill images

page.goto: Protocol error (Page.navigate): Cannot navigate to invalid URL
Call log:
  - navigating to "http://localhost:undefined/fill", waiting until "load"

  282 |     opts?.beforePageLoad?.(page)
  283 |
> 284 |     await page.goto(url, { waitUntil: 'load' })
      |                ^
  285 |   }
  286 |
  287 |   back(options) {

  at BrowserInterface.goto (lib/browsers/playwright.ts:284:16)
  at webdriver (lib/next-webdriver.ts:136:3)
  at Object.<anonymous> (integration/next-image-new/default/test/index.test.ts:1342:17)

● Image Component Default Tests › production mode › Fill-mode tests › should add 100% width and height to fill images

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › Fill-mode tests › should add 100% width and height to fill images

page.goto: Protocol error (Page.navigate): Cannot navigate to invalid URL
Call log:
  - navigating to "http://localhost:undefined/fill", waiting until "load"

  282 |     opts?.beforePageLoad?.(page)
  283 |
> 284 |     await page.goto(url, { waitUntil: 'load' })
      |                ^
  285 |   }
  286 |
  287 |   back(options) {

  at BrowserInterface.goto (lib/browsers/playwright.ts:284:16)
  at webdriver (lib/next-webdriver.ts:136:3)
  at Object.<anonymous> (integration/next-image-new/default/test/index.test.ts:1342:17)

● Image Component Default Tests › production mode › Fill-mode tests › should add position styles to fill images

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › Fill-mode tests › should add position styles to fill images

page.goto: Protocol error (Page.navigate): Cannot navigate to invalid URL
Call log:
  - navigating to "http://localhost:undefined/fill", waiting until "load"

  282 |     opts?.beforePageLoad?.(page)
  283 |
> 284 |     await page.goto(url, { waitUntil: 'load' })
      |                ^
  285 |   }
  286 |
  287 |   back(options) {

  at BrowserInterface.goto (lib/browsers/playwright.ts:284:16)
  at webdriver (lib/next-webdriver.ts:136:3)
  at Object.<anonymous> (integration/next-image-new/default/test/index.test.ts:1342:17)

● Image Component Default Tests › production mode › should correctly rotate image

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should create images folder in static/media for edge runtime

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should have data url placeholder when enabled

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should remove data url placeholder after image loads

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should render correct objectFit when data url placeholder and fill

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should have blurry placeholder when enabled

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should remove blurry placeholder after image loads

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should render correct objectFit when blurDataURL and fill

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

● Image Component Default Tests › production mode › should be valid HTML

thrown: "Exceeded timeout of 60000 ms for a hook.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1623 |     'production mode',
  1624 |     () => {
> 1625 |       beforeAll(async () => {
       |       ^
  1626 |         await nextBuild(appDir)
  1627 |         appPort = await findPort()
  1628 |         app = await nextStart(appDir, appPort)

  at beforeAll (integration/next-image-new/default/test/index.test.ts:1625:7)
  at integration/next-image-new/default/test/index.test.ts:1622:56
  at Object.describe (integration/next-image-new/default/test/index.test.ts:1607:1)

Read more about building and testing Next.js in contributing.md.

@ijjk
Copy link
Member

ijjk commented Jan 9, 2025

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js 01-10-_devoverlay_add_basic_stories_for_error_containers Change
buildDuration 35.3s 30.5s N/A
buildDurationCached 29s 26.3s N/A
nodeModulesSize 418 MB 418 MB ⚠️ +47.2 kB
nextStartRea..uration (ms) 776ms 1.1s ⚠️ +282ms
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js 01-10-_devoverlay_add_basic_stories_for_error_containers Change
5306-HASH.js gzip 53.3 kB 53.3 kB N/A
8276.HASH.js gzip 169 B 168 B N/A
8377-HASH.js gzip 5.44 kB 5.44 kB N/A
bccd1874-HASH.js gzip 53 kB 53 kB ✓
framework-HASH.js gzip 57.5 kB 57.5 kB N/A
main-app-HASH.js gzip 241 B 242 B N/A
main-HASH.js gzip 34.1 kB 34.1 kB N/A
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 53 kB 53 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js 01-10-_devoverlay_add_basic_stories_for_error_containers Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB ✓
Overall change 39.4 kB 39.4 kB ✓
Client Pages
vercel/next.js canary vercel/next.js 01-10-_devoverlay_add_basic_stories_for_error_containers Change
_app-HASH.js gzip 193 B 193 B ✓
_error-HASH.js gzip 193 B 193 B ✓
amp-HASH.js gzip 512 B 510 B N/A
css-HASH.js gzip 343 B 342 B N/A
dynamic-HASH.js gzip 1.84 kB 1.84 kB ✓
edge-ssr-HASH.js gzip 265 B 265 B ✓
head-HASH.js gzip 363 B 362 B N/A
hooks-HASH.js gzip 393 B 392 B N/A
image-HASH.js gzip 4.57 kB 4.57 kB N/A
index-HASH.js gzip 268 B 268 B ✓
link-HASH.js gzip 2.35 kB 2.34 kB N/A
routerDirect..HASH.js gzip 328 B 328 B ✓
script-HASH.js gzip 397 B 397 B ✓
withRouter-HASH.js gzip 323 B 326 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 3.59 kB 3.59 kB ✓
Client Build Manifests
vercel/next.js canary vercel/next.js 01-10-_devoverlay_add_basic_stories_for_error_containers Change
_buildManifest.js gzip 749 B 747 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary vercel/next.js 01-10-_devoverlay_add_basic_stories_for_error_containers Change
index.html gzip 523 B 523 B ✓
link.html gzip 538 B 537 B N/A
withRouter.html gzip 519 B 520 B N/A
Overall change 523 B 523 B ✓
Edge SSR bundle Size
vercel/next.js canary vercel/next.js 01-10-_devoverlay_add_basic_stories_for_error_containers Change
edge-ssr.js gzip 128 kB 128 kB N/A
page.js gzip 207 kB 207 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js canary vercel/next.js 01-10-_devoverlay_add_basic_stories_for_error_containers Change
middleware-b..fest.js gzip 668 B 669 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 31.2 kB 31.2 kB N/A
edge-runtime..pack.js gzip 844 B 844 B ✓
Overall change 844 B 844 B ✓
Next Runtimes
vercel/next.js canary vercel/next.js 01-10-_devoverlay_add_basic_stories_for_error_containers Change
274-experime...dev.js gzip 322 B 322 B ✓
274.runtime.dev.js gzip 314 B 314 B ✓
app-page-exp...dev.js gzip 368 kB 368 kB ✓
app-page-exp..prod.js gzip 129 kB 129 kB ✓
app-page-tur..prod.js gzip 142 kB 142 kB ✓
app-page-tur..prod.js gzip 138 kB 138 kB ✓
app-page.run...dev.js gzip 355 kB 355 kB ✓
app-page.run..prod.js gzip 126 kB 126 kB ✓
app-route-ex...dev.js gzip 37.6 kB 37.6 kB ✓
app-route-ex..prod.js gzip 25.6 kB 25.6 kB ✓
app-route-tu..prod.js gzip 25.6 kB 25.6 kB ✓
app-route-tu..prod.js gzip 25.4 kB 25.4 kB ✓
app-route.ru...dev.js gzip 39.2 kB 39.2 kB ✓
app-route.ru..prod.js gzip 25.4 kB 25.4 kB ✓
pages-api-tu..prod.js gzip 9.69 kB 9.69 kB ✓
pages-api.ru...dev.js gzip 11.6 kB 11.6 kB ✓
pages-api.ru..prod.js gzip 9.68 kB 9.68 kB ✓
pages-turbo...prod.js gzip 21.7 kB 21.7 kB ✓
pages.runtim...dev.js gzip 27.5 kB 27.5 kB ✓
pages.runtim..prod.js gzip 21.7 kB 21.7 kB ✓
server.runti..prod.js gzip 916 kB 916 kB ✓
Overall change 2.46 MB 2.46 MB ✓
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js 01-10-_devoverlay_add_basic_stories_for_error_containers Change
0.pack gzip 2.1 MB 2.09 MB N/A
index.pack gzip 75.4 kB 75.6 kB ⚠️ +260 B
Overall change 75.4 kB 75.6 kB ⚠️ +260 B
Diff details
Diff for main-HASH.js

Diff too large to display

Commit: e4f4d0e

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gaojude gaojude gaojude approved these changes

@huozhi huozhi Awaiting requested review from huozhi

@eps1lon eps1lon Awaiting requested review from eps1lon

Assignees
No one assigned
Labels
created-by: Next.js team PRs by the Next.js team. type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@devjiwonchoi @ijjk @gaojude