Adjust testing with localization

tests/components/AskOrganizer.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { renderWithProviders as render, screen } from "../utils/test-utils";
 import { describe, it, expect } from "vitest";
 import AskOrganizer from "../../app/components/AskOrganizer";
 import {

tests/components/FeatureGrid.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { renderWithProviders as render, screen } from "../utils/test-utils";
 import { describe, it, expect } from "vitest";
 import FeatureGrid from "../../app/components/FeatureGrid";
 import {

tests/components/Footer.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { renderWithProviders as render, screen } from "../utils/test-utils";
 import { describe, it, expect } from "vitest";
 import Footer from "../../app/components/Footer";
 import {

tests/components/HeroBanner.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { renderWithProviders as render, screen } from "../utils/test-utils";
 import { describe, it, expect } from "vitest";
 import HeroBanner from "../../app/components/HeroBanner";
 import {

tests/pages/home.test.jsx

@@ -1,5 +1,9 @@
 import { describe, test, expect } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import {
+  renderWithProviders as render,
+  screen,
+  waitFor,
+} from "../utils/test-utils";
 import Page from "../../app/page";
 
 describe("Page", () => {

tests/pages/page-flow.test.jsx

@@ -1,4 +1,9 @@
-import { render, screen, cleanup, waitFor } from "@testing-library/react";
+import {
+  renderWithProviders as render,
+  screen,
+  cleanup,
+  waitFor,
+} from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { vi, describe, test, expect, afterEach } from "vitest";
 import React from "react";

tests/pages/user-journey.test.jsx

@@ -1,4 +1,9 @@
-import { render, screen, cleanup, waitFor } from "@testing-library/react";
+import {
+  renderWithProviders as render,
+  screen,
+  cleanup,
+  waitFor,
+} from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { vi, describe, test, expect, afterEach } from "vitest";
 import React from "react";

tests/unit/NumberedCards.test.jsx

@@ -1,4 +1,8 @@
-import { render, screen, cleanup } from "@testing-library/react";
+import {
+  renderWithProviders as render,
+  screen,
+  cleanup,
+} from "../utils/test-utils";
 import { describe, test, expect, afterEach } from "vitest";
 import NumberedCards from "../../app/components/NumberedCards";
 

tests/unit/QuoteBlock.test.jsx

@@ -1,4 +1,8 @@
-import { render, screen, cleanup } from "@testing-library/react";
+import {
+  renderWithProviders as render,
+  screen,
+  cleanup,
+} from "../utils/test-utils";
 import { vi, describe, test, expect, afterEach } from "vitest";
 import QuoteBlock from "../../app/components/QuoteBlock";
 

tests/unit/RuleCard.test.jsx

@@ -1,4 +1,8 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import {
+  renderWithProviders as render,
+  screen,
+  fireEvent,
+} from "../utils/test-utils";
 import { describe, it, expect, vi } from "vitest";
 import RuleCard from "../../app/components/RuleCard";
 

tests/unit/RuleStack.test.jsx

@@ -1,4 +1,8 @@
-import { render, screen, cleanup } from "@testing-library/react";
+import {
+  renderWithProviders as render,
+  screen,
+  cleanup,
+} from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { vi, describe, test, expect, afterEach } from "vitest";
 import { logger } from "../../lib/logger";

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";