fix: added support for i18n in testing. Fixed broken tests

src/components/PageComponents/Connect/HTTP.tsx

@@ -81,12 +81,12 @@ export const HTTP = (
         disabled={connectionInProgress}
       >
         <div>
-          <Label>{t("httpConnection.ipAddressLabel")}</Label>
+          <Label>{t("httpConnection_ipAddressLabel")}</Label>
           <Input
             prefix={tlsValue
-              ? `${t("httpConnection.https")}://`
+              ? `${t("httpConnection_https")}://`
-              : `${t("httpConnection.http")}://`}
+              : `${t("httpConnection_http")}://`}
-            placeholder={t("httpConnection.field_ipAddress_placeholder")}
+            placeholder={t("httpConnection_field_ipAddress_placeholder")}
             className="text-slate-900 dark:text-slate-100"
             {...register("ip")}
           />
@@ -98,7 +98,7 @@ export const HTTP = (
             checked={isURLHTTPS || tlsValue}
             {...register("tls")}
           />
-          <Label>{t("httpConnection.label_useHttps")}</Label>
+          <Label>{t("httpConnection_label_useHttps")}</Label>
         </div>
 
         {connectionError && (
@@ -110,38 +110,38 @@ export const HTTP = (
               />
               <div>
                 <p className="text-sm font-medium text-amber-800 dark:text-amber-800">
-                  {t("httpConnection.connectionFailedAlert.title")}
+                  {t("httpConnection_connectionFailedAlert.title")}
                 </p>
                 <p className="text-xs mt-1 text-amber-700 dark:text-amber-700">
-                  {t("httpConnection.connectionFailedAlert.descriptionPrefix")}
+                  {t("httpConnection_connectionFailedAlert.descriptionPrefix")}
                   {connectionError.secure &&
-                    t("httpConnection.connectionFailedAlert.httpsHint")}
+                    t("httpConnection_connectionFailedAlert.httpsHint")}
-                  {t("httpConnection.connectionFailedAlert.openLinkPrefix")}
+                  {t("httpConnection_connectionFailedAlert.openLinkPrefix")}
                   <Link
                     href={`${
                       connectionError.secure
-                        ? t("httpConnection.https")
+                        ? t("httpConnection_https")
-                        : t("httpConnection.http")
+                        : t("httpConnection_http")
                     }://${connectionError.host}`}
                     className="underline font-medium text-amber-800 dark:text-amber-800"
                   >
                     {`${
                       connectionError.secure
-                        ? t("httpConnection.https")
+                        ? t("httpConnection_https")
-                        : t("httpConnection.http")
+                        : t("httpConnection_http")
                     }://${connectionError.host}`}
                   </Link>{" "}
-                  {t("httpConnection.connectionFailedAlert.openLinkSuffix")}
+                  {t("httpConnection_connectionFailedAlert.openLinkSuffix")}
                   {connectionError.secure
                     ? t(
-                      "httpConnection.connectionFailedAlert.acceptTlsWarningSuffix",
+                      "httpConnection_connectionFailedAlert.acceptTlsWarningSuffix",
                     )
                     : ""}.{" "}
                   <Link
                     href="https://meshtastic.org/docs/software/web-client/#http"
                     className="underline font-medium text-amber-800 dark:text-amber-800"
                   >
-                    {t("httpConnection.connectionFailedAlert.learnMoreLink")}
+                    {t("httpConnection_connectionFailedAlert.learnMoreLink")}
                   </Link>
                 </p>
               </div>
@@ -155,8 +155,8 @@ export const HTTP = (
       >
         <span>
           {connectionInProgress
-            ? t("httpConnection.button_connecting")
+            ? t("httpConnection_button_connecting")
-            : t("httpConnection.button_connect")}
+            : t("httpConnection_button_connect")}
         </span>
       </Button>
     </form>

src/components/PageComponents/Map/NodeDetail.tsx

@@ -218,7 +218,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
           <div>{t("node_detail_snr_label")}</div>
           <Mono className="flex items-center text-xs text-gray-500">
             {node.snr}
-            {t("common.dbUnit")}
+            {t("common_unit_dbm")}
             <Dot />
             {Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%
             <Dot />

src/components/PageComponents/Messages/TraceRoute.test.tsx

@@ -48,9 +48,9 @@ describe("TraceRoute", () => {
     expect(screen.getByText("Node B")).toBeInTheDocument();
 
     expect(screen.getAllByText(/↓/)).toHaveLength(3);
-    expect(screen.getByText("↓ 10dB")).toBeInTheDocument();
+    expect(screen.getByText("↓ 10dBm")).toBeInTheDocument();
-    expect(screen.getByText("↓ 20dB")).toBeInTheDocument();
+    expect(screen.getByText("↓ 20dBm")).toBeInTheDocument();
-    expect(screen.getByText("↓ 30dB")).toBeInTheDocument();
+    expect(screen.getByText("↓ 30dBm")).toBeInTheDocument();
   });
 
   it("renders the route back when provided", () => {
@@ -74,11 +74,11 @@ describe("TraceRoute", () => {
     expect(screen.getByText("Node C")).toBeInTheDocument();
     expect(screen.getByText("Node A")).toBeInTheDocument();
 
-    expect(screen.getByText("↓ 35dB")).toBeInTheDocument();
+    expect(screen.getByText("↓ 35dBm")).toBeInTheDocument();
-    expect(screen.getByText("↓ 45dB")).toBeInTheDocument();
+    expect(screen.getByText("↓ 45dBm")).toBeInTheDocument();
 
-    expect(screen.getByText("↓ 15dB")).toBeInTheDocument();
+    expect(screen.getByText("↓ 15dBm")).toBeInTheDocument();
-    expect(screen.getByText("↓ 25dB")).toBeInTheDocument();
+    expect(screen.getByText("↓ 25dBm")).toBeInTheDocument();
   });
 
   it("renders '??' for missing SNR values", () => {
@@ -91,7 +91,7 @@ describe("TraceRoute", () => {
     );
 
     expect(screen.getByText("Node A")).toBeInTheDocument();
-    expect(screen.getAllByText("↓ ??dB")).toHaveLength(2);
+    expect(screen.getAllByText("↓ ??dBm")).toHaveLength(2);
   });
 
   it("renders hop hex if node is not found", () => {
@@ -105,7 +105,7 @@ describe("TraceRoute", () => {
     );
 
     expect(screen.getByText(/^!63$/)).toBeInTheDocument();
-    expect(screen.getByText("↓ 5dB")).toBeInTheDocument();
+    expect(screen.getByText("↓ 5dBm")).toBeInTheDocument();
-    expect(screen.getByText("↓ 15dB")).toBeInTheDocument();
+    expect(screen.getByText("↓ 15dBm")).toBeInTheDocument();
   });
 });

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -35,7 +35,7 @@ const RoutePath = (
       <p>{startNode?.user?.longName}</p>
       <p>
         ↓ {snr?.[0] ?? t("traceRoute_snrUnknown")}
-        {t("common.dbUnit")}
+        {t("common_unit_dbm")}
       </p>
       {path.map((hop, i) => (
         <span key={getNode(hop)?.num ?? hop}>
@@ -45,7 +45,7 @@ const RoutePath = (
           </p>
           <p>
             ↓ {snr?.[i + 1] ?? t("traceRoute_snrUnknown")}
-            {t("common.dbUnit")}
+            {t("common_unit_dbm")}
           </p>
         </span>
       ))}

src/tests/setupTests.ts

@@ -3,6 +3,9 @@ import { cleanup } from "@testing-library/react";
 import { enableMapSet } from "immer";
 import "@testing-library/jest-dom";
 import "@testing-library/user-event";
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import enTranslations from "@app/i18n/locales/en.json";
 
 enableMapSet();
 
@@ -14,12 +17,31 @@ vi.mock("idb-keyval", () => ({
   keys: vi.fn(() => Promise.resolve([])),
   createStore: vi.fn(() => ({})),
 }));
+
 globalThis.ResizeObserver = class {
   observe() {}
   unobserve() {}
   disconnect() {}
 };
 
+i18n
+  .use(initReactI18next)
+  .init({
+    lng: "en",
+    fallbackLng: "en",
+    debug: false,
+    resources: {
+      en: {
+        translation: enTranslations,
+      },
+    },
+    interpolation: {
+      escapeValue: false,
+    },
+    defaultNS: "translation",
+    initImmediate: true,
+  });
+
 afterEach(() => {
   cleanup();
 });

vitest.config.ts

@@ -1,6 +1,6 @@
 import path from "node:path";
-import react from '@vitejs/plugin-react';
+import react from "@vitejs/plugin-react";
-import { defineConfig } from 'vitest/config'
+import { defineConfig } from "vitest/config";
 
 import { enableMapSet } from "immer";
 enableMapSet();
@@ -10,21 +10,21 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@app': path.resolve(process.cwd(), './src'),
+      "@app": path.resolve(process.cwd(), "./src"),
-      '@core': path.resolve(process.cwd(), './src/core'),
+      "@core": path.resolve(process.cwd(), "./src/core"),
-      '@pages': path.resolve(process.cwd(), './src/pages'),
+      "@pages": path.resolve(process.cwd(), "./src/pages"),
-      '@components': path.resolve(process.cwd(), './src/components'),
+      "@components": path.resolve(process.cwd(), "./src/components"),
-      '@layouts': path.resolve(process.cwd(), './src/layouts'),
+      "@layouts": path.resolve(process.cwd(), "./src/layouts"),
     },
   },
   test: {
-    environment: 'happy-dom',
+    environment: "happy-dom",
     globals: true,
     mockReset: true,
     clearMocks: true,
     restoreMocks: true,
-    root: path.resolve(process.cwd(), './src'),
+    root: path.resolve(process.cwd(), "./src"),
-    include: ['**/*.{test,spec}.{ts,tsx}'],
+    include: ["**/*.{test,spec}.{ts,tsx}"],
     setupFiles: ["./src/tests/setupTests.ts"],
   },
-})
+});