diff --git a/web/src/js/__tests__/components/Header/ConnectionIndicatorSpec.js b/web/src/js/__tests__/components/Header/ConnectionIndicatorSpec.js
new file mode 100644
index 000000000..88527d915
--- /dev/null
+++ b/web/src/js/__tests__/components/Header/ConnectionIndicatorSpec.js
@@ -0,0 +1,57 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import ConnectedIndicator, { ConnectionIndicator } from '../../../components/Header/ConnectionIndicator'
+import { ConnectionState } from '../../../ducks/connection'
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+
+const mockStore = configureStore()
+
+describe('ConnectionIndicator Component', () => {
+
+    it('should render INIT', () => {
+        let connectionIndicator = renderer.create(
+            <ConnectionIndicator state={ConnectionState.INIT}/>),
+            tree = connectionIndicator.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render FETCHING', () => {
+        let connectionIndicator = renderer.create(
+            <ConnectionIndicator state={ConnectionState.FETCHING}/>),
+            tree = connectionIndicator.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render ESTABLISHED', () => {
+        let connectionIndicator = renderer.create(
+            <ConnectionIndicator state={ConnectionState.ESTABLISHED}/>),
+            tree = connectionIndicator.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render ERROR', () => {
+        let connectionIndicator = renderer.create(
+            <ConnectionIndicator state={ConnectionState.ERROR} message="foo"/>),
+            tree = connectionIndicator.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render OFFLINE', () => {
+        let connectionIndicator = renderer.create(
+            <ConnectionIndicator state={ConnectionState.OFFLINE} />),
+            tree = connectionIndicator.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should connect to state', () => {
+        let store = mockStore({ connection: {state: ConnectionState.INIT} }),
+            provider = renderer.create(
+            <Provider store={store}>
+                <ConnectedIndicator/>
+            </Provider>),
+        tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
+
diff --git a/web/src/js/components/Header/ConnectionIndicator.jsx b/web/src/js/components/Header/ConnectionIndicator.jsx
index 1ee42e259..bbf0dd81e 100644
--- a/web/src/js/components/Header/ConnectionIndicator.jsx
+++ b/web/src/js/components/Header/ConnectionIndicator.jsx
@@ -9,7 +9,7 @@ ConnectionIndicator.propTypes = {
     message: PropTypes.string,
 
 }
-function ConnectionIndicator({ state, message }) {
+export function ConnectionIndicator({ state, message }) {
     switch (state) {
         case ConnectionState.INIT:
             return <span className="connection-indicator init">connecting…</span>;