diff --git a/src/components/common/links/__snapshots__/external-link.test.tsx.snap b/src/components/common/links/__snapshots__/external-link.test.tsx.snap
new file mode 100644
index 000000000..c7c28b6f6
--- /dev/null
+++ b/src/components/common/links/__snapshots__/external-link.test.tsx.snap
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExternalLink renders an external link correctly 1`] = `
+<div>
+  <a
+    class="text-light"
+    dir="auto"
+    href="https://example.com"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    testText
+  </a>
+</div>
+`;
+
+exports[`ExternalLink renders an external link with a title 1`] = `
+<div>
+  <a
+    class="text-light"
+    dir="auto"
+    href="https://example.com"
+    rel="noopener noreferrer"
+    target="_blank"
+    title="testTitle"
+  >
+    testText
+  </a>
+</div>
+`;
+
+exports[`ExternalLink renders an external link with additional className 1`] = `
+<div>
+  <a
+    class="testClass"
+    dir="auto"
+    href="https://example.com"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    testText
+  </a>
+</div>
+`;
+
+exports[`ExternalLink renders an external link with an icon 1`] = `
+<div>
+  <a
+    class="text-light"
+    dir="auto"
+    href="https://example.com"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <i
+      class="fa fa-fw fa-heart  "
+    />
+     
+    testText
+  </a>
+</div>
+`;
+
+exports[`ExternalLink renders an external link with an id 1`] = `
+<div>
+  <a
+    class="text-light"
+    dir="auto"
+    href="https://example.com"
+    id="testId"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    testText
+  </a>
+</div>
+`;
diff --git a/src/components/common/links/external-link.test.tsx b/src/components/common/links/external-link.test.tsx
new file mode 100644
index 000000000..8218933aa
--- /dev/null
+++ b/src/components/common/links/external-link.test.tsx
@@ -0,0 +1,33 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { render } from '@testing-library/react'
+import { ExternalLink } from './external-link'
+
+describe('ExternalLink', () => {
+  const href = 'https://example.com'
+  const text = 'testText'
+  it('renders an external link correctly', () => {
+    const view = render(<ExternalLink text={text} href={href} />)
+    expect(view.container).toMatchSnapshot()
+  })
+  it('renders an external link with an icon', () => {
+    const view = render(<ExternalLink text={text} href={href} icon={'heart'} />)
+    expect(view.container).toMatchSnapshot()
+  })
+  it('renders an external link with an id', () => {
+    const view = render(<ExternalLink text={text} href={href} id={'testId'} />)
+    expect(view.container).toMatchSnapshot()
+  })
+  it('renders an external link with additional className', () => {
+    const view = render(<ExternalLink text={text} href={href} className={'testClass'} />)
+    expect(view.container).toMatchSnapshot()
+  })
+  it('renders an external link with a title', () => {
+    const view = render(<ExternalLink text={text} href={href} title={'testTitle'} />)
+    expect(view.container).toMatchSnapshot()
+  })
+})