diff --git a/app/javascript/article-form/elements/__tests__/__snapshots__/errors.test.jsx.snap b/app/javascript/article-form/elements/__tests__/__snapshots__/errors.test.jsx.snap
new file mode 100644
index 000000000..e55fd7f58
--- /dev/null
+++ b/app/javascript/article-form/elements/__tests__/__snapshots__/errors.test.jsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Errors /> renders properly 1`] = `
+<div
+  class="articleform__errors"
+>
+  <h2>
+    <span
+      aria-label="face screaming in fear"
+      role="img"
+    >
+      😱
+    </span>
+     Heads up:
+  </h2>
+  <ul>
+    <li>
+      0:  Error 1
+    </li>
+    <li>
+      1:  Error 2
+    </li>
+  </ul>
+</div>
+`;
diff --git a/app/javascript/article-form/elements/__tests__/__snapshots__/mainImage.test.jsx.snap b/app/javascript/article-form/elements/__tests__/__snapshots__/mainImage.test.jsx.snap
new file mode 100644
index 000000000..c8cb41f2d
--- /dev/null
+++ b/app/javascript/article-form/elements/__tests__/__snapshots__/mainImage.test.jsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MainImage /> renders properly 1`] = `
+<div
+  class="articleform__mainimage"
+  onClick={[MockFunction]}
+>
+  <img
+    src="http://lorempixel.com/400/200/"
+  />
+</div>
+`;
diff --git a/app/javascript/article-form/elements/__tests__/__snapshots__/notice.test.jsx.snap b/app/javascript/article-form/elements/__tests__/__snapshots__/notice.test.jsx.snap
new file mode 100644
index 000000000..b213db9fe
--- /dev/null
+++ b/app/javascript/article-form/elements/__tests__/__snapshots__/notice.test.jsx.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<notice /> renders properly when published with a first version 1`] = `
+<div
+  class="articleform__notice articleform__notice--publishing"
+>
+  Saving ...
+</div>
+`;
+
+exports[`<notice /> renders properly when published with a second version 1`] = `
+<div
+  class="articleform__notice articleform__notice--publishing"
+>
+  Publishing...
+</div>
+`;
+
+exports[`<notice /> renders properly when unpublished with a version 1`] = `
+<div
+  class="articleform__notice articleform__notice--draft"
+>
+  Saving Draft...
+</div>
+`;
+
+exports[`<notice /> renders properly when unpublished without a version 1`] = `
+<div
+  class="articleform__notice articleform__notice--draft"
+>
+  Saving ...
+</div>
+`;
diff --git a/app/javascript/article-form/elements/__tests__/errors.test.jsx b/app/javascript/article-form/elements/__tests__/errors.test.jsx
new file mode 100644
index 000000000..1989216e1
--- /dev/null
+++ b/app/javascript/article-form/elements/__tests__/errors.test.jsx
@@ -0,0 +1,15 @@
+import { h } from 'preact';
+import render from 'preact-render-to-json';
+import Errors from '../errors';
+
+const errorsList = [
+  'Error 1',
+  'Error 2'
+];
+
+describe('<Errors />', () => {
+  it('renders properly', () => {
+    const tree = render(<Errors errorsList={errorsList} />);
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/app/javascript/article-form/elements/__tests__/mainImage.test.jsx b/app/javascript/article-form/elements/__tests__/mainImage.test.jsx
new file mode 100644
index 000000000..d06b83da8
--- /dev/null
+++ b/app/javascript/article-form/elements/__tests__/mainImage.test.jsx
@@ -0,0 +1,19 @@
+import { h } from 'preact';
+import render from 'preact-render-to-json';
+import { shallow } from 'preact-render-spy';
+import MainImage from '../mainImage';
+
+describe('<MainImage />', () => {
+  const editHandler = jest.fn();
+
+  it('renders properly', () => {
+    const tree = render(<MainImage mainImage='http://lorempixel.com/400/200/' onEdit={editHandler} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('fires onEdit when clicked', () => {
+    const container = shallow(<MainImage mainImage='http://lorempixel.com/400/200/' onEdit={editHandler} />);
+    container.find('.articleform__mainimage').simulate('click');
+    expect(editHandler).toHaveBeenCalled();
+  });
+});
diff --git a/app/javascript/article-form/elements/__tests__/notice.test.jsx b/app/javascript/article-form/elements/__tests__/notice.test.jsx
new file mode 100644
index 000000000..edaf2757e
--- /dev/null
+++ b/app/javascript/article-form/elements/__tests__/notice.test.jsx
@@ -0,0 +1,25 @@
+import { h } from 'preact';
+import render from 'preact-render-to-json';
+import Notice from '../notice';
+
+describe('<notice />', () => {
+  it('renders properly when published with a first version', () => {
+    const tree = render(<Notice published version='v1' />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders properly when published with a second version', () => {
+    const tree = render(<Notice published version='v2' />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders properly when unpublished without a version', () => {
+    const tree = render(<Notice version='' />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders properly when unpublished with a version', () => {
+    const tree = render(<Notice version='v2' />);
+    expect(tree).toMatchSnapshot();
+  });
+});