refactor: extract reusable test+render utils

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

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 { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
 
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderComponent as renderComponentInner } from "@/testHelpers/renderUtils";
-import { NavigationProvider } from "@/hooks/useNavigation";
 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 {
+	return renderComponentInner(NavigationBar);
-		...render(<NavigationBar />, { wrapper: Wrappers }),
-		user: userEvent.setup(),
-	};
 }
 
 describe("NavigationBar", () => {

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>
+	);
+}

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(),
+	};
+}

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>
+	);
+}