From 51c8b929b38004a1f56796a6effa8aaa97d42323 Mon Sep 17 00:00:00 2001
From: Marc Cataford <mcat@riseup.net>
Date: Mon, 19 Feb 2024 12:42:40 -0500
Subject: [PATCH] refactor: extract reusable test+render utils

---
 README.md                             |  8 ++++++++
 src/components/NavigationBar.test.tsx | 21 +++------------------
 src/testHelpers/components.tsx        | 12 ++++++++++++
 src/testHelpers/renderUtils.tsx       | 16 ++++++++++++++++
 testSetup.tsx                         | 14 ++++++++++++++
 5 files changed, 53 insertions(+), 18 deletions(-)
 create mode 100644 src/testHelpers/components.tsx
 create mode 100644 src/testHelpers/renderUtils.tsx
 create mode 100644 testSetup.tsx

diff --git a/README.md b/README.md
index 3c26016..da55a01 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,14 @@ two](https://github.com/mcataford/rss-reader/discussions/10) if you do. :tada:
 Once set up, `yarn start` will run the application locally (including a local instance of the Netlify function that
 handles CORS proxying).
 
+### Testing
+
+Frontend component tests are written using [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).
+
+Rendering components should be done via the `testHelpers/renderUtils` exports, which provides a `renderComponent` helper
+that wraps the component in all the contexts provided to the application. This also sets up
+`@testing-library/user-events`.
+
 ## Contributing
 
 The project welcomes contributions as long as they fit within the general roadmap, which is still TBD. Any contribution
diff --git a/src/components/NavigationBar.test.tsx b/src/components/NavigationBar.test.tsx
index eac5b57..33f466c 100644
--- a/src/components/NavigationBar.test.tsx
+++ b/src/components/NavigationBar.test.tsx
@@ -1,28 +1,13 @@
 import { describe, it, expect, vi, afterEach } from "vitest";
-import { screen, render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { screen } from "@testing-library/react";
 
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { NavigationProvider } from "@/hooks/useNavigation";
+import { renderComponent as renderComponentInner } from "@/testHelpers/renderUtils";
 import * as NavigationHook from "@/hooks/useNavigation";
 
 import NavigationBar from "./NavigationBar";
 
-function Wrappers({ children }) {
-	return (
-		<NavigationProvider>
-			<QueryClientProvider client={new QueryClient()}>
-				{children}
-			</QueryClientProvider>
-		</NavigationProvider>
-	);
-}
-
 function renderComponent() {
-	return {
-		...render(<NavigationBar />, { wrapper: Wrappers }),
-		user: userEvent.setup(),
-	};
+	return renderComponentInner(NavigationBar);
 }
 
 describe("NavigationBar", () => {
diff --git a/src/testHelpers/components.tsx b/src/testHelpers/components.tsx
new file mode 100644
index 0000000..4f045f3
--- /dev/null
+++ b/src/testHelpers/components.tsx
@@ -0,0 +1,12 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { NavigationProvider } from "@/hooks/useNavigation";
+
+export function TestComponentWrapper({ children }) {
+	return (
+		<NavigationProvider>
+			<QueryClientProvider client={new QueryClient()}>
+				{children}
+			</QueryClientProvider>
+		</NavigationProvider>
+	);
+}
diff --git a/src/testHelpers/renderUtils.tsx b/src/testHelpers/renderUtils.tsx
new file mode 100644
index 0000000..5e3a62e
--- /dev/null
+++ b/src/testHelpers/renderUtils.tsx
@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { TestComponentWrapper } from "./components";
+
+export function renderComponent<ComponentProps>(
+	Component,
+	props?: ComponentProps,
+) {
+	return {
+		...render(<Component {...(props ?? {})} />, {
+			wrapper: TestComponentWrapper,
+		}),
+		user: userEvent.setup(),
+	};
+}
diff --git a/testSetup.tsx b/testSetup.tsx
new file mode 100644
index 0000000..49afee5
--- /dev/null
+++ b/testSetup.tsx
@@ -0,0 +1,14 @@
+import userEvent from "@testing-library/user-event";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { NavigationProvider } from "@/hooks/useNavigation";
+
+export function TestComponentWrappers({ children }) {
+	return (
+		<NavigationProvider>
+			<QueryClientProvider client={new QueryClient()}>
+				{children}
+			</QueryClientProvider>
+		</NavigationProvider>
+	);
+}