test: Add non-regression test

packages/e2e/cypress/e2e/repro-702.cy.js

@@ -0,0 +1,24 @@
+/// <reference types="cypress" />
+
+describe('repro-702', () => {
+  it('mounts components with the correct state on load', () => {
+    cy.visit('/app/repro-702?a=test&b=test')
+    cy.get('#conditional-a-useQueryState').should('have.text', 'test pass')
+    cy.get('#conditional-a-useQueryStates').should('have.text', 'test pass')
+    cy.get('#conditional-b-useQueryState').should('have.text', 'test pass')
+    cy.get('#conditional-b-useQueryStates').should('have.text', 'test pass')
+  })
+
+  it('mounts components with the correct state after an update', () => {
+    cy.visit('/app/repro-702')
+    cy.contains('#hydration-marker', 'hydrated').should('be.hidden')
+
+    cy.get('#trigger-a').click()
+    cy.get('#conditional-a-useQueryState').should('have.text', 'test pass')
+    cy.get('#conditional-a-useQueryStates').should('have.text', 'test pass')
+
+    cy.get('#trigger-b').click()
+    cy.get('#conditional-b-useQueryState').should('have.text', 'test pass')
+    cy.get('#conditional-b-useQueryStates').should('have.text', 'test pass')
+  })
+})

packages/e2e/src/app/app/repro-702/page.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import { parseAsString, useQueryState, useQueryStates } from 'nuqs'
+import { Suspense, useRef } from 'react'
+
+export default function Page() {
+  return (
+    <Suspense>
+      <Client />
+    </Suspense>
+  )
+}
+
+function Client() {
+  return (
+    <>
+      <TriggerA />
+      <TriggerB />
+      <SwitchComponentA />
+      <SwitchComponentB />
+    </>
+  )
+}
+
+// using useQueryState
+function TriggerA() {
+  const [, setState] = useQueryState('a')
+  return (
+    <button id="trigger-a" onClick={() => setState('test')}>
+      Trigger A (via useQueryState)
+    </button>
+  )
+}
+
+// using useQueryStates
+function TriggerB() {
+  const [, setState] = useQueryStates({
+    b: parseAsString
+  })
+  return (
+    <button id="trigger-b" onClick={() => setState({ b: 'test' })}>
+      Trigger B (via useQueryStates)
+    </button>
+  )
+}
+
+function SwitchComponentA() {
+  const [x] = useQueryState('a')
+  if (x === 'test') {
+    return <ConditionalComponentA />
+  }
+  return null
+}
+
+function SwitchComponentB() {
+  const [x] = useQueryState('b')
+  if (x === 'test') {
+    return <ConditionalComponentB />
+  }
+  return null
+}
+
+function ConditionalComponentA() {
+  const nullCheckUseQueryState = useRef(false)
+  const nullCheckUseQueryStates = useRef(false)
+  const [fromUseQueryState] = useQueryState('a')
+  const [{ a: fromUseQueryStates }] = useQueryStates({ a: parseAsString })
+
+  if (fromUseQueryState === null) {
+    nullCheckUseQueryState.current = true
+  }
+  if (fromUseQueryStates === null) {
+    nullCheckUseQueryStates.current = true
+  }
+
+  return (
+    <>
+      <div id="conditional-a-useQueryState">
+        {fromUseQueryState} {nullCheckUseQueryState.current ? 'fail' : 'pass'}
+      </div>
+      <div id="conditional-a-useQueryStates">
+        {fromUseQueryStates} {nullCheckUseQueryStates.current ? 'fail' : 'pass'}
+      </div>
+    </>
+  )
+}
+
+function ConditionalComponentB() {
+  const nullCheckUseQueryState = useRef(false)
+  const nullCheckUseQueryStates = useRef(false)
+  const [fromUseQueryState] = useQueryState('b')
+  const [{ b: fromUseQueryStates }] = useQueryStates({ b: parseAsString })
+
+  if (fromUseQueryState === null) {
+    nullCheckUseQueryState.current = true
+  }
+  if (fromUseQueryStates === null) {
+    nullCheckUseQueryStates.current = true
+  }
+  return (
+    <>
+      <div id="conditional-b-useQueryState">
+        {fromUseQueryState} {nullCheckUseQueryState.current ? 'fail' : 'pass'}
+      </div>
+      <div id="conditional-b-useQueryStates">
+        {fromUseQueryStates} {nullCheckUseQueryStates.current ? 'fail' : 'pass'}
+      </div>
+    </>
+  )
+}