Unit testing setup for react-router (#15)

Unit testing setup for react-router

Author: AlemTuzlak

app/localization/resource.ts

@@ -3,12 +3,14 @@ import english from "../../resources/locales/en/common.json"
 
 const languages = ["en", "bs"] as const
 export const supportedLanguages = [...languages]
-type Language = (typeof languages)[number]
+export type Language = (typeof languages)[number]
 
 type Resource = {
 	common: typeof english
 }
 
+export type Namespace = keyof Resource
+
 export const resources: Record<Language, Resource> = {
 	en: {
 		common: english,

app/routes.ts

@@ -1,3 +1,5 @@
 import { flatRoutes } from "@react-router/fs-routes"
 
-export default flatRoutes()
+export default flatRoutes({
+	ignoredRouteFiles: ["**/*.test.{ts,tsx}"],
+})

app/routes/_index.test.tsx

@@ -0,0 +1,45 @@
+import * as Module from "./_index"
+
+describe("Home route", () => {
+	it("should render the home page text properly in english", async ({
+		renderStub,
+		/** debug */
+	}) => {
+		const { container } = await renderStub({
+			entries: [
+				{
+					id: "home",
+					path: "/",
+					Component: Module.default,
+				},
+			],
+		})
+		// debug()
+		expect(
+			container.queryByText("React Router is awesome!", {
+				exact: false,
+			})
+		).not.toBeNull()
+	})
+
+	it("should render the home page text properly in bosnian", async ({ renderStub }) => {
+		const { container } = await renderStub({
+			entries: [
+				{
+					id: "home",
+					path: "/",
+					Component: Module.default,
+				},
+			],
+			i18n: {
+				lng: "bs",
+			},
+		})
+
+		expect(
+			container.queryByText("React Router je zakon!", {
+				exact: false,
+			})
+		).not.toBeNull()
+	})
+})

package.json

@@ -17,6 +17,8 @@
 		"test": "vitest run",
 		"test:ui": "vitest --ui --api 9527",
 		"test:cov": "vitest run --coverage",
+		"test:debug": "jest-preview",
+		"test:live": "npm-run-all -p test:ui test:debug",
 		"typecheck": "tsc",
 		"validate": "pnpm run check && pnpm run typecheck && pnpm run test && pnpm run check:unused",
 		"check": "biome check .",
@@ -51,6 +53,7 @@
 		"@dotenvx/dotenvx": "1.24.5",
 		"@react-router/dev": "7.0.1",
 		"@react-router/fs-routes": "7.0.1",
+		"@testing-library/react": "16.0.1",
 		"@types/node": "22.9.1",
 		"@types/prompt": "1.1.9",
 		"@types/react": "18.3.12",
@@ -60,11 +63,13 @@
 		"autoprefixer": "10.4.20",
 		"chalk": "5.3.0",
 		"happy-dom": "15.11.6",
+		"jest-preview": "0.3.1",
 		"knip": "5.37.2",
 		"lefthook": "1.8.4",
+		"npm-run-all": "4.1.5",
 		"postcss": "8.4.49",
 		"prompt": "1.3.0",
-		"react-router-devtools": "1.0.3",
+		"react-router-devtools": "1.0.5",
 		"tailwindcss": "3.4.15",
 		"tsx": "4.19.2",
 		"typescript": "5.6.3",