diff --git a/ui-v2/src/hooks/deployments/deployments.test.tsx b/ui-v2/src/hooks/deployments/deployments.test.tsx
index e69cebd12f8b..e3da587ece69 100644
--- a/ui-v2/src/hooks/deployments/deployments.test.tsx
+++ b/ui-v2/src/hooks/deployments/deployments.test.tsx
@@ -1,4 +1,3 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { renderHook, waitFor } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
 import { describe, expect, it } from "vitest";
@@ -9,7 +8,7 @@ import {
 	usePaginateDeployments,
 } from "./index";
 
-import { server } from "@tests/mocks";
+import { createWrapper, server } from "@tests/utils";
 
 describe("deployments hooks", () => {
 	const seedDeployments = (): Deployment[] => [
@@ -52,13 +51,6 @@ describe("deployments hooks", () => {
 		);
 	};
 
-	const createQueryWrapper = ({ queryClient = new QueryClient() }) => {
-		const QueryWrapper = ({ children }: { children: React.ReactNode }) => (
-			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-		);
-		return QueryWrapper;
-	};
-
 	const paginationFilter = {
 		page: 1,
 		limit: 10,
@@ -82,9 +74,7 @@ describe("deployments hooks", () => {
 		// Initialize hook
 		const { result } = renderHook(
 			() => usePaginateDeployments(paginationFilter),
-			{
-				wrapper: createQueryWrapper({}),
-			},
+			{ wrapper: createWrapper() },
 		);
 
 		// Assert
@@ -103,7 +93,7 @@ describe("deployments hooks", () => {
 
 		// Initialize hook
 		const { result } = renderHook(() => useCountDeployments(countFilter), {
-			wrapper: createQueryWrapper({}),
+			wrapper: createWrapper(),
 		});
 
 		// Assert
diff --git a/ui-v2/src/hooks/global-concurrency-limits.test.tsx b/ui-v2/src/hooks/global-concurrency-limits.test.tsx
index cad75265bb6e..8d86ac261d8a 100644
--- a/ui-v2/src/hooks/global-concurrency-limits.test.tsx
+++ b/ui-v2/src/hooks/global-concurrency-limits.test.tsx
@@ -1,6 +1,6 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient } from "@tanstack/react-query";
 import { act, renderHook, waitFor } from "@testing-library/react";
-import { server } from "@tests/mocks";
+import { createWrapper, server } from "@tests/utils";
 import { http, HttpResponse } from "msw";
 import { describe, expect, it } from "vitest";
 
@@ -40,13 +40,6 @@ describe("global concurrency limits hooks", () => {
 		);
 	};
 
-	const createQueryWrapper = ({ queryClient = new QueryClient() }) => {
-		const QueryWrapper = ({ children }: { children: React.ReactNode }) => (
-			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-		);
-		return QueryWrapper;
-	};
-
 	const filter = {
 		offset: 0,
 	};
@@ -63,7 +56,7 @@ describe("global concurrency limits hooks", () => {
 		// ------------ Initialize hooks to test
 		const { result } = renderHook(
 			() => useListGlobalConcurrencyLimits(filter),
-			{ wrapper: createQueryWrapper({}) },
+			{ wrapper: createWrapper() },
 		);
 
 		// ------------ Assert
@@ -94,12 +87,12 @@ describe("global concurrency limits hooks", () => {
 		// ------------ Initialize hooks to test
 		const { result: useListGlobalConcurrencyLimitsResult } = renderHook(
 			() => useListGlobalConcurrencyLimits(filter),
-			{ wrapper: createQueryWrapper({ queryClient }) },
+			{ wrapper: createWrapper({ queryClient }) },
 		);
 
 		const { result: useDeleteGlobalConcurrencyLimitResult } = renderHook(
 			useDeleteGlobalConcurrencyLimit,
-			{ wrapper: createQueryWrapper({ queryClient }) },
+			{ wrapper: createWrapper({ queryClient }) },
 		);
 
 		// ------------ Invoke mutation
@@ -157,11 +150,11 @@ describe("global concurrency limits hooks", () => {
 		// ------------ Initialize hooks to test
 		const { result: useListGlobalConcurrencyLimitsResult } = renderHook(
 			() => useListGlobalConcurrencyLimits(filter),
-			{ wrapper: createQueryWrapper({ queryClient }) },
+			{ wrapper: createWrapper({ queryClient }) },
 		);
 		const { result: useCreateGlobalConcurrencyLimitResult } = renderHook(
 			useCreateGlobalConcurrencyLimit,
-			{ wrapper: createQueryWrapper({ queryClient }) },
+			{ wrapper: createWrapper({ queryClient }) },
 		);
 
 		// ------------ Invoke mutation
@@ -221,12 +214,12 @@ describe("global concurrency limits hooks", () => {
 		// ------------ Initialize hooks to test
 		const { result: useListGlobalConcurrencyLimitsResult } = renderHook(
 			() => useListGlobalConcurrencyLimits(filter),
-			{ wrapper: createQueryWrapper({ queryClient }) },
+			{ wrapper: createWrapper({ queryClient }) },
 		);
 
 		const { result: useUpdateGlobalConcurrencyLimitResult } = renderHook(
 			useUpdateGlobalConcurrencyLimit,
-			{ wrapper: createQueryWrapper({ queryClient }) },
+			{ wrapper: createWrapper({ queryClient }) },
 		);
 
 		// ------------ Invoke mutation
diff --git a/ui-v2/src/hooks/variables.test.tsx b/ui-v2/src/hooks/variables.test.tsx
index 884a36860074..70a03b40d77b 100644
--- a/ui-v2/src/hooks/variables.test.tsx
+++ b/ui-v2/src/hooks/variables.test.tsx
@@ -1,10 +1,10 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient } from "@tanstack/react-query";
 import { act, renderHook, waitFor } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
 import { describe, expect, it } from "vitest";
 
 import { components } from "@/api/prefect";
-import { server } from "@tests/mocks";
+import { createWrapper, server } from "@tests/utils";
 
 import {
 	buildCountQuery,
@@ -39,14 +39,6 @@ describe("variable hooks", () => {
 			}),
 		);
 	};
-
-	const createQueryWrapper = ({ queryClient = new QueryClient() }) => {
-		const QueryWrapper = ({ children }: { children: React.ReactNode }) => (
-			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-		);
-		return QueryWrapper;
-	};
-
 	const variableFilter = {
 		offset: 0,
 		sort: "CREATED_DESC" as const,
@@ -65,7 +57,7 @@ describe("variable hooks", () => {
 
 		// ------------ Initialize hooks to test
 		const { result } = renderHook(() => useVariables(variableFilter), {
-			wrapper: createQueryWrapper({ queryClient }),
+			wrapper: createWrapper({ queryClient }),
 		});
 
 		// ------------ Assert
@@ -102,11 +94,11 @@ describe("variable hooks", () => {
 		// ------------ Initialize hooks to test
 		const { result: useVariablesResult } = renderHook(
 			() => useVariables(variableFilter),
-			{ wrapper: createQueryWrapper({ queryClient }) },
+			{ wrapper: createWrapper({ queryClient }) },
 		);
 
 		const { result: useDeleteVariableResult } = renderHook(useDeleteVariable, {
-			wrapper: createQueryWrapper({ queryClient }),
+			wrapper: createWrapper({ queryClient }),
 		});
 
 		// ------------ Invoke mutation
@@ -165,10 +157,10 @@ describe("variable hooks", () => {
 		// ------------ Initialize hooks to test
 		const { result: useVariablesResult } = renderHook(
 			() => useVariables(variableFilter),
-			{ wrapper: createQueryWrapper({ queryClient }) },
+			{ wrapper: createWrapper({ queryClient }) },
 		);
 		const { result: useCreateVariableResult } = renderHook(useCreateVariable, {
-			wrapper: createQueryWrapper({ queryClient }),
+			wrapper: createWrapper({ queryClient }),
 		});
 
 		// ------------ Invoke mutation
@@ -227,10 +219,10 @@ describe("variable hooks", () => {
 		// ------------ Initialize hooks to test
 		const { result: useVariablesResult } = renderHook(
 			() => useVariables(variableFilter),
-			{ wrapper: createQueryWrapper({ queryClient }) },
+			{ wrapper: createWrapper({ queryClient }) },
 		);
 		const { result: useUpdateVariableResult } = renderHook(useUpdateVariable, {
-			wrapper: createQueryWrapper({ queryClient }),
+			wrapper: createWrapper({ queryClient }),
 		});
 
 		// ------------ Invoke mutation
diff --git a/ui-v2/tests/mocks/index.ts b/ui-v2/tests/mocks/index.ts
deleted file mode 100644
index a145bd6f8360..000000000000
--- a/ui-v2/tests/mocks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { server } from "./node";
diff --git a/ui-v2/tests/setup.ts b/ui-v2/tests/setup.ts
index 1cb5018a8282..403d53c2878c 100644
--- a/ui-v2/tests/setup.ts
+++ b/ui-v2/tests/setup.ts
@@ -3,7 +3,7 @@ import * as matchers from "@testing-library/jest-dom/matchers";
 import { cleanup } from "@testing-library/react";
 import { afterAll, afterEach, beforeAll, expect, vi } from "vitest";
 import "@testing-library/jest-dom";
-import { server } from "./mocks";
+import { server } from "./utils";
 
 beforeAll(() => {
 	server.listen({
diff --git a/ui-v2/tests/mocks/handlers.ts b/ui-v2/tests/utils/handlers.ts
similarity index 100%
rename from ui-v2/tests/mocks/handlers.ts
rename to ui-v2/tests/utils/handlers.ts
diff --git a/ui-v2/tests/utils/index.ts b/ui-v2/tests/utils/index.ts
new file mode 100644
index 000000000000..afa45ae6562d
--- /dev/null
+++ b/ui-v2/tests/utils/index.ts
@@ -0,0 +1,21 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createElement } from "react";
+export { server } from "./node";
+
+/* Wraps render() components with app-wide providers
+ *
+ * @example
+ * import { createWrapper } from '@tests/utils'
+ *
+ * ```tsx
+ *	const result = render(<MyComponentToTest />, {
+ *		wrapper: createWrapper(),
+ *	});
+ * ```
+ */
+export const createWrapper = ({ queryClient = new QueryClient() } = {}) => {
+	// Written with createElement because our current vite config doesn't support jsx in tests/
+	const Wrapper = ({ children }: { children: React.ReactNode }) =>
+		createElement(QueryClientProvider, { client: queryClient }, children);
+	return Wrapper;
+};
diff --git a/ui-v2/tests/mocks/node.ts b/ui-v2/tests/utils/node.ts
similarity index 100%
rename from ui-v2/tests/mocks/node.ts
rename to ui-v2/tests/utils/node.ts
diff --git a/ui-v2/tests/variables/variables.test.tsx b/ui-v2/tests/variables/variables.test.tsx
index 4d72ba1e2208..43fd7055fa5a 100644
--- a/ui-v2/tests/variables/variables.test.tsx
+++ b/ui-v2/tests/variables/variables.test.tsx
@@ -2,7 +2,6 @@ import "./mocks";
 import { Toaster } from "@/components/ui/toaster";
 import { VariablesDataTable } from "@/components/variables/data-table";
 import { router } from "@/router";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider } from "@tanstack/react-router";
 import {
 	getByLabelText,
@@ -12,7 +11,7 @@ import {
 	screen,
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { server } from "@tests/mocks";
+import { createWrapper, server } from "@tests/utils";
 import { http, HttpResponse } from "msw";
 import {
 	afterEach,
@@ -26,13 +25,10 @@ import {
 
 const renderVariablesPage = async () => {
 	const user = userEvent.setup();
-	const queryClient = new QueryClient();
 	// Render with router provider
-	const result = render(
-		<QueryClientProvider client={queryClient}>
-			<RouterProvider router={router} />
-		</QueryClientProvider>,
-	);
+	const result = render(<RouterProvider router={router} />, {
+		wrapper: createWrapper(),
+	});
 	await user.click(screen.getByRole("link", { name: "Variables" }));
 	return result;
 };
@@ -335,21 +331,19 @@ describe("Variables page", () => {
 					tags: ["tag2"],
 				},
 			];
-			const queryClient = new QueryClient();
 			render(
-				<QueryClientProvider client={queryClient}>
-					<VariablesDataTable
-						variables={variables}
-						currentVariableCount={2}
-						pagination={{ pageIndex: 0, pageSize: 10 }}
-						onPaginationChange={vi.fn()}
-						columnFilters={[]}
-						onColumnFiltersChange={vi.fn()}
-						sorting="CREATED_DESC"
-						onSortingChange={vi.fn()}
-						onVariableEdit={vi.fn()}
-					/>
-				</QueryClientProvider>,
+				<VariablesDataTable
+					variables={variables}
+					currentVariableCount={2}
+					pagination={{ pageIndex: 0, pageSize: 10 }}
+					onPaginationChange={vi.fn()}
+					columnFilters={[]}
+					onColumnFiltersChange={vi.fn()}
+					sorting="CREATED_DESC"
+					onSortingChange={vi.fn()}
+					onVariableEdit={vi.fn()}
+				/>,
+				{ wrapper: createWrapper() },
 			);
 			expect(screen.getByText("2 Variables")).toBeVisible();
 			// Table headers
@@ -381,21 +375,19 @@ describe("Variables page", () => {
 			}));
 			const onPaginationChange = vi.fn();
 			const user = userEvent.setup();
-			const queryClient = new QueryClient();
 			const { rerender } = render(
-				<QueryClientProvider client={queryClient}>
-					<VariablesDataTable
-						variables={variables.slice(0, 10)}
-						currentVariableCount={20}
-						pagination={{ pageIndex: 0, pageSize: 10 }}
-						onPaginationChange={onPaginationChange}
-						columnFilters={[]}
-						onColumnFiltersChange={vi.fn()}
-						sorting="CREATED_DESC"
-						onSortingChange={vi.fn()}
-						onVariableEdit={vi.fn()}
-					/>
-				</QueryClientProvider>,
+				<VariablesDataTable
+					variables={variables.slice(0, 10)}
+					currentVariableCount={20}
+					pagination={{ pageIndex: 0, pageSize: 10 }}
+					onPaginationChange={onPaginationChange}
+					columnFilters={[]}
+					onColumnFiltersChange={vi.fn()}
+					sorting="CREATED_DESC"
+					onSortingChange={vi.fn()}
+					onVariableEdit={vi.fn()}
+				/>,
+				{ wrapper: createWrapper() },
 			);
 			expect(screen.getByText("20 Variables")).toBeVisible();
 
@@ -412,19 +404,17 @@ describe("Variables page", () => {
 			expect(onPaginationChange).toHaveBeenCalled();
 
 			rerender(
-				<QueryClientProvider client={queryClient}>
-					<VariablesDataTable
-						variables={variables.slice(10, 20)}
-						currentVariableCount={20}
-						pagination={{ pageIndex: 1, pageSize: 10 }}
-						onPaginationChange={onPaginationChange}
-						columnFilters={[]}
-						onColumnFiltersChange={vi.fn()}
-						sorting="CREATED_DESC"
-						onSortingChange={vi.fn()}
-						onVariableEdit={vi.fn()}
-					/>
-				</QueryClientProvider>,
+				<VariablesDataTable
+					variables={variables.slice(10, 20)}
+					currentVariableCount={20}
+					pagination={{ pageIndex: 1, pageSize: 10 }}
+					onPaginationChange={onPaginationChange}
+					columnFilters={[]}
+					onColumnFiltersChange={vi.fn()}
+					sorting="CREATED_DESC"
+					onSortingChange={vi.fn()}
+					onVariableEdit={vi.fn()}
+				/>,
 			);
 
 			expect(screen.getByText("Page 2 of 2")).toBeVisible();
@@ -452,21 +442,19 @@ describe("Variables page", () => {
 					tags: ["tag1"],
 				},
 			];
-			const queryClient = new QueryClient();
 			render(
-				<QueryClientProvider client={queryClient}>
-					<VariablesDataTable
-						variables={variables}
-						currentVariableCount={1}
-						pagination={{ pageIndex: 0, pageSize: 10 }}
-						onPaginationChange={vi.fn()}
-						columnFilters={[]}
-						onColumnFiltersChange={vi.fn()}
-						sorting="CREATED_DESC"
-						onSortingChange={vi.fn()}
-						onVariableEdit={vi.fn()}
-					/>
-				</QueryClientProvider>,
+				<VariablesDataTable
+					variables={variables}
+					currentVariableCount={1}
+					pagination={{ pageIndex: 0, pageSize: 10 }}
+					onPaginationChange={vi.fn()}
+					columnFilters={[]}
+					onColumnFiltersChange={vi.fn()}
+					sorting="CREATED_DESC"
+					onSortingChange={vi.fn()}
+					onVariableEdit={vi.fn()}
+				/>,
+				{ wrapper: createWrapper() },
 			);
 
 			await user.click(screen.getByRole("button", { expanded: false }));
@@ -486,21 +474,19 @@ describe("Variables page", () => {
 					tags: ["tag1"],
 				},
 			];
-			const queryClient = new QueryClient();
 			render(
-				<QueryClientProvider client={queryClient}>
-					<VariablesDataTable
-						variables={variables}
-						currentVariableCount={1}
-						pagination={{ pageIndex: 0, pageSize: 10 }}
-						onPaginationChange={vi.fn()}
-						columnFilters={[]}
-						onColumnFiltersChange={vi.fn()}
-						sorting="CREATED_DESC"
-						onSortingChange={vi.fn()}
-						onVariableEdit={vi.fn()}
-					/>
-				</QueryClientProvider>,
+				<VariablesDataTable
+					variables={variables}
+					currentVariableCount={1}
+					pagination={{ pageIndex: 0, pageSize: 10 }}
+					onPaginationChange={vi.fn()}
+					columnFilters={[]}
+					onColumnFiltersChange={vi.fn()}
+					sorting="CREATED_DESC"
+					onSortingChange={vi.fn()}
+					onVariableEdit={vi.fn()}
+				/>,
+				{ wrapper: createWrapper() },
 			);
 
 			await user.click(screen.getByRole("button", { expanded: false }));
@@ -520,21 +506,19 @@ describe("Variables page", () => {
 					tags: ["tag1"],
 				},
 			];
-			const queryClient = new QueryClient();
 			render(
-				<QueryClientProvider client={queryClient}>
-					<VariablesDataTable
-						variables={variables}
-						currentVariableCount={1}
-						pagination={{ pageIndex: 0, pageSize: 10 }}
-						onPaginationChange={vi.fn()}
-						columnFilters={[]}
-						onColumnFiltersChange={vi.fn()}
-						sorting="CREATED_DESC"
-						onSortingChange={vi.fn()}
-						onVariableEdit={vi.fn()}
-					/>
-				</QueryClientProvider>,
+				<VariablesDataTable
+					variables={variables}
+					currentVariableCount={1}
+					pagination={{ pageIndex: 0, pageSize: 10 }}
+					onPaginationChange={vi.fn()}
+					columnFilters={[]}
+					onColumnFiltersChange={vi.fn()}
+					sorting="CREATED_DESC"
+					onSortingChange={vi.fn()}
+					onVariableEdit={vi.fn()}
+				/>,
+				{ wrapper: createWrapper() },
 			);
 
 			await user.click(screen.getByRole("button", { expanded: false }));
@@ -554,9 +538,8 @@ describe("Variables page", () => {
 					tags: ["tag1"],
 				},
 			];
-			const queryClient = new QueryClient();
 			render(
-				<QueryClientProvider client={queryClient}>
+				<>
 					<Toaster />
 					<VariablesDataTable
 						variables={variables}
@@ -569,7 +552,8 @@ describe("Variables page", () => {
 						onSortingChange={vi.fn()}
 						onVariableEdit={vi.fn()}
 					/>
-				</QueryClientProvider>,
+				</>,
+				{ wrapper: createWrapper() },
 			);
 
 			await user.click(screen.getByRole("button", { expanded: false }));
@@ -590,21 +574,19 @@ describe("Variables page", () => {
 				},
 			];
 			const onColumnFiltersChange = vi.fn();
-			const queryClient = new QueryClient();
 			render(
-				<QueryClientProvider client={queryClient}>
-					<VariablesDataTable
-						variables={variables}
-						currentVariableCount={1}
-						pagination={{ pageIndex: 0, pageSize: 10 }}
-						onPaginationChange={vi.fn()}
-						columnFilters={[{ id: "name", value: "start value" }]}
-						onColumnFiltersChange={onColumnFiltersChange}
-						sorting="CREATED_DESC"
-						onSortingChange={vi.fn()}
-						onVariableEdit={vi.fn()}
-					/>
-				</QueryClientProvider>,
+				<VariablesDataTable
+					variables={variables}
+					currentVariableCount={1}
+					pagination={{ pageIndex: 0, pageSize: 10 }}
+					onPaginationChange={vi.fn()}
+					columnFilters={[{ id: "name", value: "start value" }]}
+					onColumnFiltersChange={onColumnFiltersChange}
+					sorting="CREATED_DESC"
+					onSortingChange={vi.fn()}
+					onVariableEdit={vi.fn()}
+				/>,
+				{ wrapper: createWrapper() },
 			);
 
 			// Clear any initial calls from mounting
@@ -635,21 +617,19 @@ describe("Variables page", () => {
 			];
 
 			const onColumnFiltersChange = vi.fn();
-			const queryClient = new QueryClient();
 			render(
-				<QueryClientProvider client={queryClient}>
-					<VariablesDataTable
-						variables={variables}
-						currentVariableCount={1}
-						pagination={{ pageIndex: 0, pageSize: 10 }}
-						onPaginationChange={vi.fn()}
-						columnFilters={[{ id: "tags", value: ["tag2"] }]}
-						onColumnFiltersChange={onColumnFiltersChange}
-						sorting="CREATED_DESC"
-						onSortingChange={vi.fn()}
-						onVariableEdit={vi.fn()}
-					/>
-				</QueryClientProvider>,
+				<VariablesDataTable
+					variables={variables}
+					currentVariableCount={1}
+					pagination={{ pageIndex: 0, pageSize: 10 }}
+					onPaginationChange={vi.fn()}
+					columnFilters={[{ id: "tags", value: ["tag2"] }]}
+					onColumnFiltersChange={onColumnFiltersChange}
+					sorting="CREATED_DESC"
+					onSortingChange={vi.fn()}
+					onVariableEdit={vi.fn()}
+				/>,
+				{ wrapper: createWrapper() },
 			);
 
 			// Clear any initial calls from mounting
@@ -680,21 +660,19 @@ describe("Variables page", () => {
 			];
 
 			const onSortingChange = vi.fn();
-			const queryClient = new QueryClient();
 			render(
-				<QueryClientProvider client={queryClient}>
-					<VariablesDataTable
-						variables={variables}
-						currentVariableCount={1}
-						pagination={{ pageIndex: 0, pageSize: 10 }}
-						onPaginationChange={vi.fn()}
-						columnFilters={[]}
-						onColumnFiltersChange={vi.fn()}
-						sorting="CREATED_DESC"
-						onSortingChange={onSortingChange}
-						onVariableEdit={vi.fn()}
-					/>
-				</QueryClientProvider>,
+				<VariablesDataTable
+					variables={variables}
+					currentVariableCount={1}
+					pagination={{ pageIndex: 0, pageSize: 10 }}
+					onPaginationChange={vi.fn()}
+					columnFilters={[]}
+					onColumnFiltersChange={vi.fn()}
+					sorting="CREATED_DESC"
+					onSortingChange={onSortingChange}
+					onVariableEdit={vi.fn()}
+				/>,
+				{ wrapper: createWrapper() },
 			);
 
 			const select = screen.getByRole("combobox", {
@@ -724,21 +702,19 @@ describe("Variables page", () => {
 				},
 			];
 			const onPaginationChange = vi.fn();
-			const queryClient = new QueryClient();
 			render(
-				<QueryClientProvider client={queryClient}>
-					<VariablesDataTable
-						variables={variables}
-						currentVariableCount={1}
-						pagination={{ pageIndex: 0, pageSize: 10 }}
-						onPaginationChange={onPaginationChange}
-						columnFilters={[]}
-						onColumnFiltersChange={vi.fn()}
-						sorting="CREATED_DESC"
-						onSortingChange={vi.fn()}
-						onVariableEdit={vi.fn()}
-					/>
-				</QueryClientProvider>,
+				<VariablesDataTable
+					variables={variables}
+					currentVariableCount={1}
+					pagination={{ pageIndex: 0, pageSize: 10 }}
+					onPaginationChange={onPaginationChange}
+					columnFilters={[]}
+					onColumnFiltersChange={vi.fn()}
+					sorting="CREATED_DESC"
+					onSortingChange={vi.fn()}
+					onVariableEdit={vi.fn()}
+				/>,
+				{ wrapper: createWrapper() },
 			);
 
 			const select = screen.getByRole("combobox", {