Fix: i18n not properly configured in vitest

src/Modal.test.tsx

@@ -46,7 +46,7 @@ test("the modal can be closed by clicking the close button", async () => {
   }
   const user = userEvent.setup();
   const { queryByRole, getByRole } = render(<ModalFn />);
-  await user.click(getByRole("button", { name: "action.close" }));
+  await user.click(getByRole("button", { name: "Close" }));
   expect(queryByRole("dialog")).toBeNull();
 });
 

src/__snapshots__/QrCode.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`QrCode > renders 1`] = `
   class="qrCode bar"
 >
   <img
-    alt="qr_code"
+    alt="QR Code"
     src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAAAklEQVR4AewaftIAAALBSURBVO3BQW7kQAwEwSxC//9yro88NSBI4/UQjIg/WGMUa5RijVKsUYo1SrFGKdYoxRqlWKMUa5RijVKsUYo1SrFGKdYoxRrl4qEk/CaVkyR0Kl0STlS6JPwmlSeKNUqxRinWKBcvU3lTEk6S8ITKHSpvSsKbijVKsUYp1igXH5aEO1Q+SaVLQqdyRxLuUPmkYo1SrFGKNcrFl1PpknCShE5lkmKNUqxRijXKxZdLQqdyotIloVP5ZsUapVijFGuUiw9T+UuS8CaVv6RYoxRrlGKNcvGyJPwlSehUuiTckYS/rFijFGuUYo0Sf/DFkvAmlW9WrFGKNUqxRrl4KAknKl0SOpWTJJyodEk4UbkjCXeodEk4UXlTsUYp1ijFGuXiIZUuCXck4USlS0KXhE7lk1TelIRO5YlijVKsUYo1ysXLVLok3KHSJaFT6ZLQJaFTOUnCicodSehUTpLwpmKNUqxRijXKxUNJ6FSeSEKn0iXhROUkCZ3Kb0pCp/KmYo1SrFGKNcrFh6mcJKFT6ZJwotIloVPpVLokdCpdEjqVLgmdyh1J6FSeKNYoxRqlWKPEH3yxJHQqJ0noVO5IwolKl4ROpUtCp/JEsUYp1ijFGuXioST8JpU7ktCpnCShUzlROVHpktCpvKlYoxRrlGKNcvEylTcl4USlS8JJEt6UhBOVTqVLQqfyRLFGKdYoxRrl4sOScIfKEyonSehUTpJwh0qXhN9UrFGKNUqxRrn4ckn4JJU7kvA/FWuUYo1SrFEuvpxKl4QTlS4JncodSehU7kjCm4o1SrFGKdYoFx+m8klJOFE5UemScKJyRxI6lU7lTcUapVijFGuUi5cl4X9SOUnCicoTSThJQqfypmKNUqxRijVK/MEao1ijFGuUYo1SrFGKNUqxRinWKMUapVijFGuUYo1SrFGKNUqxRinWKP8AKoQP/lIBoMIAAAAASUVORK5CYII="
   />
 </div>

src/button/ReactionToggleButton.test.tsx

@@ -47,7 +47,7 @@ test("Can open menu", async () => {
   const { getByLabelText, container } = render(
     <TestComponent vm={vm} rtcSession={rtcSession} />,
   );
-  await user.click(getByLabelText("common.reactions"));
+  await user.click(getByLabelText("Reactions"));
   expect(container).toMatchSnapshot();
 });
 
@@ -58,8 +58,8 @@ test("Can raise hand", async () => {
   const { getByLabelText, container } = render(
     <TestComponent vm={vm} rtcSession={rtcSession} />,
   );
-  await user.click(getByLabelText("common.reactions"));
-  await user.click(getByLabelText("action.raise_hand"));
+  await user.click(getByLabelText("Reactions"));
+  await user.click(getByLabelText("Raise hand"));
   expect(rtcSession.room.client.sendEvent).toHaveBeenCalledWith(
     rtcSession.room.roomId,
     "m.reaction",
@@ -92,8 +92,8 @@ test("Can lower hand", async () => {
   const { getByLabelText, container } = render(
     <TestComponent vm={vm} rtcSession={rtcSession} />,
   );
-  await user.click(getByLabelText("common.reactions"));
-  await user.click(getByLabelText("action.raise_hand"));
+  await user.click(getByLabelText("Reactions"));
+  await user.click(getByLabelText("Raise hand"));
   act(() => {
     handRaisedSubject$.next({
       [localIdent]: {
@@ -103,8 +103,8 @@ test("Can lower hand", async () => {
       },
     });
   });
-  await user.click(getByLabelText("common.reactions"));
-  await user.click(getByLabelText("action.lower_hand"));
+  await user.click(getByLabelText("Reactions"));
+  await user.click(getByLabelText("Lower hand"));
   expect(rtcSession.room.client.redactEvent).toHaveBeenCalledWith(
     rtcSession.room.roomId,
     reactionEventId,
@@ -122,7 +122,7 @@ test("Can react with emoji", async () => {
   const { getByLabelText, getByText } = render(
     <TestComponent vm={vm} rtcSession={rtcSession} />,
   );
-  await user.click(getByLabelText("common.reactions"));
+  await user.click(getByLabelText("Reactions"));
   await user.click(getByText("🐶"));
   expect(rtcSession.room.client.sendEvent).toHaveBeenCalledWith(
     rtcSession.room.roomId,
@@ -144,8 +144,8 @@ test("Can fully expand emoji picker", async () => {
   const { getByLabelText, container, getByText } = render(
     <TestComponent vm={vm} rtcSession={rtcSession} />,
   );
-  await user.click(getByLabelText("common.reactions"));
-  await user.click(getByLabelText("action.show_more"));
+  await user.click(getByLabelText("Reactions"));
+  await user.click(getByLabelText("Show more"));
   expect(container).toMatchSnapshot();
   await user.click(getByText("🦗"));
   expect(rtcSession.room.client.sendEvent).toHaveBeenCalledWith(
@@ -168,8 +168,8 @@ test("Can close reaction dialog", async () => {
   const { getByLabelText, container } = render(
     <TestComponent vm={vm} rtcSession={rtcSession} />,
   );
-  await user.click(getByLabelText("common.reactions"));
-  await user.click(getByLabelText("action.show_more"));
-  await user.click(getByLabelText("action.show_less"));
+  await user.click(getByLabelText("Reactions"));
+  await user.click(getByLabelText("Show more"));
+  await user.click(getByLabelText("Show less"));
   expect(container).toMatchSnapshot();
 });

src/input/StarRating.test.tsx

@@ -20,10 +20,6 @@ test("StarRatingInput is accessible", async () => {
   );
   expect(await axe(container)).toHaveNoViolations();
   // Change the rating to 4 stars
-  await user.click(
-    (
-      await screen.findAllByRole("radio", { name: "star_rating_input_label" })
-    )[3],
-  );
+  await user.click(await screen.findByLabelText("4 stars"));
   expect(onChange).toBeCalledWith(4);
 });

src/livekit/useECConnectionState.test.tsx

@@ -67,6 +67,6 @@ test.each<[string, ConnectionError]>([
       </MemoryRouter>,
     );
     await user.click(screen.getByRole("button", { name: "Connect" }));
-    screen.getByText("error.insufficient_capacity");
+    screen.getByText("Insufficient capacity");
   },
 );

src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`RaisedHandIndicator > renders a smaller indicator when miniature is spe
     class="reaction"
   >
     <span
