Skip to content

Commit 0ecf5e1

Browse files
jerelmillerjerelmiller
committed
Use the render helper in the other tests
1 parent 70ba65d commit 0ecf5e1

1 file changed

Lines changed: 59 additions & 150 deletions

File tree

‎src/react/hooks/__tests__/useLoadableQuery/customScalars.test.tsx‎

Lines changed: 59 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
import { screen } from "@testing-library/react";
2-
import {
3-
createRenderStream,
4-
disableActEnvironment,
5-
useTrackRenders,
6-
} from "@testing-library/react-render-stream";
7-
import { userEvent } from "@testing-library/user-event";
8-
import React, { Suspense } from "react";
1+
import { disableActEnvironment } from "@testing-library/react-render-stream";
92
import { delay, of } from "rxjs";
103

114
import type { OperationVariables } from "@apollo/client";
@@ -21,8 +14,7 @@ import {
2114
Defer20220824Handler,
2215
GraphQL17Alpha9Handler,
2316
} from "@apollo/client/incremental";
24-
import type { QueryRef } from "@apollo/client/react";
25-
import { useLoadableQuery, useReadQuery } from "@apollo/client/react";
17+
import { useLoadableQuery } from "@apollo/client/react";
2618
import {
2719
createClientWrapper,
2820
dateScalar,
@@ -51,13 +43,6 @@ test("serializes scalar variables used in field arguments", async () => {
5143
}),
5244
});
5345

54-
const renderStream = createRenderStream({
55-
initialSnapshot: {
56-
result: null as useReadQuery.Result<any> | null,
57-
},
58-
skipNonTrackingRenders: true,
59-
});
60-
6146
const query = gql`
6247
query Event($date: Date!) {
6348
event(date: $date) {
@@ -66,53 +51,33 @@ test("serializes scalar variables used in field arguments", async () => {
6651
}
6752
`;
6853

69-
function ReadQuery({ queryRef }: { queryRef: QueryRef }) {
70-
useTrackRenders({ name: "useReadQuery" });
71-
renderStream.mergeSnapshot({ result: useReadQuery(queryRef) });
72-
73-
return null;
74-
}
54+
using _disabledAct = disableActEnvironment();
55+
const { takeRender, loadQuery } = await renderUseLoadableQueryHook(
56+
() => useLoadableQuery(query),
57+
{ wrapper: createClientWrapper(client) }
58+
);
7559

76-
function Fallback() {
77-
useTrackRenders({ name: "<Suspense />" });
78-
return null;
79-
}
60+
{
61+
const { renderedComponents } = await takeRender();
8062

81-
function App() {
82-
useTrackRenders({ name: "useLoadableQuery" });
83-
const [loadQuery, queryRef] = useLoadableQuery(query);
84-
85-
return (
86-
<>
87-
<button onClick={() => loadQuery({ date: new Date(2026, 0, 1) })}>
88-
Load query
89-
</button>
90-
<Suspense fallback={<Fallback />}>
91-
{queryRef && <ReadQuery queryRef={queryRef} />}
92-
</Suspense>
93-
</>
94-
);
63+
expect(renderedComponents).toStrictEqual(["useLoadableQuery"]);
9564
}
9665

97-
using _disabledAct = disableActEnvironment();
98-
const user = userEvent.setup();
99-
await renderStream.render(<App />, {
100-
wrapper: createClientWrapper(client),
101-
});
66+
loadQuery({ date: new Date(2026, 0, 1) });
10267

103-
await expect(renderStream.takeRender()).resolves.toMatchObject({
104-
renderedComponents: ["useLoadableQuery"],
105-
});
106-
107-
await user.click(screen.getByText("Load query"));
68+
{
69+
const { renderedComponents } = await takeRender();
10870

109-
await expect(renderStream.takeRender()).resolves.toMatchObject({
110-
renderedComponents: ["useLoadableQuery", "<Suspense />"],
111-
});
71+
expect(renderedComponents).toStrictEqual([
72+
"useLoadableQuery",
73+
"<Suspense />",
74+
]);
75+
}
11276

11377
{
114-
const { snapshot, renderedComponents } = await renderStream.takeRender();
78+
const { snapshot, renderedComponents } = await takeRender();
11579

80+
invariant("result" in snapshot);
11681
expect(renderedComponents).toStrictEqual(["useReadQuery"]);
11782
expect(snapshot.result).toStrictEqualTyped({
11883
data: {
@@ -127,7 +92,7 @@ test("serializes scalar variables used in field arguments", async () => {
12792
});
12893
}
12994

130-
await expect(renderStream).not.toRerender();
95+
await expect(takeRender).not.toRerender();
13196
expect(requestVariables).toStrictEqualTyped({ date: "2026-01-01" });
13297
});
13398

@@ -147,13 +112,6 @@ test("serializes scalar variables used in directive arguments", async () => {
147112
}),
148113
});
149114

