Add React test for includes: child collection subscription via useLiveQuery

kevin-dp · claude · kevin-dp · commit e03a060bbdc4 · 2026-03-10T14:58:47.000+01:00
Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/packages/react-db/tests/useLiveQuery.test.tsx b/packages/react-db/tests/useLiveQuery.test.tsx
@@ -2481,4 +2481,112 @@ describe(`Query Collections`, () => {
       })
     })
   })
+
+  describe(`includes subqueries`, () => {
+    type Project = {
+      id: string
+      name: string
+    }
+
+    type ProjectIssue = {
+      id: string
+      title: string
+      projectId: string
+    }
+
+    const sampleProjects: Array<Project> = [
+      { id: `p1`, name: `Alpha` },
+      { id: `p2`, name: `Beta` },
+    ]
+
+    const sampleProjectIssues: Array<ProjectIssue> = [
+      { id: `i1`, title: `Bug in Alpha`, projectId: `p1` },
+      { id: `i2`, title: `Feature for Alpha`, projectId: `p1` },
+      { id: `i3`, title: `Bug in Beta`, projectId: `p2` },
+    ]
+
+    it(`should render includes results and reactively update child collections`, async () => {
+      const projectsCollection = createCollection(
+        mockSyncCollectionOptions<Project>({
+          id: `includes-react-projects`,
+          getKey: (p) => p.id,
+          initialData: sampleProjects,
+        }),
+      )
+
+      const issuesCollection = createCollection(
+        mockSyncCollectionOptions<ProjectIssue>({
+          id: `includes-react-issues`,
+          getKey: (i) => i.id,
+          initialData: sampleProjectIssues,
+        }),
+      )
+
+      // Parent hook: runs includes query that produces child Collections
+      const { result: parentResult } = renderHook(() =>
+        useLiveQuery((q) =>
+          q.from({ p: projectsCollection }).select(({ p }) => ({
+            id: p.id,
+            name: p.name,
+            issues: q
+              .from({ i: issuesCollection })
+              .where(({ i }) => eq(i.projectId, p.id))
+              .select(({ i }) => ({
+                id: i.id,
+                title: i.title,
+              })),
+          })),
+        ),
+      )
+
+      // Wait for parent to be ready
+      await waitFor(() => {
+        expect(parentResult.current.data).toHaveLength(2)
+      })
+
+      const alphaProject = parentResult.current.data.find(
+        (p: any) => p.id === `p1`,
+      )!
+      expect(alphaProject.name).toBe(`Alpha`)
+
+      // Child hook: subscribes to the child Collection from the parent row,
+      // simulating a subcomponent using useLiveQuery(project.issues)
+      const { result: childResult } = renderHook(() =>
+        useLiveQuery((alphaProject as any).issues),
+      )
+
+      await waitFor(() => {
+        expect(childResult.current.data).toHaveLength(2)
+      })
+
+      expect(childResult.current.data).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ id: `i1`, title: `Bug in Alpha` }),
+          expect.objectContaining({ id: `i2`, title: `Feature for Alpha` }),
+        ]),
+      )
+
+      // Add a new issue to Alpha — the child hook should reactively update
+      act(() => {
+        issuesCollection.utils.begin()
+        issuesCollection.utils.write({
+          type: `insert`,
+          value: { id: `i4`, title: `New Alpha issue`, projectId: `p1` },
+        })
+        issuesCollection.utils.commit()
+      })
+
+      await waitFor(() => {
+        expect(childResult.current.data).toHaveLength(3)
+      })
+
+      expect(childResult.current.data).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ id: `i1`, title: `Bug in Alpha` }),
+          expect.objectContaining({ id: `i2`, title: `Feature for Alpha` }),
+          expect.objectContaining({ id: `i4`, title: `New Alpha issue` }),
+        ]),
+      )
+    })
+  })
 })
