diff --git a/ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap b/ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap
new file mode 100644
index 000000000..b6ed545f0
--- /dev/null
+++ b/ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CenteredMessage /> matches snapshot 1`] = `
+"
+<h1 class=\\"display-1 text-placeholder screen-center\\">
+  <div>
+    Foo
+  </div>
+</h1>
+"
+`;
diff --git a/ui/src/Components/CenteredMessage/index.test.js b/ui/src/Components/CenteredMessage/index.test.js
new file mode 100644
index 000000000..fa3da4341
--- /dev/null
+++ b/ui/src/Components/CenteredMessage/index.test.js
@@ -0,0 +1,41 @@
+import React from "react";
+
+import { shallow } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
+
+import { CenteredMessage } from ".";
+
+describe("<CenteredMessage />", () => {
+  const Message = () => <div>Foo</div>;
+
+  it("matches snapshot", () => {
+    const tree = shallow(
+      <CenteredMessage>
+        <Message />
+      </CenteredMessage>
+    );
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("uses 'display-1 text-placeholder' className by default", () => {
+    const tree = shallow(
+      <CenteredMessage>
+        <Message />
+      </CenteredMessage>
+    );
+    expect(toDiffableHtml(tree.html())).toMatch(/display-1 text-placeholder/);
+  });
+
+  it("uses custom className if passed", () => {
+    const tree = shallow(
+      <CenteredMessage className="bar-class">
+        <Message />
+      </CenteredMessage>
+    );
+    expect(toDiffableHtml(tree.html())).toMatch(/bar-class/);
+    expect(toDiffableHtml(tree.html())).not.toMatch(
+      /display-1 text-placeholder/
+    );
+  });
+});