diff --git a/docs/2.guide/3.going-further/3.modules.md b/docs/2.guide/3.going-further/3.modules.md
index b12d886821..1bc8a40de1 100644
--- a/docs/2.guide/3.going-further/3.modules.md
+++ b/docs/2.guide/3.going-further/3.modules.md
@@ -671,7 +671,7 @@ And its test:
```js [test/rendering.ts]
import { describe, it, expect } from 'vitest'
import { fileURLToPath } from 'node:url'
-import { setup, $fetch } from '@nuxt/test-utils'
+import { setup, $fetch } from '@nuxt/test-utils/e2e'
describe('ssr', async () => {
// 2. Setup Nuxt with this fixture inside your test file
diff --git a/test/fixtures/spa-loader/app.vue b/test/fixtures/spa-loader/app.vue
index b654005857..574b3e6fe0 100644
--- a/test/fixtures/spa-loader/app.vue
+++ b/test/fixtures/spa-loader/app.vue
@@ -1,8 +1,7 @@
diff --git a/test/fixtures/spa-loader/plugins/delay.client.ts b/test/fixtures/spa-loader/plugins/delay.client.ts
new file mode 100644
index 0000000000..49529b291c
--- /dev/null
+++ b/test/fixtures/spa-loader/plugins/delay.client.ts
@@ -0,0 +1,3 @@
+export default defineNuxtPlugin(async () => {
+ await new Promise(resolve => setTimeout(resolve, 50))
+})
diff --git a/test/spa-loader/spa-preloader-outside-disabled.test.ts b/test/spa-loader/spa-preloader-outside-disabled.test.ts
index 5c794b627e..66c4e0f2ae 100644
--- a/test/spa-loader/spa-preloader-outside-disabled.test.ts
+++ b/test/spa-loader/spa-preloader-outside-disabled.test.ts
@@ -1,7 +1,7 @@
import { fileURLToPath } from 'node:url'
import { describe, expect, it } from 'vitest'
import { isWindows } from 'std-env'
-import { $fetch, getBrowser, setup, url } from '@nuxt/test-utils'
+import { $fetch, createPage, setup, url } from '@nuxt/test-utils/e2e'
const isWebpack =
process.env.TEST_BUILDER === 'webpack' ||
@@ -27,20 +27,24 @@ await setup({
describe('spaLoadingTemplateLocation flag is set to `within`', () => {
it('should render loader inside appTag', async () => {
const html = await $fetch('/spa')
- expect(html).toContain(
- ``,
- )
+ expect(html).toContain(``)
})
it('spa-loader does not appear while the app is mounting', async () => {
- const browser = await getBrowser()
- const page = await browser.newPage({})
+ const page = await createPage()
await page.goto(url('/spa'))
const loader = page.getByTestId('loader')
+ const content = page.getByTestId('content')
+
+ await loader.waitFor({ state: 'visible' })
+ expect(await content.isHidden()).toBeTruthy()
await page.waitForFunction(() => window.useNuxtApp?.() && window.useNuxtApp?.().isHydrating)
- expect(await loader.isHidden()).toBeTruthy()
+
+ expect(await content.isHidden()).toBeTruthy()
+
+ await content.waitFor({ state: 'visible' })
await page.close()
}, 60_000)
diff --git a/test/spa-loader/spa-preloader-outside-enabled.test.ts b/test/spa-loader/spa-preloader-outside-enabled.test.ts
index f8313b1eec..3ef4537c06 100644
--- a/test/spa-loader/spa-preloader-outside-enabled.test.ts
+++ b/test/spa-loader/spa-preloader-outside-enabled.test.ts
@@ -1,7 +1,8 @@
import { fileURLToPath } from 'node:url'
import { describe, expect, it } from 'vitest'
import { isWindows } from 'std-env'
-import { getBrowser, setup, url } from '@nuxt/test-utils'
+import { createPage, setup, url } from '@nuxt/test-utils/e2e'
+import type { Page } from 'playwright-core'
const isWebpack = process.env.TEST_BUILDER === 'webpack' || process.env.TEST_BUILDER === 'rspack'
@@ -22,13 +23,15 @@ await setup({
describe('spaLoadingTemplateLocation flag is set to `body`', () => {
it('should render spa-loader', async () => {
- const browser = await getBrowser()
- const page = await browser.newPage({})
- await page.goto(url('/spa'))
- const loader = page.getByTestId('loader')
- expect(await loader.isVisible()).toBeTruthy()
+ const page = await createPage()
+ await page.goto(url('/spa'), { waitUntil: 'domcontentloaded' })
+ const loader = page.getByTestId('loader')
const content = page.getByTestId('content')
+
+ await loader.waitFor({ state: 'visible' })
+ expect(await content.isHidden()).toBeTruthy()
+
await content.waitFor({ state: 'visible' })
expect(await loader.isHidden()).toBeTruthy()
@@ -36,17 +39,24 @@ describe('spaLoadingTemplateLocation flag is set to `body`', () => {
}, 60_000)
it('should render content without spa-loader', async () => {
- const browser = await getBrowser()
- const page = await browser.newPage({})
- await page.goto(url('/ssr'))
+ const page = await createPage()
+ await page.goto(url('/ssr'), { waitUntil: 'domcontentloaded' })
- const loader = page.getByTestId('loader')
- expect(await loader.isHidden()).toBeTruthy()
+ const [loaderIsHidden, contentIsHidden] = await getState(page)
- const content = page.getByTestId('content')
- await content.waitFor({ state: 'visible' })
- expect(await loader.isHidden()).toBeTruthy()
+ expect(loaderIsHidden).toBeTruthy()
+ expect(contentIsHidden).toBeFalsy()
await page.close()
}, 60_000)
})
+
+function getState (page: Page) {
+ const loader = page.getByTestId('loader')
+ const content = page.getByTestId('content')
+
+ return Promise.all([
+ loader.isHidden(),
+ content.isHidden(),
+ ])
+}
diff --git a/test/suspense.test.ts b/test/suspense.test.ts
index 6fb55edc7c..87ee10ec38 100644
--- a/test/suspense.test.ts
+++ b/test/suspense.test.ts
@@ -1,7 +1,7 @@
import { fileURLToPath } from 'node:url'
import { describe, expect, it } from 'vitest'
import { isWindows } from 'std-env'
-import { setup } from '@nuxt/test-utils'
+import { setup } from '@nuxt/test-utils/e2e'
import { renderPage } from './utils'
const isWebpack = process.env.TEST_BUILDER === 'webpack' || process.env.TEST_BUILDER === 'rspack'