[test] Deal with double Effect invocation

Author: eps1lon

packages/next/src/client/link.tsx

@@ -147,9 +147,9 @@ const prefetched = new Set<string>()
 type PrefetchOptions = RouterPrefetchOptions & {
   /**
    * bypassPrefetchedCheck will bypass the check to see if the `href` has
-   * already been fetched.
+   * already been fetched i.e. unconditionally prefetch the `href`.
    */
-  bypassPrefetchedCheck?: boolean
+  bypassPrefetchedCheck: boolean
 }
 
 function prefetch(
@@ -576,7 +576,11 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkPropsReal>(
       }
 
       // Prefetch the URL.
-      prefetch(router, href, as, { locale })
+      prefetch(router, href, as, {
+        // dedupe across appear/disappear of the Link.
+        bypassPrefetchedCheck: false,
+        locale,
+      })
     }, [as, href, isVisible, locale, prefetchEnabled, router?.locale, router])
 
     const childProps: {

test/development/app-dir/browser-log-forwarding/fixtures/error-level/error-level.test.ts

@@ -28,8 +28,9 @@ describe('browser-log-forwarding error level', () => {
       )
       .join('\n')
 
-    expect(browserLogs).toMatchInlineSnapshot(
-      `"[browser] browser error: this is an error message "`
-    )
+    expect(browserLogs).toMatchInlineSnapshot(`
+     "[browser] browser error: this is an error message 
+     [browser] browser error: this is an error message "
+    `)
   })
 })

test/development/app-dir/strict-mode-enabled-by-default/strict-mode-enabled-by-default.test.ts

@@ -1,17 +1,14 @@
 import { nextTestSetup } from 'e2e-utils'
-import { check } from 'next-test-utils'
+import { retry } from 'next-test-utils'
 
 describe('Strict Mode enabled by default', () => {
   const { next } = nextTestSetup({
     files: __dirname,
   })
-  // TODO: modern StrictMode does not double invoke effects during hydration: https://github.com/facebook/react/pull/28951
-  it.skip('should work using browser', async () => {
+  it('should work using browser', async () => {
     const browser = await next.browser('/')
-    await check(async () => {
-      const text = await browser.elementByCss('p').text()
-      // FIXME: Bug in React. Strict Effects no longer work in current beta.
-      return text === '1' ? 'success' : `failed: ${text}`
-    }, 'success')
+    await retry(async () => {
+      expect(await browser.elementByCss('p').text()).toBe('2')
+    })
   })
 })

test/e2e/app-dir/log-file/log-file.test.ts

@@ -140,6 +140,11 @@ describe('log-file', () => {
          {"timestamp":"xx:xx:xx.xxx","source":"Browser","level":"ERROR","message":"Client: This is an error message from client component \\n    at ClientPage.useEffect (app/client/page.tsx:25:13)\\n  23 |     circularObj.data.parent = circularObj\\n  24 |     console.log('Client: Complex circular object:', circularObj)\\n> 25 |     console.error('Client: This is an error message from client component')\\n     |             ^\\n  26 |     console.warn('Client: This is a warning message from client component')\\n  27 |   }, [])\\n  28 | (app/client/page.tsx:25:13)"}
          {"timestamp":"xx:xx:xx.xxx","source":"Server","level":"ERROR","message":"[browser] \\"Client: This is an error message from client component\\" \\"\\\\n    at ClientPage.useEffect (app/client/page.tsx:25:13)\\\\n  23 |     circularObj.data.parent = circularObj\\\\n  24 |     console.log('Client: Complex circular object:', circularObj)\\\\n> 25 |     console.error('Client: This is an error message from client component')\\\\n     |             ^\\\\n  26 |     console.warn('Client: This is a warning message from client component')\\\\n  27 |   }, [])\\\\n  28 |\\" \\"(app/client/page.tsx:25:13)\\""}
          {"timestamp":"xx:xx:xx.xxx","source":"Browser","level":"WARN","message":"Client: This is a warning message from client component"}
+         {"timestamp":"xx:xx:xx.xxx","source":"Server","level":"WARN","message":"[browser] \\"Client: This is a warning message from client component\\" \\"(app/client/page.tsx:26:13)\\""}
+         {"timestamp":"xx:xx:xx.xxx","source":"Browser","level":"LOG","message":"Client: Complex circular object: {\\"data\\":{\\"nested\\":{\\"items\\":[1,2,3],\\"value\\":42},\\"parent\\":\\"[Circular]\\"},\\"metadata\\":{\\"name\\":\\"safe stringify\\",\\"version\\":\\"1.0.0\\"},\\"name\\":\\"test\\"}"}
+         {"timestamp":"xx:xx:xx.xxx","source":"Browser","level":"ERROR","message":"Client: This is an error message from client component \\n    at ClientPage.useEffect (app/client/page.tsx:25:13)\\n  23 |     circularObj.data.parent = circularObj\\n  24 |     console.log('Client: Complex circular object:', circularObj)\\n> 25 |     console.error('Client: This is an error message from client component')\\n     |             ^\\n  26 |     console.warn('Client: This is a warning message from client component')\\n  27 |   }, [])\\n  28 | (app/client/page.tsx:25:13)"}
+         {"timestamp":"xx:xx:xx.xxx","source":"Server","level":"ERROR","message":"[browser] \\"Client: This is an error message from client component\\" \\"\\\\n    at ClientPage.useEffect (app/client/page.tsx:25:13)\\\\n  23 |     circularObj.data.parent = circularObj\\\\n  24 |     console.log('Client: Complex circular object:', circularObj)\\\\n> 25 |     console.error('Client: This is an error message from client component')\\\\n     |             ^\\\\n  26 |     console.warn('Client: This is a warning message from client component')\\\\n  27 |   }, [])\\\\n  28 |\\" \\"(app/client/page.tsx:25:13)\\""}
+         {"timestamp":"xx:xx:xx.xxx","source":"Browser","level":"WARN","message":"Client: This is a warning message from client component"}
          {"timestamp":"xx:xx:xx.xxx","source":"Server","level":"WARN","message":"[browser] \\"Client: This is a warning message from client component\\" \\"(app/client/page.tsx:26:13)\\""}"
         `)
       })

test/e2e/app-dir/navigation/app/use-router/navigate.js

@@ -4,11 +4,13 @@ import { useEffect, useState } from 'react'
 
 export function NavigateAndTrackRouterIdentity({ href }) {
   const router = useRouter()
+  const [prevRouter, setPrevRouter] = useState(router)
 
-  const [changedCount, setChangedCount] = useState(-1)
-  useEffect(() => {
+  const [changedCount, setChangedCount] = useState(0)
+  if (prevRouter !== router) {
+    setPrevRouter(router)
     setChangedCount((p) => p + 1)
-  }, [router])
+  }
 
   const [navigationCount, setNavigationCount] = useState(0)
   const navigate = () => {