import { fileURLToPath } from 'node:url' import { describe, expect, it } from 'vitest' import { joinURL, withQuery } from 'ufo' import { isCI, isWindows } from 'std-env' import { normalize } from 'pathe' // eslint-disable-next-line import/order import { setup, fetch, $fetch, startServer, isDev, createPage, url } from '@nuxt/test-utils' import type { NuxtIslandResponse } from '../packages/nuxt/src/core/runtime/nitro/renderer' import { expectNoClientErrors, expectWithPolling, renderPage, withLogs } from './utils' const isWebpack = process.env.TEST_BUILDER === 'webpack' await setup({ rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)), dev: process.env.TEST_ENV === 'dev', server: true, browser: true, setupTimeout: (isWindows ? 240 : 120) * 1000, nuxtConfig: { builder: isWebpack ? 'webpack' : 'vite', buildDir: process.env.NITRO_BUILD_DIR, nitro: { output: { dir: process.env.NITRO_OUTPUT_DIR } } } }) describe('server api', () => { it('should serialize', async () => { expect(await $fetch('/api/hello')).toBe('Hello API') expect(await $fetch('/api/hey')).toEqual({ foo: 'bar', baz: 'qux' }) }) it('should preserve states', async () => { expect(await $fetch('/api/counter')).toEqual({ count: 0 }) expect(await $fetch('/api/counter')).toEqual({ count: 1 }) expect(await $fetch('/api/counter')).toEqual({ count: 2 }) expect(await $fetch('/api/counter')).toEqual({ count: 3 }) }) }) describe('route rules', () => { it('should enable spa mode', async () => { expect(await $fetch('/route-rules/spa')).toContain('serverRendered:false') }) }) describe('pages', () => { it('render index', async () => { const html = await $fetch('/') // Snapshot // expect(html).toMatchInlineSnapshot() // should render text expect(html).toContain('Hello Nuxt 3!') // should inject runtime config expect(html).toContain('RuntimeConfig | testConfig: 123') expect(html).toContain('needsFallback:') // composables auto import expect(html).toContain('Composable | foo: auto imported from ~/components/foo.ts') expect(html).toContain('Composable | bar: auto imported from ~/components/useBar.ts') expect(html).toContain('Composable | template: auto imported from ~/components/template.ts') // should import components expect(html).toContain('This is a custom component with a named export.') // should apply attributes to client-only components expect(html).toContain('
') // should render server-only components expect(html).toContain('
server-only component
') // should register global components automatically expect(html).toContain('global component registered automatically') expect(html).toContain('global component via suffix') await expectNoClientErrors('/') }) // TODO: support jsx with webpack it.runIf(!isWebpack)('supports jsx', async () => { const html = await $fetch('/jsx') // should import JSX/TSX components with custom elements expect(html).toContain('TSX component') expect(html).toContain('custom') }) it('respects aliases in page metadata', async () => { const html = await $fetch('/some-alias') expect(html).toContain('Hello Nuxt 3!') }) it('respects redirects in page metadata', async () => { const { headers } = await fetch('/redirect', { redirect: 'manual' }) expect(headers.get('location')).toEqual('/') }) it('validates routes', async () => { const { status } = await fetch('/forbidden') expect(status).toEqual(404) }) it('render 404', async () => { const html = await $fetch('/not-found') // Snapshot // expect(html).toMatchInlineSnapshot() expect(html).toContain('[...slug].vue') expect(html).toContain('404 at not-found') // Middleware still runs after validation: https://github.com/nuxt/nuxt/issues/15650 expect(html).toContain('Middleware ran: true') await expectNoClientErrors('/not-found') }) it('preserves query', async () => { const html = await $fetch('/?test=true') // Snapshot // expect(html).toMatchInlineSnapshot() // should render text expect(html).toContain('Path: /?test=true') await expectNoClientErrors('/?test=true') }) it('/nested/[foo]/[bar].vue', async () => { const html = await $fetch('/nested/one/two') // Snapshot // expect(html).toMatchInlineSnapshot() expect(html).toContain('nested/[foo]/[bar].vue') expect(html).toContain('foo: one') expect(html).toContain('bar: two') }) it('/nested/[foo]/index.vue', async () => { const html = await $fetch('/nested/foobar') // TODO: should resolved to same entry // const html2 = await $fetch('/nested/foobar/index') // expect(html).toEqual(html2) // Snapshot // expect(html).toMatchInlineSnapshot() expect(html).toContain('nested/[foo]/index.vue') expect(html).toContain('foo: foobar') await expectNoClientErrors('/nested/foobar') }) it('/nested/[foo]/user-[group].vue', async () => { const html = await $fetch('/nested/foobar/user-admin') // Snapshot // expect(html).toMatchInlineSnapshot() expect(html).toContain('nested/[foo]/user-[group].vue') expect(html).toContain('foo: foobar') expect(html).toContain('group: admin') await expectNoClientErrors('/nested/foobar/user-admin') }) it('/parent', async () => { const html = await $fetch('/parent') expect(html).toContain('parent/index') await expectNoClientErrors('/parent') }) it('/another-parent', async () => { const html = await $fetch('/another-parent') expect(html).toContain('another-parent/index') await expectNoClientErrors('/another-parent') }) it('/client-only-components', async () => { const html = await $fetch('/client-only-components') // ensure fallbacks with classes and arbitrary attributes are rendered expect(html).toContain('
') expect(html).toContain('
') expect(html).toContain('
Fallback
') // ensure components are not rendered server-side expect(html).not.toContain('Should not be server rendered') await expectNoClientErrors('/client-only-components') const page = await createPage('/client-only-components') await page.waitForLoadState('networkidle') const hiddenSelectors = [ '.string-stateful-should-be-hidden', '.client-script-should-be-hidden', '.string-stateful-script-should-be-hidden', '.no-state-hidden' ] const visibleSelectors = [ '.string-stateful', '.string-stateful-script', '.client-only-script', '.client-only-script-setup', '.no-state' ] // ensure directives are correctly applied await Promise.all(hiddenSelectors.map(selector => page.locator(selector).isHidden())) .then(results => results.forEach(isHidden => expect(isHidden).toBeTruthy())) // ensure hidden components are still rendered await Promise.all(hiddenSelectors.map(selector => page.locator(selector).innerHTML())) .then(results => results.forEach(innerHTML => expect(innerHTML).not.toBe(''))) // ensure single root node components are rendered once on client (should not be empty) await Promise.all(visibleSelectors.map(selector => page.locator(selector).innerHTML())) .then(results => results.forEach(innerHTML => expect(innerHTML).not.toBe(''))) // ensure multi-root-node is correctly rendered expect(await page.locator('.multi-root-node-count').innerHTML()).toContain('0') expect(await page.locator('.multi-root-node-button').innerHTML()).toContain('add 1 to count') expect(await page.locator('.multi-root-node-script-count').innerHTML()).toContain('0') expect(await page.locator('.multi-root-node-script-button').innerHTML()).toContain('add 1 to count') // ensure components reactivity await page.locator('.multi-root-node-button').click() await page.locator('.multi-root-node-script-button').click() await page.locator('.client-only-script button').click() await page.locator('.client-only-script-setup button').click() expect(await page.locator('.multi-root-node-count').innerHTML()).toContain('1') expect(await page.locator('.multi-root-node-script-count').innerHTML()).toContain('1') expect(await page.locator('.client-only-script-setup button').innerHTML()).toContain('1') expect(await page.locator('.client-only-script button').innerHTML()).toContain('1') // ensure components ref is working and reactive await page.locator('button.test-ref-1').click() await page.locator('button.test-ref-2').click() await page.locator('button.test-ref-3').click() await page.locator('button.test-ref-4').click() expect(await page.locator('.client-only-script-setup button').innerHTML()).toContain('2') expect(await page.locator('.client-only-script button').innerHTML()).toContain('2') expect(await page.locator('.string-stateful-script').innerHTML()).toContain('1') expect(await page.locator('.string-stateful').innerHTML()).toContain('1') // ensure directives are reactive await page.locator('button#show-all').click() await Promise.all(hiddenSelectors.map(selector => page.locator(selector).isVisible())) .then(results => results.forEach(isVisible => expect(isVisible).toBeTruthy())) }) it('/client-only-explicit-import', async () => { const html = await $fetch('/client-only-explicit-import') // ensure fallbacks with classes and arbitrary attributes are rendered expect(html).toContain('
') expect(html).toContain('
') // ensure components are not rendered server-side expect(html).not.toContain('client only script') await expectNoClientErrors('/client-only-explicit-import') }) }) describe('head tags', () => { it('should render tags', async () => { const headHtml = await $fetch('/head') expect(headHtml).toContain('Using a dynamic component - Title Template Fn Change') expect(headHtml).not.toContain('') expect(headHtml).toContain('') expect(headHtml.match('meta charset').length).toEqual(1) expect(headHtml).toContain('') expect(headHtml.match('meta name="viewport"').length).toEqual(1) expect(headHtml).not.toContain('') expect(headHtml).toContain('') expect(headHtml).toMatch(/]*class="html-attrs-test"/) expect(headHtml).toMatch(/]*class="body-attrs-test"/) expect(headHtml).toContain('') const indexHtml = await $fetch('/') // should render charset by default expect(indexHtml).toContain('') // should render components expect(indexHtml).toContain('Basic fixture') }) it('should render http-equiv correctly', async () => { const html = await $fetch('/head') // http-equiv should be rendered kebab case expect(html).toContain('') }) // TODO: Doesn't adds header in test environment // it.todo('should render stylesheet link tag (SPA mode)', async () => { // const html = await $fetch('/head', { headers: { 'x-nuxt-no-ssr': '1' } }) // expect(html).toMatch(/ { it('should work with defineNuxtComponent', async () => { const html = await $fetch('/legacy/async-data') expect(html).toContain('
Hello API
') expect(html).toContain('{hello:"Hello API"}') }) }) describe('navigate', () => { it('should redirect to index with navigateTo', async () => { const { headers } = await fetch('/navigate-to/', { redirect: 'manual' }) expect(headers.get('location')).toEqual('/') }) }) describe('errors', () => { it('should render a JSON error page', async () => { const res = await fetch('/error', { headers: { accept: 'application/json' } }) expect(res.status).toBe(422) const error = await res.json() delete error.stack expect(error).toMatchObject({ message: 'This is a custom error', statusCode: 422, statusMessage: 'This is a custom error', url: '/error' }) }) it('should render a HTML error page', async () => { const res = await fetch('/error') expect(await res.text()).toContain('This is a custom error') }) // TODO: need to create test for webpack it.runIf(!isDev() && !isWebpack)('should handle chunk loading errors', async () => { const { page, consoleLogs } = await renderPage('/') await page.getByText('Chunk error').click() await page.waitForURL(url('/chunk-error')) expect(consoleLogs.map(c => c.text).join('')).toContain('caught chunk load error') expect(await page.innerText('div')).toContain('Chunk error page') }) }) describe('navigate external', () => { it('should redirect to example.com', async () => { const { headers } = await fetch('/navigate-to-external/', { redirect: 'manual' }) expect(headers.get('location')).toEqual('https://example.com/') }) }) describe('middlewares', () => { it('should redirect to index with global middleware', async () => { const html = await $fetch('/redirect/') // Snapshot // expect(html).toMatchInlineSnapshot() expect(html).toContain('Hello Nuxt 3!') }) it('should allow aborting navigation on server-side', async () => { const res = await fetch('/?abort', { headers: { accept: 'application/json' } }) expect(res.status).toEqual(401) }) it('should inject auth', async () => { const html = await $fetch('/auth') // Snapshot // expect(html).toMatchInlineSnapshot() expect(html).toContain('auth.vue') expect(html).toContain('auth: Injected by injectAuth middleware') }) it('should not inject auth', async () => { const html = await $fetch('/no-auth') // Snapshot // expect(html).toMatchInlineSnapshot() expect(html).toContain('no-auth.vue') expect(html).toContain('auth: ') expect(html).not.toContain('Injected by injectAuth middleware') }) it('should redirect to index with http 307 with navigateTo on server side', async () => { const html = await fetch('/navigate-to-redirect', { redirect: 'manual' }) expect(html.headers.get('location')).toEqual('/') expect(html.status).toEqual(307) }) }) describe('plugins', () => { it('basic plugin', async () => { const html = await $fetch('/plugins') expect(html).toContain('myPlugin: Injected by my-plugin') }) it('async plugin', async () => { const html = await $fetch('/plugins') expect(html).toContain('asyncPlugin: Async plugin works! 123') expect(html).toContain('useFetch works!') }) }) describe('layouts', () => { it('should apply custom layout', async () => { const html = await $fetch('/with-layout') // Snapshot // expect(html).toMatchInlineSnapshot() expect(html).toContain('with-layout.vue') expect(html).toContain('Custom Layout:') }) it('should work with a dynamically set layout', async () => { const html = await $fetch('/with-dynamic-layout') // Snapshot // expect(html).toMatchInlineSnapshot() expect(html).toContain('with-dynamic-layout') expect(html).toContain('Custom Layout:') await expectNoClientErrors('/with-dynamic-layout') }) it('should work with a computed layout', async () => { const html = await $fetch('/with-computed-layout') // Snapshot // expect(html).toMatchInlineSnapshot() expect(html).toContain('with-computed-layout') expect(html).toContain('Custom Layout') await expectNoClientErrors('/with-computed-layout') }) it('should allow passing custom props to a layout', async () => { const html = await $fetch('/layouts/with-props') expect(html).toContain('some prop was passed') await expectNoClientErrors('/layouts/with-props') }) }) describe('reactivity transform', () => { it('should works', async () => { const html = await $fetch('/') expect(html).toContain('Sugar Counter 12 x 2 = 24') }) }) describe('server tree shaking', () => { it('should work', async () => { const html = await $fetch('/client') expect(html).toContain('This page should not crash when rendered') expect(html).toContain('fallback for ClientOnly') expect(html).not.toContain('rendered client-side') expect(html).not.toContain('id="client-side"') const page = await createPage('/client') await page.waitForLoadState('networkidle') // ensure scoped classes are correctly assigned between client and server expect(await page.$eval('.red', e => getComputedStyle(e).color)).toBe('rgb(255, 0, 0)') expect(await page.$eval('.blue', e => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)') expect(await page.locator('#client-side').textContent()).toContain('This should be rendered client-side') }) }) describe('extends support', () => { describe('layouts & pages', () => { it('extends foo/layouts/default & foo/pages/index', async () => { const html = await $fetch('/foo') expect(html).toContain('Extended layout from foo') expect(html).toContain('Extended page from foo') }) it('extends [bar/layouts/override & bar/pages/override] over [foo/layouts/override & foo/pages/override]', async () => { const html = await $fetch('/override') expect(html).toContain('Extended layout from bar') expect(html).toContain('Extended page from bar') }) }) describe('components', () => { it('extends foo/components/ExtendsFoo', async () => { const html = await $fetch('/foo') expect(html).toContain('Extended component from foo') }) it('extends bar/components/ExtendsOverride over foo/components/ExtendsOverride', async () => { const html = await $fetch('/override') expect(html).toContain('Extended component from bar') }) }) describe('middlewares', () => { it('extends foo/middleware/foo', async () => { const html = await $fetch('/foo') expect(html).toContain('Middleware | foo: Injected by extended middleware from foo') }) it('extends bar/middleware/override over foo/middleware/override', async () => { const html = await $fetch('/override') expect(html).toContain('Middleware | override: Injected by extended middleware from bar') }) }) describe('composables', () => { it('extends foo/composables/foo', async () => { const html = await $fetch('/foo') expect(html).toContain('Composable | useExtendsFoo: foo') }) it('allows overriding composables', async () => { const html = await $fetch('/extends') expect(html).toContain('test from project') }) }) describe('plugins', () => { it('extends foo/plugins/foo', async () => { const html = await $fetch('/foo') expect(html).toContain('Plugin | foo: String generated from foo plugin!') }) }) describe('server', () => { it('extends foo/server/api/foo', async () => { expect(await $fetch('/api/foo')).toBe('foo') }) it('extends foo/server/middleware/foo', async () => { const { headers } = await fetch('/') expect(headers.get('injected-header')).toEqual('foo') }) }) describe('app', () => { it('extends foo/app/router.options & bar/app/router.options', async () => { const html: string = await $fetch('/') const routerLinkClasses = html.match(/href="\/" class="([^"]*)"/)?.[1].split(' ') expect(routerLinkClasses).toContain('foo-active-class') expect(routerLinkClasses).toContain('bar-exact-active-class') }) }) }) // Bug #7337 describe('deferred app suspense resolve', () => { async function behaviour (path: string) { await withLogs(async (page, logs) => { await page.goto(url(path)) await page.waitForLoadState('networkidle') // Wait for all pending micro ticks to be cleared in case hydration haven't finished yet. await page.evaluate(() => new Promise(resolve => setTimeout(resolve, 10))) const hydrationLogs = logs.filter(log => log.includes('isHydrating')) expect(hydrationLogs.length).toBe(3) expect(hydrationLogs.every(log => log === 'isHydrating: true')) }) } it('should wait for all suspense instance on initial hydration', async () => { await behaviour('/async-parent/child') }) it('should wait for all suspense instance on initial hydration', async () => { await behaviour('/internal-layout/async-parent/child') }) }) // Bug #6592 describe('page key', () => { it('should not cause run of setup if navigation not change page key and layout', async () => { async function behaviour (path: string) { await withLogs(async (page, logs) => { await page.goto(url(`${path}/0`)) await page.waitForLoadState('networkidle') await page.click(`[href="${path}/1"]`) await page.waitForSelector('#page-1') // Wait for all pending micro ticks to be cleared, // so we are not resolved too early when there are repeated page loading await page.evaluate(() => new Promise(resolve => setTimeout(resolve, 10))) expect(logs.filter(l => l.includes('Child Setup')).length).toBe(1) }) } await behaviour('/fixed-keyed-child-parent') await behaviour('/internal-layout/fixed-keyed-child-parent') }) it('will cause run of setup if navigation changed page key', async () => { async function behaviour (path: string) { await withLogs(async (page, logs) => { await page.goto(url(`${path}/0`)) await page.waitForLoadState('networkidle') await page.click(`[href="${path}/1"]`) await page.waitForSelector('#page-1') // Wait for all pending micro ticks to be cleared, // so we are not resolved too early when there are repeated page loading await page.evaluate(() => new Promise(resolve => setTimeout(resolve, 10))) expect(logs.filter(l => l.includes('Child Setup')).length).toBe(2) }) } await behaviour('/keyed-child-parent') await behaviour('/internal-layout/keyed-child-parent') }) }) // Bug #6592 describe('layout change not load page twice', () => { async function behaviour (path1: string, path2: string) { await withLogs(async (page, logs) => { await page.goto(url(path1)) await page.waitForLoadState('networkidle') await page.click(`[href="${path2}"]`) await page.waitForSelector('#with-layout2') // Wait for all pending micro ticks to be cleared, // so we are not resolved too early when there are repeated page loading await page.evaluate(() => new Promise(resolve => setTimeout(resolve, 10))) expect(logs.filter(l => l.includes('Layout2 Page Setup')).length).toBe(1) }) } it('should not cause run of page setup to repeat if layout changed', async () => { await behaviour('/with-layout', '/with-layout2') await behaviour('/internal-layout/with-layout', '/internal-layout/with-layout2') }) }) describe('automatically keyed composables', () => { it('should automatically generate keys', async () => { const html = await $fetch('/keyed-composables') expect(html).toContain('true') expect(html).not.toContain('false') }) it('should match server-generated keys', async () => { await expectNoClientErrors('/keyed-composables') }) }) describe.skipIf(isDev() || isWebpack)('inlining component styles', () => { it('should inline styles', async () => { const html = await $fetch('/styles') for (const style of [ '{--assets:"assets"}', //