Move unknown body to shared components (#33406)

* Move unknown body to shared components

* added story snapshots

apps/web/test/unit-tests/components/views/messages/MessageEvent-test.tsx

@@ -19,11 +19,6 @@ import MessageEvent from "../../../../../src/components/views/messages/MessageEv
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 
-jest.mock("../../../../../src/components/views/messages/UnknownBody", () => ({
-    __esModule: true,
-    default: () => <div data-testid="unknown-body" />,
-}));
-
 jest.mock("../../../../../src/components/views/messages/MImageBody", () => ({
     __esModule: true,
     default: () => <div data-testid="image-body" />,
@@ -118,6 +113,25 @@ describe("MessageEvent", () => {
         expect(result.queryByTestId("textual-body")).toBeNull();
     });
 
+    it("renders the shared unknown body for unsupported message types", () => {
+        event = mkEvent({
+            event: true,
+            type: EventType.RoomMessage,
+            user: "@alice:example.com",
+            room: room.roomId,
+            content: {
+                msgtype: "org.example.unsupported",
+                body: "Unsupported message body",
+            },
+        });
+
+        const result = renderMessageEvent();
+
+        expect(result.getByText("Unsupported message body")).toBeInTheDocument();
+        expect(result.container.querySelector(".mx_UnknownBody")).not.toBeNull();
+        expect(result.queryByTestId("textual-body")).toBeNull();
+    });
+
     describe("when an image with a caption is sent", () => {
         let result: RenderResult;