Skip to content

Commit e1f3647

Browse files
matalluimatallui
committed
Stabilize Predict search query tests
1 parent be519f9 commit e1f3647

3 files changed

Lines changed: 57 additions & 70 deletions

File tree

‎app/components/UI/Predict/hooks/usePredictSearchMarketData.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,13 +89,14 @@ export const usePredictSearchMarketData = ({
8989
return refine ? refine(markets) : markets;
9090
}, [enabled, query.data, refine]);
9191

92+
const queryRefetch = query.refetch;
9293
const refetch = useCallback(async () => {
9394
if (!enabled) {
9495
return;
9596
}
9697

97-
await query.refetch();
98-
}, [enabled, query]);
98+
await queryRefetch();
99+
}, [enabled, queryRefetch]);
99100

100101
return {
101102
marketData,

‎app/components/Views/TrendingView/TrendingView.test.tsx‎

Lines changed: 28 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import { render, fireEvent } from '@testing-library/react-native';
33
import { NavigationContainer } from '@react-navigation/native';
44
import { createStackNavigator } from '@react-navigation/stack';
5+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
56

67
const mockNavigate = jest.fn();
78
const mockGoBack = jest.fn();
@@ -55,6 +56,20 @@ const TrendingView: React.FC = () => (
5556
</Stack.Navigator>
5657
);
5758

59+
const renderTrendingView = () => {
60+
const queryClient = new QueryClient({
61+
defaultOptions: { queries: { retry: false, cacheTime: 0 } },
62+
});
63+
64+
return render(
65+
<QueryClientProvider client={queryClient}>
66+
<NavigationContainer>
67+
<TrendingView />
68+
</NavigationContainer>
69+
</QueryClientProvider>,
70+
);
71+
};
72+
5873
jest.mock('../../../components/hooks/useMetrics', () => ({
5974
useMetrics: () => ({
6075
isEnabled: mockIsEnabled,
@@ -198,11 +213,7 @@ describe('TrendingView', () => {
198213
createMockSelectorImplementation({ browserTabsCount: 0 }),
199214
);
200215

201-
const { getByTestId, queryByText } = render(
202-
<NavigationContainer>
203-
<TrendingView />
204-
</NavigationContainer>,
205-
);
216+
const { getByTestId, queryByText } = renderTrendingView();
206217

207218
const browserButton = getByTestId('trending-view-browser-button');
208219
expect(browserButton).toBeOnTheScreen();
@@ -214,11 +225,7 @@ describe('TrendingView', () => {
214225
createMockSelectorImplementation({ browserTabsCount: 1 }),
215226
);
216227

217-
const { getByText } = render(
218-
<NavigationContainer>
219-
<TrendingView />
220-
</NavigationContainer>,
221-
);
228+
const { getByText } = renderTrendingView();
222229

223230
expect(getByText('1')).toBeOnTheScreen();
224231
});
@@ -228,11 +235,7 @@ describe('TrendingView', () => {
228235
createMockSelectorImplementation({ browserTabsCount: 5 }),
229236
);
230237

231-
const { getByText } = render(
232-
<NavigationContainer>
233-
<TrendingView />
234-
</NavigationContainer>,
235-
);
238+
const { getByText } = renderTrendingView();
236239

237240
expect(getByText('5')).toBeOnTheScreen();
238241
});
@@ -242,11 +245,7 @@ describe('TrendingView', () => {
242245
createMockSelectorImplementation({ browserTabsCount: 99 }),
243246
);
244247

245-
const { getByText } = render(
246-
<NavigationContainer>
247-
<TrendingView />
248-
</NavigationContainer>,
249-
);
248+
const { getByText } = renderTrendingView();
250249

251250
expect(getByText('99')).toBeOnTheScreen();
252251
});
@@ -256,11 +255,7 @@ describe('TrendingView', () => {
256255
createMockSelectorImplementation({ browserTabsCount: 0 }),
257256
);
258257

259-
const { getByTestId } = render(
260-
<NavigationContainer>
261-
<TrendingView />
262-
</NavigationContainer>,
263-
);
258+
const { getByTestId } = renderTrendingView();
264259

265260
const browserButton = getByTestId('trending-view-browser-button');
266261
fireEvent.press(browserButton);
@@ -282,11 +277,7 @@ describe('TrendingView', () => {
282277
createMockSelectorImplementation({ browserTabsCount: 3 }),
283278
);
284279

285-
const { getByTestId } = render(
286-
<NavigationContainer>
287-
<TrendingView />
288-
</NavigationContainer>,
289-
);
280+
const { getByTestId } = renderTrendingView();
290281

291282
const browserButton = getByTestId('trending-view-browser-button');
292283
fireEvent.press(browserButton);
@@ -314,57 +305,37 @@ describe('TrendingView', () => {
314305
});
315306

316307
it('renders title in header', () => {
317-
const { getByText } = render(
318-
<NavigationContainer>
319-
<TrendingView />
320-
</NavigationContainer>,
321-
);
308+
const { getByText } = renderTrendingView();
322309

323310
expect(getByText('Explore')).toBeOnTheScreen();
324311
});
325312

326313
it('wraps screen in SafeAreaView', () => {
327-
const { getByTestId } = render(
328-
<NavigationContainer>
329-
<TrendingView />
330-
</NavigationContainer>,
331-
);
314+
const { getByTestId } = renderTrendingView();
332315

333316
expect(
334317
getByTestId(TrendingViewSelectorsIDs.EXPLORE_SAFE_AREA),
335318
).toBeOnTheScreen();
336319
});
337320

338321
it('renders HeaderRoot', () => {
339-
const { getByTestId } = render(
340-
<NavigationContainer>
341-
<TrendingView />
342-
</NavigationContainer>,
343-
);
322+
const { getByTestId } = renderTrendingView();
344323

345324
expect(
346325
getByTestId(TrendingViewSelectorsIDs.EXPLORE_HEADER_ROOT),
347326
).toBeOnTheScreen();
348327
});
349328

350329
it('renders search bar button', () => {
351-
const { getByTestId } = render(
352-
<NavigationContainer>
353-
<TrendingView />
354-
</NavigationContainer>,
355-
);
330+
const { getByTestId } = renderTrendingView();
356331

357332
const searchButton = getByTestId('explore-view-search-button');
358333

359334
expect(searchButton).toBeOnTheScreen();
360335
});
361336

362337
it('navigates to ExploreSearch route when search bar is pressed', () => {
363-
const { getByTestId } = render(
364-
<NavigationContainer>
365-
<TrendingView />
366-
</NavigationContainer>,
367-
);
338+
const { getByTestId } = renderTrendingView();
368339

369340
const searchButton = getByTestId('explore-view-search-button');
370341
fireEvent.press(searchButton);
@@ -378,11 +349,7 @@ describe('TrendingView', () => {
378349
createMockSelectorImplementation({ basicFunctionalityEnabled: false }),
379350
);
380351

381-
const { getByTestId } = render(
382-
<NavigationContainer>
383-
<TrendingView />
384-
</NavigationContainer>,
385-
);
352+
const { getByTestId } = renderTrendingView();
386353

387354
expect(getByTestId('basic-functionality-empty-state')).toBeOnTheScreen();
388355
});
@@ -395,11 +362,7 @@ describe('TrendingView', () => {
395362
}),
396363
);
397364

398-
const { getByTestId } = render(
399-
<NavigationContainer>
400-
<TrendingView />
401-
</NavigationContainer>,
402-
);
365+
const { getByTestId } = renderTrendingView();
403366

404367
expect(getByTestId('explore-page-v1')).toBeOnTheScreen();
405368
});

‎tests/component-view/renderers/trending.ts‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import '../mocks';
22
import React from 'react';
3+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
34
import type { DeepPartial } from '../../../app/util/test/renderWithProvider';
45
import type { RootState } from '../../../app/reducers';
56
import { renderScreenWithRoutes } from '../render';
@@ -16,6 +17,26 @@ interface RenderTrendingViewOptions {
1617
deterministicFiat?: boolean;
1718
}
1819

20+
function withQueryClient(
21+
Component: React.ComponentType<unknown>,
22+
): React.ComponentType<unknown> {
23+
return function WrappedWithQueryClient(props: unknown) {
24+
const queryClient = React.useMemo(
25+
() =>
26+
new QueryClient({
27+
defaultOptions: { queries: { retry: false, cacheTime: 0 } },
28+
}),
29+
[],
30+
);
31+
32+
return React.createElement(
33+
QueryClientProvider,
34+
{ client: queryClient },
35+
React.createElement(Component, props as Record<string, unknown>),
36+
);
37+
};
38+
}
39+
1940
export function renderTrendingViewWithRoutes(
2041
options: RenderTrendingViewOptions = {},
2142
): ReturnType<typeof renderScreenWithRoutes> {
@@ -28,22 +49,24 @@ export function renderTrendingViewWithRoutes(
2849
const state = builder.build();
2950

3051
return renderScreenWithRoutes(
31-
ExploreFeed as unknown as React.ComponentType,
52+
withQueryClient(ExploreFeed as unknown as React.ComponentType<unknown>),
3253
{ name: Routes.TRENDING_FEED },
3354
[
3455
{
3556
name: Routes.EXPLORE_SEARCH,
36-
Component:
57+
Component: withQueryClient(
3758
ExploreSearchScreen as unknown as React.ComponentType<unknown>,
59+
),
3860
},
3961
{
4062
name: 'Asset',
4163
Component: AssetDetails as unknown as React.ComponentType<unknown>,
4264
},
4365
{
4466
name: Routes.WALLET.TRENDING_TOKENS_FULL_VIEW,
45-
Component:
67+
Component: withQueryClient(
4668
TrendingTokensFullView as unknown as React.ComponentType<unknown>,
69+
),
4770
},
4871
{
4972
name: Routes.WALLET.RWA_TOKENS_FULL_VIEW,

0 commit comments

Comments
 (0)