test(solid-query): Add test for transition (#4224)

* test(solid-query) Add test for transition

* change!

* chore(solid-js) update to most recent version and enable test

* Delete change

Co-authored-by: Jedrzej Sadowski <jedrzej.sadowski@justeattakeaway.com>
Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>

package.json

@@ -85,7 +85,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^5.6.0",
     "solid-jest": "^0.2.0",
-    "solid-js": "^1.5.4",
+    "solid-js": "^1.5.7",
     "solid-testing-library": "^0.3.0",
     "stream-to-array": "^2.3.0",
     "svelte": "^3.48.0",

packages/solid-query/package.json

@@ -46,7 +46,7 @@
     "@tanstack/query-core": "workspace:*"
   },
   "peerDependencies": {
-    "solid-js": "^1.5.4"
+    "solid-js": "^1.5.7"
   },
   "peerDependenciesMeta": {}
 }

packages/solid-query/src/__tests__/transition.test.tsx

@@ -0,0 +1,58 @@
+import { fireEvent, render, screen, waitFor } from 'solid-testing-library'
+
+import { createSignal, Show, startTransition, Suspense } from 'solid-js'
+import { createQuery, QueryCache, QueryClientProvider } from '..'
+import { createQueryClient, queryKey, sleep } from './utils'
+
+describe("useQuery's in Suspense mode with transitions", () => {
+  const queryCache = new QueryCache()
+  const queryClient = createQueryClient({ queryCache })
+
+  it('should render the content when the transition is done', async () => {
+    const key = queryKey()
+
+    function Suspended() {
+      const state = createQuery(key, async () => {
+        await sleep(10)
+        return true
+      })
+
+      return <Show when={state.data}>Message</Show>
+    }
+
+    function Page() {
+      const [showSignal, setShowSignal] = createSignal(false)
+
+      return (
+        <div>
+          <button
+            aria-label="toggle"
+            onClick={() =>
+              startTransition(() => setShowSignal((value) => !value))
+            }
+          >
+            {showSignal() ? 'Hide' : 'Show'}
+          </button>
+          <Suspense fallback="Loading">
+            <Show when={showSignal()}>
+              <Suspended />
+            </Show>
+          </Suspense>
+        </div>
+      )
+    }
+
+    render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>
+    ))
+
+    await waitFor(() => screen.getByText('Show'))
+    fireEvent.click(screen.getByLabelText('toggle'))
+
+    await waitFor(() => screen.getByText('Message'))
+    // verify that the button also updated. See https://github.com/solidjs/solid/issues/1249
+    await waitFor(() => screen.getByText('Hide'))
+  })
+})