Fix side effects in router-is-ready tests (#24360)

Fixes the [failing react@experimental tests](https://github.com/vercel/next.js/actions/workflows/test_react_experimental.yml).
vercel · Apr 22, 2021 · cce82cd · cce82cd
1 parent 1e9f459
commit cce82cd
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 20 deletions.
diff --git a/test/integration/router-is-ready/pages/auto-export/[slug].js b/test/integration/router-is-ready/pages/auto-export/[slug].js
@@ -1,13 +1,17 @@
 import { useRouter } from 'next/router'
+import { useLayoutEffect } from 'react'
 
 export default function Page(props) {
   const router = useRouter()
 
   if (typeof window !== 'undefined') {
-    if (!window.isReadyValues) {
-      window.isReadyValues = []
-    }
-    window.isReadyValues.push(router.isReady)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      if (!window.isReadyValues) {
+        window.isReadyValues = []
+      }
+      window.isReadyValues.push(router.isReady)
+    }, [router])
   }
 
   return (

diff --git a/test/integration/router-is-ready/pages/auto-export/index.js b/test/integration/router-is-ready/pages/auto-export/index.js
@@ -1,13 +1,17 @@
 import { useRouter } from 'next/router'
+import { useLayoutEffect } from 'react'
 
 export default function Page(props) {
   const router = useRouter()
 
   if (typeof window !== 'undefined') {
-    if (!window.isReadyValues) {
-      window.isReadyValues = []
-    }
-    window.isReadyValues.push(router.isReady)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      if (!window.isReadyValues) {
+        window.isReadyValues = []
+      }
+      window.isReadyValues.push(router.isReady)
+    }, [router])
   }
 
   return (

diff --git a/test/integration/router-is-ready/pages/gip.js b/test/integration/router-is-ready/pages/gip.js
@@ -1,13 +1,17 @@
 import { useRouter } from 'next/router'
+import { useLayoutEffect } from 'react'
 
 export default function Page(props) {
   const router = useRouter()
 
   if (typeof window !== 'undefined') {
-    if (!window.isReadyValues) {
-      window.isReadyValues = []
-    }
-    window.isReadyValues.push(router.isReady)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      if (!window.isReadyValues) {
+        window.isReadyValues = []
+      }
+      window.isReadyValues.push(router.isReady)
+    }, [router])
   }
 
   return (

diff --git a/test/integration/router-is-ready/pages/gsp.js b/test/integration/router-is-ready/pages/gsp.js
@@ -1,13 +1,17 @@
 import { useRouter } from 'next/router'
+import { useLayoutEffect } from 'react'
 
 export default function Page(props) {
   const router = useRouter()
 
   if (typeof window !== 'undefined') {
-    if (!window.isReadyValues) {
-      window.isReadyValues = []
-    }
-    window.isReadyValues.push(router.isReady)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      if (!window.isReadyValues) {
+        window.isReadyValues = []
+      }
+      window.isReadyValues.push(router.isReady)
+    }, [router])
   }
 
   return (

diff --git a/test/integration/router-is-ready/pages/gssp.js b/test/integration/router-is-ready/pages/gssp.js
@@ -1,13 +1,17 @@
 import { useRouter } from 'next/router'
+import { useLayoutEffect } from 'react'
 
 export default function Page(props) {
   const router = useRouter()
 
   if (typeof window !== 'undefined') {
-    if (!window.isReadyValues) {
-      window.isReadyValues = []
-    }
-    window.isReadyValues.push(router.isReady)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      if (!window.isReadyValues) {
+        window.isReadyValues = []
+      }
+      window.isReadyValues.push(router.isReady)
+    }, [router])
   }
 
   return (