150-
const renderStream = createRenderStream({
151-
initialSnapshot: {
152-
result: null as useReadQuery.Result<any> | null,
153-
},
154-
skipNonTrackingRenders: true,
155-
});
156-
157115
const query = gql`
158116
query Event($date: Date!) {
159117
event @on(date: $date) {
@@ -162,53 +120,33 @@ test("serializes scalar variables used in directive arguments", async () => {
162120
}
163121
`;
164122

165-
function ReadQuery({ queryRef }: { queryRef: QueryRef }) {
166-
useTrackRenders({ name: "useReadQuery" });
167-
renderStream.mergeSnapshot({ result: useReadQuery(queryRef) });
168-
169-
return null;
170-
}
123+
using _disabledAct = disableActEnvironment();
124+
const { takeRender, loadQuery } = await renderUseLoadableQueryHook(
125+
() => useLoadableQuery(query),
126+
{ wrapper: createClientWrapper(client) }
127+
);
171128

172-
function Fallback() {
173-
useTrackRenders({ name: "<Suspense />" });
174-
return null;
175-
}
129+
{
130+
const { renderedComponents } = await takeRender();
176131

177-
function App() {
178-
useTrackRenders({ name: "useLoadableQuery" });
179-
const [loadQuery, queryRef] = useLoadableQuery(query);
180-
181-
return (
182-
<>
183-
<button onClick={() => loadQuery({ date: new Date(2026, 0, 1) })}>
184-
Load query
185-
</button>
186-
<Suspense fallback={<Fallback />}>
187-
{queryRef && <ReadQuery queryRef={queryRef} />}
188-
</Suspense>
189-
</>
190-
);
132+
expect(renderedComponents).toStrictEqual(["useLoadableQuery"]);
191133
}
192134

193-
using _disabledAct = disableActEnvironment();
194-
const user = userEvent.setup();
195-
await renderStream.render(<App />, {
196-
wrapper: createClientWrapper(client),
197-
});
198-
199-
await expect(renderStream.takeRender()).resolves.toMatchObject({
200-
renderedComponents: ["useLoadableQuery"],
201-
});
135+
loadQuery({ date: new Date(2026, 0, 1) });
202136

203-
await user.click(screen.getByText("Load query"));
137+
{
138+
const { renderedComponents } = await takeRender();
204139

205-
await expect(renderStream.takeRender()).resolves.toMatchObject({
206-
renderedComponents: ["useLoadableQuery", "<Suspense />"],
207-
});
140+
expect(renderedComponents).toStrictEqual([
141+
"useLoadableQuery",
142+
"<Suspense />",
143+
]);
144+
}
208145

209146
{
210-
const { snapshot, renderedComponents } = await renderStream.takeRender();
147+
const { snapshot, renderedComponents } = await takeRender();
211148

149+
invariant("result" in snapshot);
212150
expect(renderedComponents).toStrictEqual(["useReadQuery"]);
213151
expect(snapshot.result).toStrictEqualTyped({
214152
data: {
@@ -223,7 +161,7 @@ test("serializes scalar variables used in directive arguments", async () => {
223161
});
224162
}
225163

226-
await expect(renderStream).not.toRerender();
164+
await expect(takeRender).not.toRerender();
227165
expect(requestVariables).toStrictEqualTyped({ date: "2026-01-01" });
228166
});
229167

@@ -250,13 +188,6 @@ test("serializes scalar fields in input object variables", async () => {
250188
}),
251189
});
252190

