diff --git a/webapp/src/components/viewHeader/__snapshots__/filterValue.test.tsx.snap b/webapp/src/components/viewHeader/__snapshots__/filterValue.test.tsx.snap
new file mode 100644
index 000000000..a55b1d54e
--- /dev/null
+++ b/webapp/src/components/viewHeader/__snapshots__/filterValue.test.tsx.snap
@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/viewHeader/filterValue return filterValue 1`] = `
+<div>
+  <div
+    aria-label="menuwrapper"
+    class="MenuWrapper"
+    role="button"
+  >
+    <button
+      class="Button    "
+      type="button"
+    >
+      <span>
+        Status
+      </span>
+    </button>
+    <div
+      class="Menu noselect bottom"
+    >
+      <div
+        class="menu-contents"
+      >
+        <div
+          class="menu-options"
+        >
+          <div
+            class="MenuOption SwitchOption menu-option"
+          >
+            <div
+              class="noicon"
+            />
+            <div
+              class="menu-name"
+            >
+              Status
+            </div>
+            <div
+              class="Switch on"
+            >
+              <div
+                class="octo-switch-inner"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="menu-spacer hideOnWidescreen"
+        />
+        <div
+          class="menu-options hideOnWidescreen"
+        >
+          <div
+            aria-label="Cancel"
+            class="MenuOption TextOption menu-option menu-cancel"
+            role="button"
+          >
+            <div
+              class="noicon"
+            />
+            <div
+              class="menu-name"
+            >
+              Cancel
+            </div>
+            <div
+              class="noicon"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/viewHeader/filterValue return filterValue and click Status 1`] = `
+<div>
+  <div
+    aria-label="menuwrapper"
+    class="MenuWrapper"
+    role="button"
+  >
+    <button
+      class="Button    "
+      type="button"
+    >
+      <span>
+        Status
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`components/viewHeader/filterValue return filterValue and click Status with Status not in filter 1`] = `
+<div>
+  <div
+    aria-label="menuwrapper"
+    class="MenuWrapper"
+    role="button"
+  >
+    <button
+      class="Button    "
+      type="button"
+    >
+      <span>
+        (Unknown)
+      </span>
+    </button>
+  </div>
+</div>
+`;
diff --git a/webapp/src/components/viewHeader/filterValue.test.tsx b/webapp/src/components/viewHeader/filterValue.test.tsx
new file mode 100644
index 000000000..ebd4a877e
--- /dev/null
+++ b/webapp/src/components/viewHeader/filterValue.test.tsx
@@ -0,0 +1,105 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import {Provider as ReduxProvider} from 'react-redux'
+
+import '@testing-library/jest-dom'
+import userEvent from '@testing-library/user-event'
+
+import {mocked} from 'ts-jest/utils'
+
+import {FilterClause} from '../../blocks/filterClause'
+
+import {TestBlockFactory} from '../../test/testBlockFactory'
+
+import {wrapIntl, mockStateStore} from '../../testUtils'
+
+import mutator from '../../mutator'
+
+import FilterValue from './filterValue'
+
+jest.mock('../../mutator')
+const mockedMutator = mocked(mutator, true)
+
+const board = TestBlockFactory.createBoard()
+const activeView = TestBlockFactory.createBoardView(board)
+const state = {
+    users: {
+        me: {
+            id: 'user-id-1',
+            username: 'username_1',
+        },
+    },
+}
+const store = mockStateStore([], state)
+const filter: FilterClause = {
+    propertyId: '1',
+    condition: 'includes',
+    values: ['Status'],
+}
+
+describe('components/viewHeader/filterValue', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+        board.fields.cardProperties[0].options = [{id: 'Status', value: 'Status', color: ''}]
+        activeView.fields.filter.filters = [filter]
+    })
+    test('return filterValue', () => {
+        const {container} = render(
+            wrapIntl(
+                <ReduxProvider store={store}>
+                    <FilterValue
+                        view={activeView}
+                        filter={filter}
+                        template={board.fields.cardProperties[0]}
+                    />
+                </ReduxProvider>,
+            ),
+        )
+        const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
+        userEvent.click(buttonElement)
+        expect(container).toMatchSnapshot()
+    })
+    test('return filterValue and click Status', () => {
+        const {container} = render(
+            wrapIntl(
+                <ReduxProvider store={store}>
+                    <FilterValue
+                        view={activeView}
+                        filter={filter}
+                        template={board.fields.cardProperties[0]}
+                    />
+                </ReduxProvider>,
+            ),
+        )
+        const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
+        userEvent.click(buttonElement)
+        const switchStatus = screen.getAllByText('Status')[1]
+        userEvent.click(switchStatus)
+        expect(mockedMutator.changeViewFilter).toBeCalledTimes(1)
+        expect(container).toMatchSnapshot()
+    })
+    test('return filterValue and click Status with Status not in filter', () => {
+        filter.values = ['test']
+        activeView.fields.filter.filters = [filter]
+        const {container} = render(
+            wrapIntl(
+                <ReduxProvider store={store}>
+                    <FilterValue
+                        view={activeView}
+                        filter={filter}
+                        template={board.fields.cardProperties[0]}
+                    />
+                </ReduxProvider>,
+            ),
+        )
+        const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
+        userEvent.click(buttonElement)
+        const switchStatus = screen.getAllByText('Status')[0]
+        userEvent.click(switchStatus)
+        expect(mockedMutator.changeViewFilter).toBeCalledTimes(1)
+        expect(container).toMatchSnapshot()
+    })
+})
diff --git a/webapp/src/testUtils.tsx b/webapp/src/testUtils.tsx
index 4b19622a5..3f81ad3a3 100644
--- a/webapp/src/testUtils.tsx
+++ b/webapp/src/testUtils.tsx
@@ -11,9 +11,7 @@ export function mockDOM(): void {
     window.focus = jest.fn()
     document.createRange = () => {
         const range = new Range()
-
         range.getBoundingClientRect = jest.fn()
-
         range.getClientRects = () => {
             return {
                 item: () => null,
@@ -21,11 +19,9 @@ export function mockDOM(): void {
                 [Symbol.iterator]: jest.fn(),
             }
         }
-
         return range
     }
 }
-
 export function mockMatchMedia(result: any): void {
     // We check if system preference is dark or light theme.
     // This is required to provide it's definition since