Add snapshot test to UserInfo-test.tsx

test/components/views/right_panel/UserInfo-test.tsx

@@ -488,6 +488,21 @@ describe("<DeviceItem />", () => {
         expect(mockVerifyDevice).toHaveBeenCalledTimes(1);
         expect(mockVerifyDevice).toHaveBeenCalledWith(defaultUser, device);
     });
+
+    it("with display name", async () => {
+        const { container } = renderComponent();
+        await act(flushPromises);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("without display name", async () => {
+        const device = { deviceId: "deviceId" } as Device;
+        const { container } = renderComponent({ device, userId: defaultUserId });
+        await act(flushPromises);
+
+        expect(container).toMatchSnapshot();
+    });
 });
 
 describe("<UserOptionsSection />", () => {

test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DeviceItem /> with 1`] = `
+<div>
+  <div
+    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
+    role="button"
+    tabindex="0"
+    title="deviceId"
+  >
+    <div
+      class="mx_E2EIcon mx_E2EIcon_normal"
+    />
+    <div
+      class="mx_UserInfo_device_name"
+    >
+      deviceId
+    </div>
+    <div
+      class="mx_UserInfo_device_trusted"
+    />
+  </div>
+</div>
+`;
+
+exports[`<DeviceItem /> with display name 1`] = `
+<div>
+  <div
+    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
+    role="button"
+    tabindex="0"
+    title="deviceId"
+  >
+    <div
+      class="mx_E2EIcon mx_E2EIcon_normal"
+    />
+    <div
+      class="mx_UserInfo_device_name"
+    >
+      deviceName
+    </div>
+    <div
+      class="mx_UserInfo_device_trusted"
+    />
+  </div>
+</div>
+`;