diff --git a/apps/web/test/viewmodels/message-body/UrlPreviewViewModel-test.ts b/apps/web/test/viewmodels/message-body/UrlPreviewViewModel-test.ts
index be81ef5442..7b86057df2 100644
--- a/apps/web/test/viewmodels/message-body/UrlPreviewViewModel-test.ts
+++ b/apps/web/test/viewmodels/message-body/UrlPreviewViewModel-test.ts
@@ -50,13 +50,7 @@ function getViewModel({ mediaVisible, visible } = { mediaVisible: true, visible:
 
 describe("UrlPreviewViewModel", () => {
     it("should return no previews by default", () => {
-        expect(getViewModel().vm.getSnapshot()).toEqual({
-            compactLayout: false,
-            overPreviewLimit: false,
-            previews: [],
-            previewsLimited: true,
-            totalPreviewCount: 0,
-        });
+        expect(getViewModel().vm.getSnapshot()).toMatchSnapshot();
     });
     it("should preview a single valid URL", async () => {
         const { vm, client } = getViewModel();
@@ -64,22 +58,7 @@ describe("UrlPreviewViewModel", () => {
         const msg = document.createElement("div");
         msg.innerHTML = '<a href="https://example.org">Test</a>';
         await vm.updateEventElement(msg);
-        expect(vm.getSnapshot()).toEqual({
-            previews: [
-                {
-                    link: "https://example.org",
-                    title: "This is an example!",
-                    siteName: "Example.org",
-                    showTooltipOnLink: undefined,
-                    description: "This is a description",
-                    image: undefined,
-                },
-            ],
-            compactLayout: false,
-            overPreviewLimit: false,
-            previewsLimited: true,
-            totalPreviewCount: 1,
-        });
+        expect(vm.getSnapshot()).toMatchSnapshot();
     });
     it("should preview nested URLs but ignore some element types", async () => {
         const { vm, client } = getViewModel();
@@ -119,13 +98,7 @@ describe("UrlPreviewViewModel", () => {
         const msg = document.createElement("div");
         msg.innerHTML = '<a href="https://example.org">Test</a>';
         await vm.updateEventElement(msg);
-        expect(vm.getSnapshot()).toEqual({
-            previews: [],
-            compactLayout: false,
-            overPreviewLimit: false,
-            previewsLimited: true,
-            totalPreviewCount: 1,
-        });
+        expect(vm.getSnapshot()).toMatchSnapshot();
         expect(client.getUrlPreview).not.toHaveBeenCalled();
     });
     it("should preview a URL with media", async () => {
@@ -150,28 +123,7 @@ describe("UrlPreviewViewModel", () => {
         const msg = document.createElement("div");
         msg.innerHTML = '<a href="https://example.org">Test</a>';
         await vm.updateEventElement(msg);
-        expect(vm.getSnapshot()).toEqual({
-            previews: [
-                {
-                    link: "https://example.org",
-                    title: "This is an example!",
-                    siteName: undefined,
-                    showTooltipOnLink: undefined,
-                    description: undefined,
-                    image: {
-                        height: 100,
-                        width: 100,
-                        fileSize: 10000,
-                        imageThumb: "https://example.org/image/thumb",
-                        imageFull: "https://example.org/image/src",
-                    },
-                },
-            ],
-            compactLayout: false,
-            overPreviewLimit: false,
-            previewsLimited: true,
-            totalPreviewCount: 1,
-        });
+        expect(vm.getSnapshot()).toMatchSnapshot();
     });
     it("should ignore media when mediaVisible is false", async () => {
         const { vm, client } = getViewModel({ mediaVisible: false, visible: true });
@@ -187,22 +139,7 @@ describe("UrlPreviewViewModel", () => {
         const msg = document.createElement("div");
         msg.innerHTML = '<a href="https://example.org">Test</a>';
         await vm.updateEventElement(msg);
-        expect(vm.getSnapshot()).toEqual({
-            previews: [
-                {
-                    link: "https://example.org",
-                    title: "This is an example!",
-                    siteName: undefined,
-                    showTooltipOnLink: undefined,
-                    description: undefined,
-                    image: undefined,
-                },
-            ],
-            compactLayout: false,
-            overPreviewLimit: false,
-            previewsLimited: true,
-            totalPreviewCount: 1,
-        });
+        expect(vm.getSnapshot()).toMatchSnapshot();
         // eslint-disable-next-line no-restricted-properties
         expect(client.mxcUrlToHttp).not.toHaveBeenCalled();
     });
@@ -213,22 +150,7 @@ describe("UrlPreviewViewModel", () => {
         msg.innerHTML =
             '<a href="https://example.org">Test</a><a href="https://example.org">Test</a><a href="https://example.org">Test</a>';
         await vm.updateEventElement(msg);
-        expect(vm.getSnapshot()).toEqual({
-            previews: [
-                {
-                    link: "https://example.org",
-                    title: "This is an example!",
-                    siteName: "Example.org",
-                    showTooltipOnLink: undefined,
-                    description: "This is a description",
-                    image: undefined,
-                },
-            ],
-            compactLayout: false,
-            overPreviewLimit: false,
-            previewsLimited: true,
-            totalPreviewCount: 1,
-        });
+        expect(vm.getSnapshot()).toMatchSnapshot();
         expect(client.getUrlPreview).toHaveBeenCalledTimes(1);
     });
     it("should ignore failed previews", async () => {
@@ -237,13 +159,7 @@ describe("UrlPreviewViewModel", () => {
         const msg = document.createElement("div");
         msg.innerHTML = '<a href="https://example.org">Test</a>';
         await vm.updateEventElement(msg);
-        expect(vm.getSnapshot()).toEqual({
-            previews: [],
-            compactLayout: false,
-            overPreviewLimit: false,
-            previewsLimited: true,
-            totalPreviewCount: 1,
-        });
+        expect(vm.getSnapshot()).toMatchSnapshot();
     });
     it("should handle image clicks", async () => {
         const { vm, client, onImageClicked } = getViewModel();
@@ -278,31 +194,10 @@ describe("UrlPreviewViewModel", () => {
         msg.innerHTML = '<a href="https://example.org">Test</a>';
         await vm.updateEventElement(msg);
         await vm.onHideClick();
-        expect(vm.getSnapshot()).toEqual({
-            previews: [],
-            compactLayout: false,
-            overPreviewLimit: false,
-            previewsLimited: true,
-            totalPreviewCount: 1,
-        });
+        expect(vm.getSnapshot()).toMatchSnapshot();
 
         await vm.onShowClick();
-        expect(vm.getSnapshot()).toEqual({
-            previews: [
-                {
-                    link: "https://example.org",
-                    title: "This is an example!",
-                    siteName: "Example.org",
-                    showTooltipOnLink: undefined,
-                    description: "This is a description",
-                    image: undefined,
-                },
-            ],
-            compactLayout: false,
-            overPreviewLimit: false,
-            previewsLimited: true,
-            totalPreviewCount: 1,
-        });
+        expect(vm.getSnapshot()).toMatchSnapshot();
     });
 
     it.each([
@@ -326,42 +221,21 @@ describe("UrlPreviewViewModel", () => {
         "og:type": "document",
     };
 
-    it.each<[IPreviewUrlResponse, Omit<UrlPreviewViewSnapshotPreview, "link">]>([
-        [{ ...baseOg, "og:title": "Basic title" }, { title: "Basic title" }],
-        [
-            { ...baseOg, "og:site_name": "Site name", "og:title": "" },
-            { title: "Site name", siteName: undefined },
-        ],
-        [
-            { ...baseOg, "og:description": "A description", "og:title": "" },
-            { title: "A description", description: undefined },
-        ],
-        [
-            { ...baseOg, "og:title": "Cool blog", "og:site_name": "Cool site" },
-            { title: "Cool blog", siteName: "Cool site" },
-        ],
-        [
-            {
-                ...baseOg,
-                "og:title": "Media test",
-                // API *may* return a string, so check we parse correctly.
-                "og:image:height": "500" as unknown as number,
-                "og:image:width": 500,
-                "matrix:image:size": 1024,
-                "og:image": IMAGE_MXC,
-            },
-            {
-                title: "Media test",
-                image: {
-                    imageThumb: "https://example.org/image/thumb",
-                    imageFull: "https://example.org/image/src",
-                    fileSize: 1024,
-                    width: 100,
-                    height: 100,
-                },
-            },
-        ],
-    ])("handles different kinds of opengraph responses %s", async (og, preview) => {
+    it.each<IPreviewUrlResponse>([
+        { ...baseOg, "og:title": "Basic title" },
+        { ...baseOg, "og:site_name": "Site name", "og:title": "" },
+        { ...baseOg, "og:description": "A description", "og:title": "" },
+        { ...baseOg, "og:title": "Cool blog", "og:site_name": "Cool site" },
+        {
+            ...baseOg,
+            "og:title": "Media test",
+            // API *may* return a string, so check we parse correctly.
+            "og:image:height": "500" as unknown as number,
+            "og:image:width": 500,
+            "matrix:image:size": 1024,
+            "og:image": IMAGE_MXC,
+        },
+    ])("handles different kinds of opengraph responses %s", async (og) => {
         const { vm, client } = getViewModel();
         // eslint-disable-next-line no-restricted-properties
         client.mxcUrlToHttp.mockImplementation((url, width) => {
@@ -375,6 +249,6 @@ describe("UrlPreviewViewModel", () => {
         const msg = document.createElement("div");
         msg.innerHTML = `<a href="https://example.org">test</a>`;
         await vm.updateEventElement(msg);
-        expect(vm.getSnapshot().previews[0]).toMatchObject(preview);
+        expect(vm.getSnapshot().previews[0]).toMatchSnapshot();
     });
 });
diff --git a/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewViewModel-test.ts.snap b/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewViewModel-test.ts.snap
new file mode 100644
index 0000000000..cfab7c0b4c
--- /dev/null
+++ b/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewViewModel-test.ts.snap
@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`UrlPreviewViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:description': 'A description',\\n  'og:title': ''\\n} 1`] = `
+{
+  "description": undefined,
+  "image": undefined,
+  "link": "https://example.org",
+  "showTooltipOnLink": undefined,
+  "siteName": undefined,
+  "title": "A description",
+}
+`;
+
+exports[`UrlPreviewViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:site_name': 'Site name',\\n  'og:title': ''\\n} 1`] = `
+{
+  "description": undefined,
+  "image": undefined,
+  "link": "https://example.org",
+  "showTooltipOnLink": undefined,
+  "siteName": undefined,
+  "title": "Site name",
+}
+`;
+
+exports[`UrlPreviewViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Basic title'\\n} 1`] = `
+{
+  "description": undefined,
+  "image": undefined,
+  "link": "https://example.org",
+  "showTooltipOnLink": undefined,
+  "siteName": undefined,
+  "title": "Basic title",
+}
+`;
+
+exports[`UrlPreviewViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Cool blog',\\n  'og:site_name': 'Cool site'\\n} 1`] = `
+{
+  "description": undefined,
+  "image": undefined,
+  "link": "https://example.org",
+  "showTooltipOnLink": undefined,
+  "siteName": "Cool site",
+  "title": "Cool blog",
+}
+`;
+
+exports[`UrlPreviewViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Media test',\\n  'og:image:height': '500',\\n  'og:image:width': 500,\\n  'matrix:image:size': 1024,\\n  'og:image': 'mxc://example.org/abc'\\n} 1`] = `
+{
+  "description": undefined,
+  "image": {
+    "fileSize": 1024,
+    "height": 100,
+    "imageFull": "https://example.org/image/src",
+    "imageThumb": "https://example.org/image/thumb",
+    "width": 100,
+  },
+  "link": "https://example.org",
+  "showTooltipOnLink": undefined,
+  "siteName": undefined,
+  "title": "Media test",
+}
+`;
+
+exports[`UrlPreviewViewModel should deduplicate multiple versions of the same URL 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [
+    {
+      "description": <Linkify>
+        This is a description
+      </Linkify>,
+      "image": undefined,
+      "link": "https://example.org",
+      "showTooltipOnLink": undefined,
+      "siteName": "Example.org",
+      "title": "This is an example!",
+    },
+  ],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should handle being hidden and shown by the user 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should handle being hidden and shown by the user 2`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [
+    {
+      "description": <Linkify>
+        This is a description
+      </Linkify>,
+      "image": undefined,
+      "link": "https://example.org",
+      "showTooltipOnLink": undefined,
+      "siteName": "Example.org",
+      "title": "This is an example!",
+    },
+  ],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should hide preview when invisible 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should ignore failed previews 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should ignore media when mediaVisible is false 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [
+    {
+      "description": undefined,
+      "image": undefined,
+      "link": "https://example.org",
+      "showTooltipOnLink": undefined,
+      "siteName": undefined,
+      "title": "This is an example!",
+    },
+  ],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should preview a URL with media 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [
+    {
+      "description": undefined,
+      "image": {
+        "fileSize": 10000,
+        "height": 100,
+        "imageFull": "https://example.org/image/src",
+        "imageThumb": "https://example.org/image/thumb",
+        "width": 100,
+      },
+      "link": "https://example.org",
+      "showTooltipOnLink": undefined,
+      "siteName": undefined,
+      "title": "This is an example!",
+    },
+  ],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should preview a single valid URL 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [
+    {
+      "description": <Linkify>
+        This is a description
+      </Linkify>,
+      "image": undefined,
+      "link": "https://example.org",
+      "showTooltipOnLink": undefined,
+      "siteName": "Example.org",
+      "title": "This is an example!",
+    },
+  ],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should return no previews by default 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [],
+  "previewsLimited": true,
+  "totalPreviewCount": 0,
+}
+`;