nuxt / test-utils

🧪 Test utilities for Nuxt
http://nuxt.com/docs/getting-started/testing
MIT License
287 stars 74 forks source link

Setting `javaScriptEnabled: false` in `createPage()` never loads page #868

Open dulnan opened 1 week ago

dulnan commented 1 week ago

Environment

------------------------------
- Operating System: Linux
- Node Version:     v20.14.0
- Nuxt Version:     3.12.2
- CLI Version:      3.12.0
- Nitro Version:    2.9.6
- Package Manager:  npm@10.7.0
- Builder:          -
- User Config:      -
- Runtime Modules:  -
- Build Modules:    -
------------------------------

Reproduction

Call createPage() by passing javaScriptEnabled: false in the options:

const page = await createPage('/foobar', {
    javaScriptEnabled: false,
  })

Describe the bug

This will never finish loading the page because the createPage method always waits for hydration to finish. In this case, hydration can't ever finish, so the method's Promise never resolves.

Additional context

Probably a rare use case, but I ran into this issue while explicitly wanting to test the unhydrated SSR output of a page.

Logs

No response

dosubot[bot] commented 1 week ago

Hey @dulnan! I'm here to assist with any bugs, questions, or contributions you have. Let's tackle this issue together!

To resolve the issue where setting javaScriptEnabled: false in the createPage() method never loads the page because the method always waits for hydration to finish, you need to modify the waitForHydration function to check if JavaScript is enabled before waiting for hydration. If JavaScript is disabled, the function should not wait for hydration.

Here is the modified code:

export async function waitForHydration(page: Page, url: string, waitUntil?: GotoOptions['waitUntil']): Promise<void> {
  const javaScriptEnabled = await page.evaluate(() => typeof window !== 'undefined');

  if (javaScriptEnabled) {
    if (waitUntil === 'hydration') {
      await page.waitForFunction(() => window.useNuxtApp?.().isHydrating === false);
    } else if (waitUntil === 'route') {
      await page.waitForFunction(route => window.useNuxtApp?.()._route.fullPath === route, url);
    }
  }
}

This modification ensures that the waitForHydration function only waits for hydration if JavaScript is enabled [1].

To continue talking to Dosu, mention @dosu.