Adjust testing with localization

tests/utils/componentTestSuite.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
+import { renderWithProviders as render } from "./test-utils";
 
 type TestCases = {
   renders?: boolean;

tests/utils/test-utils.tsx

@@ -0,0 +1,23 @@
+import React, { type ReactElement } from "react";
+import { render, type RenderOptions } from "@testing-library/react";
+import { MessagesProvider } from "../../app/contexts/MessagesContext";
+import messages from "../../messages/en/index";
+
+/**
+ * Custom render function that wraps components with MessagesProvider
+ * Use this instead of the default render from @testing-library/react
+ * for components that use useTranslation hook
+ */
+export function renderWithProviders(
+  ui: ReactElement,
+  options?: Omit<RenderOptions, "wrapper">,
+) {
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return <MessagesProvider messages={messages}>{children}</MessagesProvider>;
+  }
+
+  return render(ui, { wrapper: Wrapper, ...options });
+}
+
+// Re-export everything from @testing-library/react for convenience
+export * from "@testing-library/react";