-      aria-label="common.reaction"
+      aria-label="Reaction"
       role="img"
     >
       ✋
@@ -28,7 +28,7 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised
     class="reaction reactionLarge"
   >
     <span
-      aria-label="common.reaction"
+      aria-label="Reaction"
       role="img"
     >
       ✋
@@ -48,7 +48,7 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised
     class="reaction reactionLarge"
   >
     <span
-      aria-label="common.reaction"
+      aria-label="Reaction"
       role="img"
     >
       ✋

src/room/GroupCallView.test.tsx

@@ -199,7 +199,7 @@ test("GroupCallView leaves the session when an error occurs", async () => {
   const user = userEvent.setup();
   const { rtcSession } = createGroupCallView(null);
   await user.click(screen.getByRole("button", { name: "Panic!" }));
-  screen.getByText("error.generic");
+  screen.getByText("Something went wrong");
   expect(leaveRTCSession).toHaveBeenCalledWith(
     rtcSession,
     "error",

src/room/InviteModal.test.tsx

@@ -30,6 +30,6 @@ test("InviteModal is accessible", async () => {
   );
 
   expect(await axe(container)).toHaveNoViolations();
-  await user.click(screen.getByRole("button", { name: "action.copy_link" }));
+  await user.click(screen.getByRole("button", { name: "Copy link" }));
   expect(onDismiss).toBeCalled();
 });

src/room/VideoPreview.test.tsx

@@ -66,8 +66,6 @@ describe("VideoPreview", () => {
         children={<></>}
       />,
     );
-    expect(queryByRole("status")).toHaveTextContent(
-      "video_tile.camera_starting",
-    );
+    expect(queryByRole("status")).toHaveTextContent("Video loading...");
   });
 });

