test: add js payload test suite (#20217)

.github/workflows/ci.yml

@@ -121,6 +121,7 @@ jobs:
         os: [ubuntu-latest, windows-latest]
         env: ['dev', 'built']
         builder: ['vite', 'webpack']
+        payload: ['json', 'js']
         node: [16]
         exclude:
           - env: 'dev'
@@ -180,6 +181,7 @@ jobs:
         env:
           TEST_ENV: ${{ matrix.env }}
           TEST_BUILDER: ${{ matrix.builder }}
+          TEST_PAYLOAD: ${{ matrix.payload }}
 
   build-release:
     if: |

package.json

@@ -19,6 +19,7 @@
     "play:build": "nuxi build playground",
     "play:preview": "nuxi preview playground",
     "test:fixtures": "nuxi prepare test/fixtures/basic && nuxi prepare test/fixtures/runtime-compiler && vitest run --dir test",
+    "text:fixtures:payload": "TEST_PAYLOAD=js pnpm test:fixtures",
     "test:fixtures:dev": "TEST_ENV=dev pnpm test:fixtures",
     "test:fixtures:webpack": "TEST_BUILDER=webpack pnpm test:fixtures",
     "test:types": "nuxi prepare test/fixtures/basic && cd test/fixtures/basic && npx vue-tsc --noEmit",

test/basic.test.ts

@@ -7,7 +7,7 @@ import { $fetch, createPage, fetch, isDev, setup, startServer, url } from '@nuxt
 import { $fetchComponent } from '@nuxt/test-utils/experimental'
 
 import type { NuxtIslandResponse } from '../packages/nuxt/src/core/runtime/nitro/renderer'
-import { expectNoClientErrors, expectWithPolling, parseData, parsePayload, renderPage, withLogs } from './utils'
+import { expectNoClientErrors, expectWithPolling, isRenderingJson, parseData, parsePayload, renderPage, withLogs } from './utils'
 
 const isWebpack = process.env.TEST_BUILDER === 'webpack'
 
@@ -45,7 +45,9 @@ describe('route rules', () => {
   it('should enable spa mode', async () => {
     const { script, attrs } = parseData(await $fetch('/route-rules/spa'))
     expect(script.serverRendered).toEqual(false)
-    expect(attrs['data-ssr']).toEqual('false')
+    if (isRenderingJson) {
+      expect(attrs['data-ssr']).toEqual('false')
+    }
     await expectNoClientErrors('/route-rules/spa')
   })
 
@@ -1229,7 +1231,7 @@ describe.runIf(isDev() && !isWebpack)('vite plugins', () => {
   })
 })
 
-describe.skipIf(isDev() || isWindows)('payload rendering', () => {
+describe.skipIf(isDev() || isWindows || !isRenderingJson)('payload rendering', () => {
   it('renders a payload', async () => {
     const payload = await $fetch('/random/a/_payload.json', { responseType: 'text' })
     const data = parsePayload(payload)

test/fixtures/basic/nuxt.config.ts

@@ -186,7 +186,7 @@ export default defineNuxtConfig({
   },
   experimental: {
     polyfillVueUseHead: true,
-    renderJsonPayloads: true,
+    renderJsonPayloads: process.env.TEST_PAYLOAD !== 'js',
     respectNoSSRHeader: true,
     clientFallback: true,
     restoreState: true,

test/fixtures/basic/plugins/custom-type-assertion.client.ts

@@ -1,5 +1,5 @@
 export default defineNuxtPlugin((nuxtApp) => {
-  if (nuxtApp.payload.serverRendered && nuxtApp.payload.blinkable !== '<revivified-blink>') {
+  if (nuxtApp.payload.serverRendered && nuxtApp.payload.blinkable !== '<revivified-blink>' && document.querySelector('#__NUXT_DATA__')) {
     throw createError({
       message: 'Custom type in Nuxt payload was not revived correctly'
     })

test/utils.ts

@@ -1,3 +1,4 @@
+import { Script, createContext } from 'node:vm'
 import { expect } from 'vitest'
 import type { Page } from 'playwright'
 import { parse } from 'devalue'
@@ -5,6 +6,8 @@ import { reactive, ref, shallowReactive, shallowRef } from 'vue'
 import { createError } from 'h3'
 import { createPage, getBrowser, url, useTestContext } from '@nuxt/test-utils'
 
+export const isRenderingJson = process.env.TEST_PAYLOAD !== 'js'
+
 export async function renderPage (path = '/') {
   const ctx = useTestContext()
   if (!ctx.options.browser) {
@@ -108,6 +111,14 @@ export function parsePayload (payload: string) {
   return parse(payload || '', revivers)
 }
 export function parseData (html: string) {
+  if (!isRenderingJson) {
+    const { script } = html.match(/<script>(?<script>window.__NUXT__.*?)<\/script>/)?.groups || {}
+    const _script = new Script(script)
+    return {
+      script: _script.runInContext(createContext({ window: {} })),
+      attrs: {}
+    }
+  }
   const { script, attrs } = html.match(/<script type="application\/json" id="__NUXT_DATA__"(?<attrs>[^>]+)>(?<script>.*?)<\/script>/)?.groups || {}
   const _attrs: Record<string, string> = {}
   for (const attr of attrs.matchAll(/( |^)(?<key>[\w-]+)+="(?<value>[^"]+)"/g)) {