diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx
new file mode 100644
index 000000000..ddd3d343e
--- /dev/null
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import ValidationMessage from "./ValidationMessage";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ValidationMessage> = {
+    className: "custom",
+    color: "error",
+    children: "Hello World",
+  };
+  const renderer = TestRenderer.create(<ValidationMessage {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
new file mode 100644
index 000000000..23e7d294a
--- /dev/null
+++ b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="ValidationMessage-root ValidationMessage-colorError custom"
+>
+  <span
+    className="Icon-root ValidationMessage-icon Icon-xsm"
+  >
+    warning
+  </span>
+  Hello World
+</div>
+`;