diff --git a/src/components/common/show-if/__snapshots__/show-if.test.tsx.snap b/src/components/common/show-if/__snapshots__/show-if.test.tsx.snap
new file mode 100644
index 000000000..2829b934f
--- /dev/null
+++ b/src/components/common/show-if/__snapshots__/show-if.test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ShowIf does not render child if condition is false 1`] = `<div />`;
+
+exports[`ShowIf renders child if condition is true 1`] = `
+<div>
+  test
+</div>
+`;
diff --git a/src/components/common/show-if/show-if.test.tsx b/src/components/common/show-if/show-if.test.tsx
new file mode 100644
index 000000000..b849882b1
--- /dev/null
+++ b/src/components/common/show-if/show-if.test.tsx
@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { render } from '@testing-library/react'
+import { ShowIf } from './show-if'
+
+describe('ShowIf', () => {
+  it('renders child if condition is true', () => {
+    const view = render(<ShowIf condition={true}>test</ShowIf>)
+    expect(view.container).toMatchSnapshot()
+  })
+
+  it('does not render child if condition is false', () => {
+    const view = render(<ShowIf condition={false}>test</ShowIf>)
+    expect(view.container).toMatchSnapshot()
+  })
+})