Repository: vercel/next.js
Pull request: ci: fix javascript-urls test to account for React 18

This was caught by our React 18 tests which only run on `canary`. There was a console error about breaking `javascript:` urls in an upcoming React release but it didn't actually block them. 

Changed files:
filename: test/e2e/app-dir/javascript-urls/javascript-urls.test.ts
patch: @@ -7,6 +7,8 @@ import {
 } from 'next-test-utils'
 import type { Page, Request } from 'playwright'
 
+const isReact18 = parseInt(process.env.NEXT_TEST_REACT_VERSION) === 18
+
 describe('javascript-urls', () => {
   const { next, isNextDev } = nextTestSetup({
     files: __dirname,
@@ -247,40 +249,47 @@ describe('javascript-urls', () => {
     expect(safePageUrl).toContain('/app/safe')
   })
 
-  it('should prevent javascript URLs in pages router Link component', async () => {
-    const { beforePageLoad, getNavigationRequests } =
-      createNavigationInterceptor()
-
-    const browser = await next.browser('/pages/link-href', {
-      pushErrorAsConsoleLog: true,
-      beforePageLoad,
-    })
-    const initialUrl = await browser.url()
+  // React 18 did not block JavaScript URLs, it was just a console error.
+  if (!isReact18) {
+    it('should prevent javascript URLs in pages router Link component', async () => {
+      const { beforePageLoad, getNavigationRequests } =
+        createNavigationInterceptor()
 
-    await browser.elementByCss('a').click()
+      const browser = await next.browser('/pages/link-href', {
+        pushErrorAsConsoleLog: true,
+        beforePageLoad,
+      })
+      const initialUrl = await browser.url()
 
-    await expectJavascriptUrlBlocked(browser, initialUrl, getNavigationRequests)
+      await browser.elementByCss('a').click()
 
-    if (isNextDev) {
-      await waitForRedbox(browser)
-      expect(await getRedboxDescription(browser)).toMatchInlineSnapshot(
-        `"React has blocked a javascript: URL as a security precaution."`
+      await expectJavascriptUrlBlocked(
+        browser,
+        initialUrl,
+        getNavigationRequests
       )
-      browser.keydown('Escape')
-      await waitForNoRedbox(browser)
-    }
-
-    // Click the safe page link
-    await browser.elementByCss('a[href="/pages/safe"]').click()
 
-    // Wait for navigation to complete
-    await browser.waitForCondition(
-      'window.location.pathname.includes("/pages/safe")'
-    )
+      if (isNextDev) {
+        await waitForRedbox(browser)
+        expect(await getRedboxDescription(browser)).toMatchInlineSnapshot(
+          `"React has blocked a javascript: URL as a security precaution."`
+        )
+        browser.keydown('Escape')
+        await waitForNoRedbox(browser)
+      }
+
+      // Click the safe page link
+      await browser.elementByCss('a[href="/pages/safe"]').click()
+
+      // Wait for navigation to complete
+      await browser.waitForCondition(
+        'window.location.pathname.includes("/pages/safe")'
+      )
 
-    const safePageUrl = await browser.url()
-    expect(safePageUrl).toContain('/pages/safe')
-  })
+      const safePageUrl = await browser.url()
+      expect(safePageUrl).toContain('/pages/safe')
+    })
+  }
 
   it('should prevent javascript URLs in pages router Link as prop', async () => {
     const { beforePageLoad, getNavigationRequests } =

filename: test/e2e/app-dir/javascript-urls/pages/pages/link-as.tsx
patch: @@ -4,21 +4,19 @@ import { DANGEROUS_JAVASCRIPT_URL } from '../../bad-url'
 
 export default function Page() {
   return (
-    <html>
-      <body>
-        <main>
-          <p>
-            Clicking this link should result in an error where React blocks a
-            javascript URL
-          </p>
-          <Link href="/" as={DANGEROUS_JAVASCRIPT_URL}>
-            Link with javascript URL `as`
-          </Link>
-        </main>
-        <footer>
-          <Link href="/pages/safe">Safe Page</Link>
-        </footer>
-      </body>
-    </html>
+    <div>
+      <main>
+        <p>
+          Clicking this link should result in an error where React blocks a
+          javascript URL
+        </p>
+        <Link href="/" as={DANGEROUS_JAVASCRIPT_URL}>
+          Link with javascript URL `as`
+        </Link>
+      </main>
+      <footer>
+        <Link href="/pages/safe">Safe Page</Link>
+      </footer>
+    </div>
   )
 }

filename: test/e2e/app-dir/javascript-urls/pages/pages/link-href.tsx
patch: @@ -4,21 +4,19 @@ import { DANGEROUS_JAVASCRIPT_URL } from '../../bad-url'
 
 export default function Page() {
   return (
-    <html>
-      <body>
-        <main>
-          <p>
-            Clicking this link should result in an error where React blocks a
-            javascript URL
-          </p>
-          <Link href={DANGEROUS_JAVASCRIPT_URL}>
-            Link with javascript URL `href`
-          </Link>
-        </main>
-        <footer>
-          <Link href="/pages/safe">Safe Page</Link>
-        </footer>
-      </body>
-    </html>
+    <div>
+      <main>
+        <p>
+          Clicking this link should result in an error where React blocks a
+          javascript URL
+        </p>
+        <Link href={DANGEROUS_JAVASCRIPT_URL}>
+          Link with javascript URL `href`
+        </Link>
+      </main>
+      <footer>
+        <Link href="/pages/safe">Safe Page</Link>
+      </footer>
+    </div>
   )
 }

filename: test/e2e/app-dir/javascript-urls/pages/pages/router-push.tsx
patch: @@ -6,21 +6,19 @@ import { DANGEROUS_JAVASCRIPT_URL } from '../../bad-url'
 export default function Page() {
   const router = useRouter()
   return (
-    <html>
-      <body>
-        <main>
-          <p>
-            Clicking this button should result in an error where Next.js blocks
-            a javascript URL
-          </p>
-          <button onClick={() => router.push(DANGEROUS_JAVASCRIPT_URL)}>
-            push javascript URL
-          </button>
-        </main>
-        <footer>
-          <Link href="/pages/safe">Safe Page</Link>
-        </footer>
-      </body>
-    </html>
+    <div>
+      <main>
+        <p>
+          Clicking this button should result in an error where Next.js blocks a
+          javascript URL
+        </p>
+        <button onClick={() => router.push(DANGEROUS_JAVASCRIPT_URL)}>
+          push javascript URL
+        </button>
+      </main>
+      <footer>
+        <Link href="/pages/safe">Safe Page</Link>
+      </footer>
+    </div>
   )
 }

filename: test/e2e/app-dir/javascript-urls/pages/pages/router-replace.tsx
patch: @@ -6,21 +6,19 @@ import { DANGEROUS_JAVASCRIPT_URL } from '../../bad-url'
 export default function Page() {
   const router = useRouter()
   return (
-    <html>
-      <body>
-        <main>
-          <p>
-            Clicking this button should result in an error where Next.js blocks
-            a javascript URL
-          </p>
-          <button onClick={() => router.replace(DANGEROUS_JAVASCRIPT_URL)}>
-            replace javascript URL
-          </button>
-        </main>
-        <footer>
-          <Link href="/pages/safe">Safe Page</Link>
-        </footer>
-      </body>
-    </html>
+    <div>
+      <main>
+        <p>
+          Clicking this button should result in an error where Next.js blocks a
+          javascript URL
+        </p>
+        <button onClick={() => router.replace(DANGEROUS_JAVASCRIPT_URL)}>
+          replace javascript URL
+        </button>
+      </main>
+      <footer>
+        <Link href="/pages/safe">Safe Page</Link>
+      </footer>
+    </div>
   )
 }