diff --git a/src/components/common/user-avatar/__snapshots__/user-avatar.test.tsx.snap b/src/components/common/user-avatar/__snapshots__/user-avatar.test.tsx.snap
new file mode 100644
index 000000000..eee14ab5e
--- /dev/null
+++ b/src/components/common/user-avatar/__snapshots__/user-avatar.test.tsx.snap
@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserAvatar adds additionalClasses props to wrapping span 1`] = `
+<div>
+  <span
+    class="d-inline-flex align-items-center testClass"
+  >
+    <img
+      alt="common.avatarOf"
+      class="rounded user-image"
+      height="20"
+      src="https://example.com/test.png"
+      title="Boaty McBoatFace"
+      width="20"
+    />
+    <span
+      class="ml-2 mr-1 user-line-name"
+    >
+      Boaty McBoatFace
+    </span>
+  </span>
+</div>
+`;
+
+exports[`UserAvatar does not show names if showName prop is false 1`] = `
+<div>
+  <span
+    class="d-inline-flex align-items-center "
+  >
+    <img
+      alt="common.avatarOf"
+      class="rounded user-image"
+      height="20"
+      src="https://example.com/test.png"
+      title="Boaty McBoatFace"
+      width="20"
+    />
+  </span>
+</div>
+`;
+
+exports[`UserAvatar renders the user avatar correctly 1`] = `
+<div>
+  <span
+    class="d-inline-flex align-items-center "
+  >
+    <img
+      alt="common.avatarOf"
+      class="rounded user-image"
+      height="20"
+      src="https://example.com/test.png"
+      title="Boaty McBoatFace"
+      width="20"
+    />
+    <span
+      class="ml-2 mr-1 user-line-name"
+    >
+      Boaty McBoatFace
+    </span>
+  </span>
+</div>
+`;
+
+exports[`UserAvatar renders the user avatar in size lg 1`] = `
+<div>
+  <span
+    class="d-inline-flex align-items-center "
+  >
+    <img
+      alt="common.avatarOf"
+      class="rounded user-image"
+      height="30"
+      src="https://example.com/test.png"
+      title="Boaty McBoatFace"
+      width="30"
+    />
+    <span
+      class="ml-2 mr-1 user-line-name"
+    >
+      Boaty McBoatFace
+    </span>
+  </span>
+</div>
+`;
+
+exports[`UserAvatar renders the user avatar in size sm 1`] = `
+<div>
+  <span
+    class="d-inline-flex align-items-center "
+  >
+    <img
+      alt="common.avatarOf"
+      class="rounded user-image"
+      height="16"
+      src="https://example.com/test.png"
+      title="Boaty McBoatFace"
+      width="16"
+    />
+    <span
+      class="ml-2 mr-1 user-line-name"
+    >
+      Boaty McBoatFace
+    </span>
+  </span>
+</div>
+`;
diff --git a/src/components/common/user-avatar/user-avatar.test.tsx b/src/components/common/user-avatar/user-avatar.test.tsx
new file mode 100644
index 000000000..a68492fc2
--- /dev/null
+++ b/src/components/common/user-avatar/user-avatar.test.tsx
@@ -0,0 +1,39 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { UserAvatar } from './user-avatar'
+import { render } from '@testing-library/react'
+import type { UserInfo } from '../../../api/users/types'
+
+describe('UserAvatar', () => {
+  const user: UserInfo = {
+    username: 'boatface',
+    displayName: 'Boaty McBoatFace',
+    photo: 'https://example.com/test.png'
+  }
+  it('renders the user avatar correctly', () => {
+    const view = render(<UserAvatar user={user} />)
+    expect(view.container).toMatchSnapshot()
+  })
+  describe('renders the user avatar in size', () => {
+    it('sm', () => {
+      const view = render(<UserAvatar user={user} size={'sm'} />)
+      expect(view.container).toMatchSnapshot()
+    })
+    it('lg', () => {
+      const view = render(<UserAvatar user={user} size={'lg'} />)
+      expect(view.container).toMatchSnapshot()
+    })
+  })
+  it('adds additionalClasses props to wrapping span', () => {
+    const view = render(<UserAvatar user={user} additionalClasses={'testClass'} />)
+    expect(view.container).toMatchSnapshot()
+  })
+  it('does not show names if showName prop is false', () => {
+    const view = render(<UserAvatar user={user} showName={false} />)
+    expect(view.container).toMatchSnapshot()
+  })
+})