253-
const renderStream = createRenderStream({
254-
initialSnapshot: {
255-
result: null as useReadQuery.Result<any> | null,
256-
},
257-
skipNonTrackingRenders: true,
258-
});
259-
260191
const query = gql`
261192
query Event($filter: EventFilter!) {
262193
event(filter: $filter) {
@@ -265,55 +196,33 @@ test("serializes scalar fields in input object variables", async () => {
265196
}
266197
`;
267198

268-
function ReadQuery({ queryRef }: { queryRef: QueryRef }) {
269-
useTrackRenders({ name: "useReadQuery" });
270-
renderStream.mergeSnapshot({ result: useReadQuery(queryRef) });
271-
272-
return null;
273-
}
199+
using _disabledAct = disableActEnvironment();
200+
const { takeRender, loadQuery } = await renderUseLoadableQueryHook(
201+
() => useLoadableQuery(query),
202+
{ wrapper: createClientWrapper(client) }
203+
);
274204

275-
function Fallback() {
276-
useTrackRenders({ name: "<Suspense />" });
277-
return null;
278-
}
205+
{
206+
const { renderedComponents } = await takeRender();
279207

280-
function App() {
281-
useTrackRenders({ name: "useLoadableQuery" });
282-
const [loadQuery, queryRef] = useLoadableQuery(query);
283-
284-
return (
285-
<>
286-
<button
287-
onClick={() => loadQuery({ filter: { date: new Date(2026, 0, 1) } })}
288-
>
289-
Load query
290-
</button>
291-
<Suspense fallback={<Fallback />}>
292-
{queryRef && <ReadQuery queryRef={queryRef} />}
293-
</Suspense>
294-
</>
295-
);
208+
expect(renderedComponents).toStrictEqual(["useLoadableQuery"]);
296209
}
297210

298-
using _disabledAct = disableActEnvironment();
299-
const user = userEvent.setup();
300-
await renderStream.render(<App />, {
301-
wrapper: createClientWrapper(client),
302-
});
303-
304-
await expect(renderStream.takeRender()).resolves.toMatchObject({
305-
renderedComponents: ["useLoadableQuery"],
306-
});
211+
loadQuery({ filter: { date: new Date(2026, 0, 1) } });
307212

308-
await user.click(screen.getByText("Load query"));
213+
{
214+
const { renderedComponents } = await takeRender();
309215

310-
await expect(renderStream.takeRender()).resolves.toMatchObject({
311-
renderedComponents: ["useLoadableQuery", "<Suspense />"],
312-
});
216+
expect(renderedComponents).toStrictEqual([
217+
"useLoadableQuery",
218+
"<Suspense />",
219+
]);
220+
}
313221

314222
{
315-
const { snapshot, renderedComponents } = await renderStream.takeRender();
223+
const { snapshot, renderedComponents } = await takeRender();
316224

225+
invariant("result" in snapshot);
317226
expect(renderedComponents).toStrictEqual(["useReadQuery"]);
318227
expect(snapshot.result).toStrictEqualTyped({
319228
data: {
@@ -328,7 +237,7 @@ test("serializes scalar fields in input object variables", async () => {
328237
});
329238
}
330239

331-
await expect(renderStream).not.toRerender();
240+
await expect(takeRender).not.toRerender();
332241
expect(requestVariables).toStrictEqualTyped({
333242
filter: { date: "2026-01-01" },
334243
});

0 commit comments

Comments
 (0)