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 }) => (
- {children}
- );
- 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 }) => (
- {children}
- );
- 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 }) => (
- {children}
- );
- 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..f02d10f4895a
--- /dev/null
+++ b/ui-v2/tests/utils/index.ts
@@ -0,0 +1,22 @@
+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'
+import { createElement } from "react";
+ *
+ * ```tsx
+ * const result = render(, {
+ * 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..123e48f0688e 100644
--- a/ui-v2/tests/variables/variables.test.tsx
+++ b/ui-v2/tests/variables/variables.test.tsx
@@ -12,7 +12,7 @@ import {
screen,
} from "@testing-library/react";
import userEvent from "@testing-library/user-event";
-import { server } from "@tests/mocks";
+import { server } from "@tests/utils";
import { http, HttpResponse } from "msw";
import {
afterEach,