diff --git a/webapp/src/components/viewHeader/__snapshots__/viewHeader.test.tsx.snap b/webapp/src/components/viewHeader/__snapshots__/viewHeader.test.tsx.snap
new file mode 100644
index 000000000..d91baf3c8
--- /dev/null
+++ b/webapp/src/components/viewHeader/__snapshots__/viewHeader.test.tsx.snap
@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/viewHeader/viewHeader return viewHeader 1`] = `
+<div>
+  <div
+    class="ViewHeader"
+  >
+    <input
+      class="Editable undefined"
+      placeholder="Untitled View"
+      spellcheck="true"
+      title="view title"
+      value="view title"
+    />
+    <div
+      aria-label="menuwrapper"
+      class="MenuWrapper"
+      role="button"
+    >
+      <div
+        class="Button IconButton"
+        role="button"
+      >
+        <i
+          class="CompassIcon icon-chevron-down DropdownIcon"
+        />
+      </div>
+    </div>
+    <div
+      class="octo-spacer"
+    />
+    <div
+      aria-label="menuwrapper"
+      class="MenuWrapper"
+      role="button"
+    >
+      <button
+        class="Button    "
+        type="button"
+      >
+        <span>
+          Properties
+        </span>
+      </button>
+    </div>
+    <div
+      aria-label="menuwrapper"
+      class="MenuWrapper"
+      role="button"
+    >
+      <button
+        class="Button    "
+        type="button"
+      >
+        <span>
+          Group by: 
+          <span
+            id="groupByLabel"
+          >
+            Status
+          </span>
+        </span>
+      </button>
+    </div>
+    <div
+      class="ModalWrapper"
+    >
+      <button
+        class="Button active   "
+        type="button"
+      >
+        <span>
+          Filter
+        </span>
+      </button>
+    </div>
+    <div
+      aria-label="menuwrapper"
+      class="MenuWrapper"
+      role="button"
+    >
+      <button
+        class="Button active   "
+        type="button"
+      >
+        <span>
+          Sort
+        </span>
+      </button>
+    </div>
+    <button
+      class="Button    "
+      type="button"
+    >
+      <span>
+        Search
+      </span>
+    </button>
+    <div
+      class="ModalWrapper"
+    >
+      <div
+        aria-label="menuwrapper"
+        class="MenuWrapper"
+        role="button"
+      >
+        <div
+          class="Button IconButton"
+          role="button"
+        >
+          <i
+            class="CompassIcon icon-dots-horizontal OptionsIcon"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ButtonWithMenu"
+    >
+      <div
+        class="button-text"
+      >
+        New
+      </div>
+      <div
+        aria-label="menuwrapper"
+        class="MenuWrapper"
+        role="button"
+      >
+        <div
+          class="button-dropdown"
+        >
+          <i
+            class="CompassIcon icon-chevron-down DropdownIcon"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/viewHeader/viewHeader return viewHeader readonly 1`] = `
+<div>
+  <div
+    class="ViewHeader"
+  >
+    <input
+      class="Editable readonly undefined"
+      placeholder="Untitled View"
+      readonly=""
+      spellcheck="true"
+      title="view title"
+      value="view title"
+    />
+    <div
+      aria-label="menuwrapper"
+      class="MenuWrapper"
+      role="button"
+    >
+      <div
+        class="Button IconButton"
+        role="button"
+      >
+        <i
+          class="CompassIcon icon-chevron-down DropdownIcon"
+        />
+      </div>
+    </div>
+    <div
+      class="octo-spacer"
+    />
+    <button
+      class="Button    "
+      type="button"
+    >
+      <span>
+        Search
+      </span>
+    </button>
+  </div>
+</div>
+`;
diff --git a/webapp/src/components/viewHeader/viewHeader.test.tsx b/webapp/src/components/viewHeader/viewHeader.test.tsx
new file mode 100644
index 000000000..66f7e3e6c
--- /dev/null
+++ b/webapp/src/components/viewHeader/viewHeader.test.tsx
@@ -0,0 +1,82 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+import {render} from '@testing-library/react'
+import {Provider as ReduxProvider} from 'react-redux'
+
+import '@testing-library/jest-dom'
+
+import {TestBlockFactory} from '../../test/testBlockFactory'
+
+import {wrapIntl, mockStateStore} from '../../testUtils'
+
+import ViewHeader from './viewHeader'
+
+const board = TestBlockFactory.createBoard()
+const activeView = TestBlockFactory.createBoardView(board)
+const card = TestBlockFactory.createCard(board)
+
+describe('components/viewHeader/viewHeader', () => {
+    const state = {
+        users: {
+            me: {
+                id: 'user-id-1',
+                username: 'username_1',
+            },
+        },
+        searchText: {
+        },
+        boards: {
+            current: board,
+        },
+        cards: {
+            templates: [card],
+        },
+    }
+    const store = mockStateStore([], state)
+    test('return viewHeader', () => {
+        const {container} = render(
+            wrapIntl(
+                <ReduxProvider store={store}>
+                    <ViewHeader
+                        board={board}
+                        activeView={activeView}
+                        views={[activeView]}
+                        cards={[card]}
+                        groupByProperty={board.fields.cardProperties[0]}
+                        addCard={jest.fn()}
+                        addCardFromTemplate={jest.fn()}
+                        addCardTemplate={jest.fn()}
+                        editCardTemplate={jest.fn()}
+                        readonly={false}
+                        showShared={false}
+                    />
+                </ReduxProvider>,
+            ),
+        )
+        expect(container).toMatchSnapshot()
+    })
+    test('return viewHeader readonly', () => {
+        const {container} = render(
+            wrapIntl(
+                <ReduxProvider store={store}>
+                    <ViewHeader
+                        board={board}
+                        activeView={activeView}
+                        views={[activeView]}
+                        cards={[card]}
+                        groupByProperty={board.fields.cardProperties[0]}
+                        addCard={jest.fn()}
+                        addCardFromTemplate={jest.fn()}
+                        addCardTemplate={jest.fn()}
+                        editCardTemplate={jest.fn()}
+                        readonly={true}
+                        showShared={false}
+                    />
+                </ReduxProvider>,
+            ),
+        )
+        expect(container).toMatchSnapshot()
+    })
+})
diff --git a/webapp/src/testUtils.tsx b/webapp/src/testUtils.tsx
index 61e368ab4..4b19622a5 100644
--- a/webapp/src/testUtils.tsx
+++ b/webapp/src/testUtils.tsx
@@ -2,6 +2,8 @@
 // See LICENSE.txt for license information.
 import {IntlProvider} from 'react-intl'
 import React from 'react'
+import configureStore, {MockStoreEnhanced} from 'redux-mock-store'
+import {Middleware} from 'redux'
 
 export const wrapIntl = (children?: React.ReactNode): JSX.Element => <IntlProvider locale='en'>{children}</IntlProvider>
 
@@ -39,3 +41,8 @@ export function mockMatchMedia(result: any): void {
         }),
     })
 }
+
+export function mockStateStore(middleware:Middleware[], state:unknown): MockStoreEnhanced<unknown, unknown> {
+    const mockStore = configureStore(middleware)
+    return mockStore(state)
+}