src/tile/MediaView.test.tsx

@@ -70,16 +70,14 @@ describe("MediaView", () => {
         <MediaView {...baseProps} video={undefined} localParticipant={true} />,
       );
       expect(screen.getByRole("img", { name: "some name" })).toBeVisible();
-      expect(screen.queryAllByText("video_tile.waiting_for_media").length).toBe(
-        0,
-      );
+      expect(screen.queryAllByText("Waiting for media...").length).toBe(0);
     });
     it("shows avatar and label for remote user", () => {
       render(
         <MediaView {...baseProps} video={undefined} localParticipant={false} />,
       );
       expect(screen.getByRole("img", { name: "some name" })).toBeVisible();
-      expect(screen.getByText("video_tile.waiting_for_media")).toBeVisible();
+      expect(screen.getByText("Waiting for media...")).toBeVisible();
     });
   });
 
@@ -98,9 +96,7 @@ describe("MediaView", () => {
         </TooltipProvider>,
       );
       expect(await axe(container)).toHaveNoViolations();
-      expect(
-        screen.getByRole("img", { name: "common.unencrypted" }),
-      ).toBeTruthy();
+      expect(screen.getByRole("img", { name: "Not encrypted" })).toBeTruthy();
     });
 
     test("is not shown", () => {
@@ -110,7 +106,7 @@ describe("MediaView", () => {
         </TooltipProvider>,
       );
       expect(
-        screen.queryAllByRole("img", { name: "common.unencrypted" }).length,
+        screen.queryAllByRole("img", { name: "Not encrypted" }).length,
       ).toBe(0);
     });
   });

src/tile/SpotlightTile.test.tsx

@@ -64,14 +64,12 @@ test("SpotlightTile is accessible", async () => {
           // Bob should be out of the spotlight, and therefore invisible
           expect(isInaccessible(screen.getByText("Bob"))).toBe(true);
           // Now navigate to Bob
-          await user.click(screen.getByRole("button", { name: "common.next" }));
+          await user.click(screen.getByRole("button", { name: "Next" }));
           screen.getByText("Bob");
           expect(screen.getByRole("img")).not.toBe(aliceAvatar);
           expect(isInaccessible(screen.getByText("Alice"))).toBe(true);
           // Can toggle whether the tile is expanded
-          await user.click(
-            screen.getByRole("button", { name: "video_tile.expand" }),
-          );
+          await user.click(screen.getByRole("button", { name: "Expand" }));
           expect(toggleExpanded).toHaveBeenCalled();
         },
       );

src/vitest.setup.ts

@@ -30,7 +30,7 @@ i18n
     // We embed the translations, so that it never needs to fetch
     resources: {
       en: {
-        app: EN,
+        translation: EN,
       },
     },
     interpolation: {