From 0ac2fc0f628e1404b1ff971b7431373946ceab65 Mon Sep 17 00:00:00 2001
From: Scott Bishel <scott.bishel@mattermost.com>
Date: Mon, 4 Oct 2021 12:27:37 -0600
Subject: [PATCH] gh-1360 Fix for tests using 'any' when wrapping components
 (#1374)

* fix for tests using any when wrapping components

* update/cleanup use of test wrappers

* fix up package

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
---
 .../components/addContentMenuItem.test.tsx    |  8 ++----
 .../src/components/blockIconSelector.test.tsx |  6 ++--
 .../cardDetail/cardDetailContents.test.tsx    | 28 ++++++-------------
 .../cardDetail/cardDetailProperties.test.tsx  |  5 ++--
 .../content/checkboxElement.test.tsx          |  5 ++--
 .../globalHeader/globalHeader.test.tsx        |  6 ++--
 .../globalHeaderSettingsMenu.test.tsx         |  6 ++--
 .../properties/dateRange/dateRange.test.tsx   |  8 +++---
 .../lastModifiedAt/lastModifiedAt.test.tsx    |  5 ++--
 .../components/properties/user/user.test.tsx  |  7 +++--
 .../components/propertyValueElement.test.tsx  | 27 ++++++------------
 .../src/components/sidebar/sidebar.test.tsx   | 15 ++--------
 .../sidebar/sidebarSettingsMenu.test.tsx      |  6 ++--
 .../table/calculation/calculationRow.test.tsx | 17 ++---------
 webapp/src/components/table/table.test.tsx    | 28 ++++++-------------
 .../table/tableGroupHeaderRow.test.tsx        | 26 ++++++-----------
 .../src/components/table/tableHeader.test.tsx | 14 ++--------
 .../components/table/tableHeaderMenu.test.tsx |  5 ++--
 webapp/src/components/table/tableRow.test.tsx | 26 ++++++-----------
 .../src/components/table/tableRows.test.tsx   | 12 ++------
 .../viewHeader/viewHeaderActionsMenu.test.tsx |  7 ++---
 .../workspaceOptions.test.tsx                 | 15 ++--------
 .../workspaceSwitcher.test.tsx                | 12 ++------
 .../pages/dashboard/centerContent.test.tsx    | 18 ++++--------
 .../pages/dashboard/dashboardPage.test.tsx    | 12 ++------
 webapp/src/testUtils.tsx                      |  9 ++++++
 webapp/src/widgets/propertyMenu.test.tsx      |  5 ++--
 27 files changed, 107 insertions(+), 231 deletions(-)

diff --git a/webapp/src/components/addContentMenuItem.test.tsx b/webapp/src/components/addContentMenuItem.test.tsx
index 61fbe5a81..c13b09358 100644
--- a/webapp/src/components/addContentMenuItem.test.tsx
+++ b/webapp/src/components/addContentMenuItem.test.tsx
@@ -1,11 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactElement} from 'react'
+import React from 'react'
 import {render, screen, waitFor} from '@testing-library/react'
 
 import '@testing-library/jest-dom'
-import {IntlProvider} from 'react-intl'
 
 import {mocked} from 'ts-jest/utils'
 
@@ -15,6 +14,8 @@ import mutator from '../mutator'
 
 import {TestBlockFactory} from '../test/testBlockFactory'
 
+import {wrapIntl} from '../testUtils'
+
 import AddContentMenuItem from './addContentMenuItem'
 
 import './content/textElement'
@@ -22,9 +23,6 @@ import './content/imageElement'
 import './content/dividerElement'
 import './content/checkboxElement'
 
-const wrapIntl = (children: ReactElement) => (
-    <IntlProvider locale='en'>{children}</IntlProvider>
-)
 const board = TestBlockFactory.createBoard()
 const card = TestBlockFactory.createCard(board)
 
diff --git a/webapp/src/components/blockIconSelector.test.tsx b/webapp/src/components/blockIconSelector.test.tsx
index 2585a03d2..9a2eb9b26 100644
--- a/webapp/src/components/blockIconSelector.test.tsx
+++ b/webapp/src/components/blockIconSelector.test.tsx
@@ -1,23 +1,23 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactElement} from 'react'
+import React from 'react'
 import {fireEvent, render, screen} from '@testing-library/react'
 
 import userEvent from '@testing-library/user-event'
 
 import '@testing-library/jest-dom'
-import {IntlProvider} from 'react-intl'
 
 import {mocked} from 'ts-jest/utils'
 
 import mutator from '../mutator'
 
+import {wrapIntl} from '../testUtils'
+
 import {TestBlockFactory} from '../test/testBlockFactory'
 
 import BlockIconSelector from './blockIconSelector'
 
-const wrapIntl = (children: ReactElement) => <IntlProvider locale='en'>{children}</IntlProvider>
 const board = TestBlockFactory.createBoard()
 const icon = '👍'
 
diff --git a/webapp/src/components/cardDetail/cardDetailContents.test.tsx b/webapp/src/components/cardDetail/cardDetailContents.test.tsx
index cb361d433..6883009ee 100644
--- a/webapp/src/components/cardDetail/cardDetailContents.test.tsx
+++ b/webapp/src/components/cardDetail/cardDetailContents.test.tsx
@@ -4,26 +4,14 @@ import React from 'react'
 
 import {fireEvent, render} from '@testing-library/react'
 
-import {IntlProvider} from 'react-intl'
 import {act} from 'react-dom/test-utils'
 
-import {DndProvider} from 'react-dnd'
-import {HTML5Backend} from 'react-dnd-html5-backend'
-
 import {TestBlockFactory} from '../../test/testBlockFactory'
 
-import {mockDOM} from '../../testUtils'
+import {mockDOM, wrapDNDIntl} from '../../testUtils'
 
 import CardDetailContents from './cardDetailContents'
 
-const wrapProviders = (children: any) => {
-    return (
-        <DndProvider backend={HTML5Backend}>
-            <IntlProvider locale='en'>{children}</IntlProvider>
-        </DndProvider>
-    )
-}
-
 global.fetch = jest.fn()
 
 beforeAll(() => {
@@ -60,7 +48,7 @@ describe('components/cardDetail/cardDetailContents', () => {
     const card = TestBlockFactory.createCard(board)
 
     test('should match snapshot', async () => {
-        const component = wrapProviders((
+        const component = wrapDNDIntl((
             <CardDetailContents
                 id='test-id'
                 card={card}
@@ -79,7 +67,7 @@ describe('components/cardDetail/cardDetailContents', () => {
 
     test('should match snapshot with contents array', async () => {
         const contents = [TestBlockFactory.createDivider(card)]
-        const component = wrapProviders((
+        const component = wrapDNDIntl((
             <CardDetailContents
                 id='test-id'
                 card={card}
@@ -97,7 +85,7 @@ describe('components/cardDetail/cardDetailContents', () => {
     })
 
     test('should match snapshot after onBlur triggers', async () => {
-        const component = wrapProviders((
+        const component = wrapDNDIntl((
             <CardDetailContents
                 id='test-id'
                 card={card}
@@ -144,7 +132,7 @@ describe('components/cardDetail/cardDetailContents', () => {
 
     test('should match snapshot with contents array that has array inside it', async () => {
         const contents = [TestBlockFactory.createDivider(card), [TestBlockFactory.createDivider(card), TestBlockFactory.createDivider(card)]]
-        const component = wrapProviders((
+        const component = wrapDNDIntl((
             <CardDetailContents
                 id='test-id'
                 card={card}
@@ -164,7 +152,7 @@ describe('components/cardDetail/cardDetailContents', () => {
     test('should match snapshot after drag and drop event', async () => {
         const contents = [TestBlockFactory.createDivider(card), [TestBlockFactory.createDivider(card), TestBlockFactory.createDivider(card)]]
         card.fields.contentOrder = contents.map((content) => (Array.isArray(content) ? content.map((c) => c.id) : (content as any).id))
-        const component = wrapProviders((
+        const component = wrapDNDIntl((
             <CardDetailContents
                 id='test-id'
                 card={card}
@@ -193,7 +181,7 @@ describe('components/cardDetail/cardDetailContents', () => {
     test('should match snapshot after drag and drop event 2', async () => {
         const contents = [TestBlockFactory.createDivider(card), TestBlockFactory.createDivider(card)]
         card.fields.contentOrder = contents.map((content) => (Array.isArray(content) ? content.map((c) => c.id) : (content as any).id))
-        const component = wrapProviders((
+        const component = wrapDNDIntl((
             <CardDetailContents
                 id='test-id'
                 card={card}
@@ -222,7 +210,7 @@ describe('components/cardDetail/cardDetailContents', () => {
     test('should match snapshot after drag and drop event 3', async () => {
         const contents = [TestBlockFactory.createDivider(card), TestBlockFactory.createDivider(card)]
         card.fields.contentOrder = contents.map((content) => (Array.isArray(content) ? content.map((c) => c.id) : (content as any).id))
-        const component = wrapProviders((
+        const component = wrapDNDIntl((
             <CardDetailContents
                 id='test-id'
                 card={card}
diff --git a/webapp/src/components/cardDetail/cardDetailProperties.test.tsx b/webapp/src/components/cardDetail/cardDetailProperties.test.tsx
index abbc76071..b2bf81082 100644
--- a/webapp/src/components/cardDetail/cardDetailProperties.test.tsx
+++ b/webapp/src/components/cardDetail/cardDetailProperties.test.tsx
@@ -3,9 +3,10 @@
 import React from 'react'
 
 import {fireEvent, render} from '@testing-library/react'
-import {IntlProvider} from 'react-intl'
 import userEvent from '@testing-library/user-event'
 
+import {wrapIntl} from '../../testUtils'
+
 import {TestBlockFactory} from '../../test/testBlockFactory'
 import {FetchMock} from '../../test/fetchMock'
 
@@ -19,8 +20,6 @@ beforeEach(() => {
     FetchMock.fn.mockReset()
 })
 
-const wrapIntl = (children: any) => <IntlProvider locale='en'>{children}</IntlProvider>
-
 describe('components/cardDetail/CardDetailProperties', () => {
     const board = TestBlockFactory.createBoard()
     board.fields.cardProperties = [
diff --git a/webapp/src/components/content/checkboxElement.test.tsx b/webapp/src/components/content/checkboxElement.test.tsx
index d6b912ecf..5bcbe1581 100644
--- a/webapp/src/components/content/checkboxElement.test.tsx
+++ b/webapp/src/components/content/checkboxElement.test.tsx
@@ -4,7 +4,8 @@
 import React from 'react'
 import {fireEvent, render} from '@testing-library/react'
 import '@testing-library/jest-dom'
-import {IntlProvider} from 'react-intl'
+
+import {wrapIntl} from '../../testUtils'
 
 import {ContentBlock} from '../../blocks/contentBlock'
 
@@ -12,8 +13,6 @@ import CheckboxElement from './checkboxElement'
 
 const fetchMock = require('fetch-mock-jest')
 
-const wrapIntl = (children: any) => <IntlProvider locale='en'>{children}</IntlProvider>
-
 describe('components/content/CheckboxElement', () => {
     const defaultBlock: ContentBlock = {
         id: 'test-id',
diff --git a/webapp/src/components/globalHeader/globalHeader.test.tsx b/webapp/src/components/globalHeader/globalHeader.test.tsx
index cb157f939..6f1ce9fed 100644
--- a/webapp/src/components/globalHeader/globalHeader.test.tsx
+++ b/webapp/src/components/globalHeader/globalHeader.test.tsx
@@ -6,13 +6,11 @@ import {Provider as ReduxProvider} from 'react-redux'
 
 import {render} from '@testing-library/react'
 
-import {IntlProvider} from 'react-intl'
-
 import configureStore from 'redux-mock-store'
 
-import GlobalHeader from './globalHeader'
+import {wrapIntl} from '../../testUtils'
 
-const wrapIntl = (children: any) => <IntlProvider locale='en'>{children}</IntlProvider>
+import GlobalHeader from './globalHeader'
 
 describe('components/sidebar/GlobalHeader', () => {
     const mockStore = configureStore([])
diff --git a/webapp/src/components/globalHeader/globalHeaderSettingsMenu.test.tsx b/webapp/src/components/globalHeader/globalHeaderSettingsMenu.test.tsx
index c27cf1bf9..83e2afbff 100644
--- a/webapp/src/components/globalHeader/globalHeaderSettingsMenu.test.tsx
+++ b/webapp/src/components/globalHeader/globalHeaderSettingsMenu.test.tsx
@@ -6,14 +6,12 @@ import {Provider as ReduxProvider} from 'react-redux'
 
 import {render} from '@testing-library/react'
 
-import {IntlProvider} from 'react-intl'
-
 import userEvent from '@testing-library/user-event'
 import configureStore from 'redux-mock-store'
 
-import GlobalHeaderSettingsMenu from './globalHeaderSettingsMenu'
+import {wrapIntl} from '../../testUtils'
 
-const wrapIntl = (children: any) => <IntlProvider locale='en'>{children}</IntlProvider>
+import GlobalHeaderSettingsMenu from './globalHeaderSettingsMenu'
 
 describe('components/sidebar/GlobalHeaderSettingsMenu', () => {
     const mockStore = configureStore([])
diff --git a/webapp/src/components/properties/dateRange/dateRange.test.tsx b/webapp/src/components/properties/dateRange/dateRange.test.tsx
index 87986518b..ae4336c48 100644
--- a/webapp/src/components/properties/dateRange/dateRange.test.tsx
+++ b/webapp/src/components/properties/dateRange/dateRange.test.tsx
@@ -4,13 +4,13 @@
 import React from 'react'
 import {render} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-
-import '@testing-library/jest-dom'
 import {IntlProvider} from 'react-intl'
 
-import DateRange from '../dateRange/dateRange'
+import '@testing-library/jest-dom'
 
-const wrapIntl = (children: any) => <IntlProvider locale='en'>{children}</IntlProvider>
+import {wrapIntl} from '../../../testUtils'
+
+import DateRange from '../dateRange/dateRange'
 
 // create Dates for specific days for this year.
 const June15 = new Date(Date.UTC(new Date().getFullYear(), 5, 15, 12))
diff --git a/webapp/src/components/properties/lastModifiedAt/lastModifiedAt.test.tsx b/webapp/src/components/properties/lastModifiedAt/lastModifiedAt.test.tsx
index c16e6bd74..3e6c5ef53 100644
--- a/webapp/src/components/properties/lastModifiedAt/lastModifiedAt.test.tsx
+++ b/webapp/src/components/properties/lastModifiedAt/lastModifiedAt.test.tsx
@@ -3,15 +3,14 @@
 
 import React from 'react'
 import {render} from '@testing-library/react'
-import {IntlProvider} from 'react-intl'
+
+import {wrapIntl} from '../../../testUtils'
 
 import {createCard} from '../../../blocks/card'
 import {createCommentBlock} from '../../../blocks/commentBlock'
 
 import LastModifiedAt from './lastModifiedAt'
 
-const wrapIntl = (children: any) => <IntlProvider locale='en'>{children}</IntlProvider>
-
 describe('componnets/properties/lastModifiedAt', () => {
     test('should match snapshot', () => {
         const card = createCard()
diff --git a/webapp/src/components/properties/user/user.test.tsx b/webapp/src/components/properties/user/user.test.tsx
index 679f2f0bb..896a2562d 100644
--- a/webapp/src/components/properties/user/user.test.tsx
+++ b/webapp/src/components/properties/user/user.test.tsx
@@ -3,17 +3,18 @@
 
 import React from 'react'
 import {Provider as ReduxProvider} from 'react-redux'
-import {IntlProvider} from 'react-intl'
+
 import {render, waitFor} from '@testing-library/react'
+
 import configureStore from 'redux-mock-store'
 
 import {act} from 'react-dom/test-utils'
 
 import userEvent from '@testing-library/user-event'
 
-import UserProperty from './user'
+import {wrapIntl} from '../../../testUtils'
 
-const wrapIntl = (children: any) => <IntlProvider locale='en'>{children}</IntlProvider>
+import UserProperty from './user'
 
 describe('components/properties/user', () => {
     const mockStore = configureStore([])
diff --git a/webapp/src/components/propertyValueElement.test.tsx b/webapp/src/components/propertyValueElement.test.tsx
index 0e71e69e4..d9c5f78a6 100644
--- a/webapp/src/components/propertyValueElement.test.tsx
+++ b/webapp/src/components/propertyValueElement.test.tsx
@@ -4,11 +4,10 @@
 import React from 'react'
 import {render} from '@testing-library/react'
 import '@testing-library/jest-dom'
-import {IntlProvider} from 'react-intl'
+
+import {wrapDNDIntl} from '../testUtils'
 
 import 'isomorphic-fetch'
-import {DndProvider} from 'react-dnd'
-import {HTML5Backend} from 'react-dnd-html5-backend'
 
 import {IPropertyTemplate, IPropertyOption} from '../blocks/board'
 
@@ -16,14 +15,6 @@ import {TestBlockFactory} from '../test/testBlockFactory'
 
 import PropertyValueElement from './propertyValueElement'
 
-const wrapProviders = (children: any) => {
-    return (
-        <DndProvider backend={HTML5Backend}>
-            <IntlProvider locale='en'>{children}</IntlProvider>
-        </DndProvider>
-    )
-}
-
 describe('components/propertyValueElement', () => {
     const board = TestBlockFactory.createBoard()
     const card = TestBlockFactory.createCard(board)
@@ -31,7 +22,7 @@ describe('components/propertyValueElement', () => {
 
     test('should match snapshot, select', async () => {
         const propertyTemplate = board.fields.cardProperties.find((p) => p.id === 'property1')
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <PropertyValueElement
                 board={board}
                 readOnly={false}
@@ -49,7 +40,7 @@ describe('components/propertyValueElement', () => {
 
     test('should match snapshot, select, read-only', async () => {
         const propertyTemplate = board.fields.cardProperties.find((p) => p.id === 'property1')
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <PropertyValueElement
                 board={board}
                 readOnly={true}
@@ -83,7 +74,7 @@ describe('components/propertyValueElement', () => {
             options,
         }
         card.fields.properties.multiSelect = ['ms1', 'ms2']
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <PropertyValueElement
                 board={board}
                 readOnly={false}
@@ -108,7 +99,7 @@ describe('components/propertyValueElement', () => {
         }
         card.fields.properties.property_url = ['http://localhost']
 
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <PropertyValueElement
                 board={board}
                 readOnly={false}
@@ -133,7 +124,7 @@ describe('components/propertyValueElement', () => {
         }
         card.fields.properties.property_url = ['http://localhost']
 
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <PropertyValueElement
                 board={board}
                 readOnly={false}
@@ -158,7 +149,7 @@ describe('components/propertyValueElement', () => {
         }
         card.fields.properties.person = ['value1', 'value2']
 
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <PropertyValueElement
                 board={board}
                 readOnly={false}
@@ -183,7 +174,7 @@ describe('components/propertyValueElement', () => {
         }
         card.fields.properties.date = ['invalid date']
 
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <PropertyValueElement
                 board={board}
                 readOnly={false}
diff --git a/webapp/src/components/sidebar/sidebar.test.tsx b/webapp/src/components/sidebar/sidebar.test.tsx
index ba59ab44a..87c769392 100644
--- a/webapp/src/components/sidebar/sidebar.test.tsx
+++ b/webapp/src/components/sidebar/sidebar.test.tsx
@@ -8,23 +8,14 @@ import {Provider as ReduxProvider} from 'react-redux'
 import {Router} from 'react-router-dom'
 
 import {render} from '@testing-library/react'
-
-import {IntlProvider} from 'react-intl'
-
 import userEvent from '@testing-library/user-event'
 
 import {UserWorkspace} from '../../user'
 
-import {mockMatchMedia} from '../../testUtils'
+import {mockMatchMedia, wrapIntl} from '../../testUtils'
 
 import Sidebar from './sidebar'
 
-const wrapProviders = (children: any) => {
-    return (
-        <IntlProvider locale='en'>{children}</IntlProvider>
-    )
-}
-
 beforeAll(() => {
     mockMatchMedia({matches: true})
 })
@@ -67,7 +58,7 @@ describe('components/sidebarSidebar', () => {
 
         const history = createMemoryHistory()
 
-        const component = wrapProviders(
+        const component = wrapIntl(
             <ReduxProvider store={store}>
                 <Router history={history}>
                     <Sidebar isDashboard={true}/>
@@ -105,7 +96,7 @@ describe('components/sidebarSidebar', () => {
 
         const history = createMemoryHistory()
 
-        const component = wrapProviders(
+        const component = wrapIntl(
             <ReduxProvider store={store}>
                 <Router history={history}>
                     <Sidebar/>
diff --git a/webapp/src/components/sidebar/sidebarSettingsMenu.test.tsx b/webapp/src/components/sidebar/sidebarSettingsMenu.test.tsx
index e27236f07..ecd9ab4eb 100644
--- a/webapp/src/components/sidebar/sidebarSettingsMenu.test.tsx
+++ b/webapp/src/components/sidebar/sidebarSettingsMenu.test.tsx
@@ -6,17 +6,15 @@ import {Provider as ReduxProvider} from 'react-redux'
 
 import {render} from '@testing-library/react'
 
-import {IntlProvider} from 'react-intl'
-
 import userEvent from '@testing-library/user-event'
 import configureStore from 'redux-mock-store'
 
+import {wrapIntl} from '../../testUtils'
+
 import {defaultThemeName} from '../../theme'
 
 import SidebarSettingsMenu from './sidebarSettingsMenu'
 
-const wrapIntl = (children: any) => <IntlProvider locale='en'>{children}</IntlProvider>
-
 describe('components/sidebar/SidebarSettingsMenu', () => {
     const mockStore = configureStore([])
     let store = mockStore({})
diff --git a/webapp/src/components/table/calculation/calculationRow.test.tsx b/webapp/src/components/table/calculation/calculationRow.test.tsx
index 0ec5f5cd6..d8624a60d 100644
--- a/webapp/src/components/table/calculation/calculationRow.test.tsx
+++ b/webapp/src/components/table/calculation/calculationRow.test.tsx
@@ -1,9 +1,5 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-
-import {DndProvider} from 'react-dnd'
-import {HTML5Backend} from 'react-dnd-html5-backend'
-import {IntlProvider} from 'react-intl'
 import React from 'react'
 
 import {render} from '@testing-library/react'
@@ -12,6 +8,7 @@ import '@testing-library/jest-dom'
 import {TestBlockFactory} from '../../../test/testBlockFactory'
 import {FetchMock} from '../../../test/fetchMock'
 import 'isomorphic-fetch'
+import {wrapDNDIntl} from '../../../testUtils'
 
 import CalculationRow from './calculationRow'
 
@@ -21,14 +18,6 @@ beforeEach(() => {
     FetchMock.fn.mockReset()
 })
 
-const wrapProviders = (children: any) => {
-    return (
-        <DndProvider backend={HTML5Backend}>
-            <IntlProvider locale='en'>{children}</IntlProvider>
-        </DndProvider>
-    )
-}
-
 describe('components/table/calculation/CalculationRow', () => {
     const board = TestBlockFactory.createBoard()
     board.fields.cardProperties.push({
@@ -66,7 +55,7 @@ describe('components/table/calculation/CalculationRow', () => {
     test('should render three calculation elements', async () => {
         FetchMock.fn.mockReturnValueOnce(FetchMock.jsonResponse(JSON.stringify([board, view, card])))
 
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <CalculationRow
                 board={board}
                 cards={[card, card2]}
@@ -88,7 +77,7 @@ describe('components/table/calculation/CalculationRow', () => {
             property_4: 'countUniqueValue',
         }
 
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <CalculationRow
                 board={board}
                 cards={[card, card2]}
diff --git a/webapp/src/components/table/table.test.tsx b/webapp/src/components/table/table.test.tsx
index 5f2d91574..03dccfe44 100644
--- a/webapp/src/components/table/table.test.tsx
+++ b/webapp/src/components/table/table.test.tsx
@@ -6,13 +6,9 @@ import {Provider as ReduxProvider} from 'react-redux'
 import {render} from '@testing-library/react'
 import configureStore from 'redux-mock-store'
 import '@testing-library/jest-dom'
-import {IntlProvider} from 'react-intl'
 
 import 'isomorphic-fetch'
 
-import {DndProvider} from 'react-dnd'
-import {HTML5Backend} from 'react-dnd-html5-backend'
-
 import {TestBlockFactory} from '../../test/testBlockFactory'
 import {FetchMock} from '../../test/fetchMock'
 import {BoardView} from '../../blocks/boardView'
@@ -21,6 +17,8 @@ import {IUser} from '../../user'
 
 import {Utils} from '../../utils'
 
+import {wrapDNDIntl} from '../../testUtils'
+
 import Table from './table'
 
 global.fetch = FetchMock.fn
@@ -29,14 +27,6 @@ beforeEach(() => {
     FetchMock.fn.mockReset()
 })
 
-const wrapProviders = (children: any) => {
-    return (
-        <DndProvider backend={HTML5Backend}>
-            <IntlProvider locale='en'>{children}</IntlProvider>
-        </DndProvider>
-    )
-}
-
 describe('components/table/Table', () => {
     const board = TestBlockFactory.createBoard()
     const view = TestBlockFactory.createBoardView(board)
@@ -80,7 +70,7 @@ describe('components/table/Table', () => {
         const mockStore = configureStore([])
         const store = mockStore(state)
 
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <Table
                     board={board}
@@ -108,7 +98,7 @@ describe('components/table/Table', () => {
         const mockStore = configureStore([])
         const store = mockStore(state)
 
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <Table
                     board={board}
@@ -137,7 +127,7 @@ describe('components/table/Table', () => {
         const mockStore = configureStore([])
         const store = mockStore(state)
 
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <Table
                     board={board}
@@ -222,7 +212,7 @@ describe('components/table/Table extended', () => {
             },
         })
 
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <Table
                     board={board}
@@ -301,7 +291,7 @@ describe('components/table/Table extended', () => {
             },
         })
 
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <Table
                     board={board}
@@ -358,7 +348,7 @@ describe('components/table/Table extended', () => {
             },
         })
 
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <Table
                     board={board}
@@ -442,7 +432,7 @@ describe('components/table/Table extended', () => {
             },
         })
 
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <Table
                     board={board}
diff --git a/webapp/src/components/table/tableGroupHeaderRow.test.tsx b/webapp/src/components/table/tableGroupHeaderRow.test.tsx
index 6d04a2273..ef1dc1089 100644
--- a/webapp/src/components/table/tableGroupHeaderRow.test.tsx
+++ b/webapp/src/components/table/tableGroupHeaderRow.test.tsx
@@ -4,29 +4,19 @@
 import React from 'react'
 import {fireEvent, render} from '@testing-library/react'
 import '@testing-library/jest-dom'
-import {IntlProvider} from 'react-intl'
 
 import 'isomorphic-fetch'
 
-import {DndProvider} from 'react-dnd'
-import {HTML5Backend} from 'react-dnd-html5-backend'
-
 import {act} from 'react-dom/test-utils'
 
 import userEvent from '@testing-library/user-event'
 
+import {wrapDNDIntl} from '../../testUtils'
+
 import {TestBlockFactory} from '../../test/testBlockFactory'
 
 import TableGroupHeaderRowElement from './tableGroupHeaderRow'
 
-const wrapProviders = (children: any) => {
-    return (
-        <DndProvider backend={HTML5Backend}>
-            <IntlProvider locale='en'>{children}</IntlProvider>
-        </DndProvider>
-    )
-}
-
 const board = TestBlockFactory.createBoard()
 const view = TestBlockFactory.createBoardView(board)
 
@@ -52,7 +42,7 @@ const boardTreeGroup = {
 }
 
 test('should match snapshot, no groups', async () => {
-    const component = wrapProviders(
+    const component = wrapDNDIntl(
         <TableGroupHeaderRowElement
             board={board}
             activeView={view}
@@ -75,7 +65,7 @@ test('should match snapshot, no groups', async () => {
 })
 
 test('should match snapshot with Group', async () => {
-    const component = wrapProviders(
+    const component = wrapDNDIntl(
         <TableGroupHeaderRowElement
             board={board}
             activeView={view}
@@ -92,7 +82,7 @@ test('should match snapshot with Group', async () => {
 })
 
 test('should match snapshot on read only', async () => {
-    const component = wrapProviders(
+    const component = wrapDNDIntl(
         <TableGroupHeaderRowElement
             board={board}
             activeView={view}
@@ -114,7 +104,7 @@ test('should match snapshot, hide group', async () => {
     const collapsedOptionsView = TestBlockFactory.createBoardView(board)
     collapsedOptionsView.fields.collapsedOptionIds = [boardTreeGroup.option.id]
 
-    const component = wrapProviders(
+    const component = wrapDNDIntl(
         <TableGroupHeaderRowElement
             board={board}
             activeView={collapsedOptionsView}
@@ -141,7 +131,7 @@ test('should match snapshot, hide group', async () => {
 test('should match snapshot, add new', async () => {
     const addNew = jest.fn()
 
-    const component = wrapProviders(
+    const component = wrapDNDIntl(
         <TableGroupHeaderRowElement
             board={board}
             activeView={view}
@@ -167,7 +157,7 @@ test('should match snapshot, add new', async () => {
 })
 
 test('should match snapshot, edit title', async () => {
-    const component = wrapProviders(
+    const component = wrapDNDIntl(
         <TableGroupHeaderRowElement
             board={board}
             activeView={view}
diff --git a/webapp/src/components/table/tableHeader.test.tsx b/webapp/src/components/table/tableHeader.test.tsx
index b8997a837..69c254921 100644
--- a/webapp/src/components/table/tableHeader.test.tsx
+++ b/webapp/src/components/table/tableHeader.test.tsx
@@ -4,24 +4,14 @@
 import React from 'react'
 import {render} from '@testing-library/react'
 import '@testing-library/jest-dom'
-import {IntlProvider} from 'react-intl'
 
 import 'isomorphic-fetch'
-import {DndProvider} from 'react-dnd'
-import {HTML5Backend} from 'react-dnd-html5-backend'
+import {wrapDNDIntl} from '../../testUtils'
 
 import {TestBlockFactory} from '../../test/testBlockFactory'
 
 import TableHeader from './tableHeader'
 
-const wrapProviders = (children: any) => {
-    return (
-        <DndProvider backend={HTML5Backend}>
-            <IntlProvider locale='en'>{children}</IntlProvider>
-        </DndProvider>
-    )
-}
-
 describe('components/table/TableHeaderMenu', () => {
     const board = TestBlockFactory.createBoard()
     const view = TestBlockFactory.createBoardView(board)
@@ -31,7 +21,7 @@ describe('components/table/TableHeaderMenu', () => {
 
     test('should match snapshot, title column', async () => {
         const onAutoSizeColumn = jest.fn()
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <TableHeader
                 readonly={false}
                 sorted={'none'}
diff --git a/webapp/src/components/table/tableHeaderMenu.test.tsx b/webapp/src/components/table/tableHeaderMenu.test.tsx
index 4c8c1ca53..0010cd6c4 100644
--- a/webapp/src/components/table/tableHeaderMenu.test.tsx
+++ b/webapp/src/components/table/tableHeaderMenu.test.tsx
@@ -3,8 +3,9 @@
 
 import React from 'react'
 import {fireEvent, render} from '@testing-library/react'
+
 import '@testing-library/jest-dom'
-import {IntlProvider} from 'react-intl'
+import {wrapIntl} from '../../testUtils'
 
 import 'isomorphic-fetch'
 
@@ -33,8 +34,6 @@ beforeEach(() => {
     FetchMock.fn.mockReset()
 })
 
-const wrapIntl = (children: any) => <IntlProvider locale='en'>{children}</IntlProvider>
-
 describe('components/table/TableHeaderMenu', () => {
     const board = TestBlockFactory.createBoard()
     const view = TestBlockFactory.createBoardView(board)
diff --git a/webapp/src/components/table/tableRow.test.tsx b/webapp/src/components/table/tableRow.test.tsx
index f7f264178..d8da77b33 100644
--- a/webapp/src/components/table/tableRow.test.tsx
+++ b/webapp/src/components/table/tableRow.test.tsx
@@ -5,26 +5,16 @@ import React from 'react'
 import {Provider as ReduxProvider} from 'react-redux'
 import {render} from '@testing-library/react'
 import configureStore from 'redux-mock-store'
+
 import '@testing-library/jest-dom'
-import {IntlProvider} from 'react-intl'
+import {wrapDNDIntl} from '../../testUtils'
 
 import 'isomorphic-fetch'
 
-import {DndProvider} from 'react-dnd'
-import {HTML5Backend} from 'react-dnd-html5-backend'
-
 import {TestBlockFactory} from '../../test/testBlockFactory'
 
 import TableRow from './tableRow'
 
-const wrapProviders = (children: any) => {
-    return (
-        <DndProvider backend={HTML5Backend}>
-            <IntlProvider locale='en'>{children}</IntlProvider>
-        </DndProvider>
-    )
-}
-
 describe('components/table/TableRow', () => {
     const board = TestBlockFactory.createBoard()
     const view = TestBlockFactory.createBoardView(board)
@@ -55,7 +45,7 @@ describe('components/table/TableRow', () => {
 
     test('should match snapshot', async () => {
         const store = mockStore(state)
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <TableRow
                     board={board}
@@ -80,7 +70,7 @@ describe('components/table/TableRow', () => {
 
     test('should match snapshot, read-only', async () => {
         const store = mockStore(state)
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <TableRow
                     board={board}
@@ -105,7 +95,7 @@ describe('components/table/TableRow', () => {
 
     test('should match snapshot, isSelected', async () => {
         const store = mockStore(state)
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <TableRow
                     board={board}
@@ -133,7 +123,7 @@ describe('components/table/TableRow', () => {
         view.fields.hiddenOptionIds = []
 
         const store = mockStore(state)
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <TableRow
                     board={board}
@@ -160,7 +150,7 @@ describe('components/table/TableRow', () => {
         view.fields.visiblePropertyIds = ['property1', 'property2']
 
         const store = mockStore(state)
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <TableRow
                     board={board}
@@ -186,7 +176,7 @@ describe('components/table/TableRow', () => {
         view.fields.visiblePropertyIds = ['property1', 'property2']
 
         const store = mockStore(state)
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <TableRow
                     board={board}
diff --git a/webapp/src/components/table/tableRows.test.tsx b/webapp/src/components/table/tableRows.test.tsx
index c3314cc31..c5fe112bb 100644
--- a/webapp/src/components/table/tableRows.test.tsx
+++ b/webapp/src/components/table/tableRows.test.tsx
@@ -6,7 +6,6 @@ import {Provider as ReduxProvider} from 'react-redux'
 import {fireEvent, render} from '@testing-library/react'
 import configureStore from 'redux-mock-store'
 import '@testing-library/jest-dom'
-import {IntlProvider} from 'react-intl'
 
 import 'isomorphic-fetch'
 
@@ -19,6 +18,7 @@ import userEvent from '@testing-library/user-event'
 
 import {TestBlockFactory} from '../../test/testBlockFactory'
 import {FetchMock} from '../../test/fetchMock'
+import {wrapDNDIntl} from '../../testUtils'
 
 import TableRows from './tableRows'
 
@@ -28,14 +28,6 @@ beforeEach(() => {
     FetchMock.fn.mockReset()
 })
 
-const wrapProviders = (children: any) => {
-    return (
-        <DndProvider backend={HTML5Backend}>
-            <IntlProvider locale='en'>{children}</IntlProvider>
-        </DndProvider>
-    )
-}
-
 describe('components/table/TableRows', () => {
     const board = TestBlockFactory.createBoard()
     const view = TestBlockFactory.createBoardView(board)
@@ -71,7 +63,7 @@ describe('components/table/TableRows', () => {
         const addCard = jest.fn()
 
         const store = mockStore(state)
-        const component = wrapProviders(
+        const component = wrapDNDIntl(
             <ReduxProvider store={store}>
                 <TableRows
                     board={board}
diff --git a/webapp/src/components/viewHeader/viewHeaderActionsMenu.test.tsx b/webapp/src/components/viewHeader/viewHeaderActionsMenu.test.tsx
index 96df3cbe8..08a6c0278 100644
--- a/webapp/src/components/viewHeader/viewHeaderActionsMenu.test.tsx
+++ b/webapp/src/components/viewHeader/viewHeaderActionsMenu.test.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactElement} from 'react'
+import React from 'react'
 import {render, screen} from '@testing-library/react'
 import {Provider as ReduxProvider} from 'react-redux'
 import configureStore from 'redux-mock-store'
@@ -9,15 +9,12 @@ import configureStore from 'redux-mock-store'
 import '@testing-library/jest-dom'
 import userEvent from '@testing-library/user-event'
 
-import {IntlProvider} from 'react-intl'
+import {wrapIntl} from '../../testUtils'
 
 import {TestBlockFactory} from '../../test/testBlockFactory'
 
 import ViewHeaderActionsMenu from './viewHeaderActionsMenu'
 
-const wrapIntl = (children: ReactElement) => (
-    <IntlProvider locale='en'>{children}</IntlProvider>
-)
 const board = TestBlockFactory.createBoard()
 const activeView = TestBlockFactory.createBoardView(board)
 const card = TestBlockFactory.createCard(board)
diff --git a/webapp/src/components/workspaceSwitcher/workspaceOptions.test.tsx b/webapp/src/components/workspaceSwitcher/workspaceOptions.test.tsx
index 6f17f6df3..77efc4c97 100644
--- a/webapp/src/components/workspaceSwitcher/workspaceOptions.test.tsx
+++ b/webapp/src/components/workspaceSwitcher/workspaceOptions.test.tsx
@@ -1,24 +1,15 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React from 'react'
-
 import configureStore from 'redux-mock-store'
-
-import {IntlProvider} from 'react-intl'
 import {Provider as ReduxProvider} from 'react-redux'
-
 import {render} from '@testing-library/react'
 
 import {UserWorkspace} from '../../user'
+import {wrapIntl} from '../../testUtils'
 
 import WorkspaceOptions from './workspaceOptions'
 
-const wrapProviders = (children: any) => {
-    return (
-        <IntlProvider locale='en'>{children}</IntlProvider>
-    )
-}
-
 describe('components/workspaceSwitcher/WorkspaceOptions', () => {
     const mockStore = configureStore([])
 
@@ -47,7 +38,7 @@ describe('components/workspaceSwitcher/WorkspaceOptions', () => {
             },
         })
 
-        const component = wrapProviders(
+        const component = wrapIntl(
             <ReduxProvider store={store}>
                 <WorkspaceOptions
                     onChange={() => {
@@ -68,7 +59,7 @@ describe('components/workspaceSwitcher/WorkspaceOptions', () => {
             },
         })
 
-        const component = wrapProviders(
+        const component = wrapIntl(
             <ReduxProvider store={store}>
                 <WorkspaceOptions
                     onChange={() => {
diff --git a/webapp/src/components/workspaceSwitcher/workspaceSwitcher.test.tsx b/webapp/src/components/workspaceSwitcher/workspaceSwitcher.test.tsx
index c13f60178..f5731b66f 100644
--- a/webapp/src/components/workspaceSwitcher/workspaceSwitcher.test.tsx
+++ b/webapp/src/components/workspaceSwitcher/workspaceSwitcher.test.tsx
@@ -7,18 +7,12 @@ import {Provider as ReduxProvider} from 'react-redux'
 
 import {render} from '@testing-library/react'
 
-import {IntlProvider} from 'react-intl'
+import {wrapIntl} from '../../testUtils'
 
 import {UserWorkspace} from '../../user'
 
 import WorkspaceOptions from './workspaceOptions'
 
-const wrapProviders = (children: any) => {
-    return (
-        <IntlProvider locale='en'>{children}</IntlProvider>
-    )
-}
-
 describe('components/workspaceSwitcher/WorkspaceSwitcher', () => {
     const mockStore = configureStore([])
 
@@ -47,7 +41,7 @@ describe('components/workspaceSwitcher/WorkspaceSwitcher', () => {
             },
         })
 
-        const component = wrapProviders(
+        const component = wrapIntl(
             <ReduxProvider store={store}>
                 <WorkspaceOptions
                     onChange={() => {}}
@@ -67,7 +61,7 @@ describe('components/workspaceSwitcher/WorkspaceSwitcher', () => {
             },
         })
 
-        const component = wrapProviders(
+        const component = wrapIntl(
             <ReduxProvider store={store}>
                 <WorkspaceOptions
                     onChange={() => {}}
diff --git a/webapp/src/pages/dashboard/centerContent.test.tsx b/webapp/src/pages/dashboard/centerContent.test.tsx
index 06875ec50..5658120b7 100644
--- a/webapp/src/pages/dashboard/centerContent.test.tsx
+++ b/webapp/src/pages/dashboard/centerContent.test.tsx
@@ -4,8 +4,6 @@ import React from 'react'
 import configureStore from 'redux-mock-store'
 import {Provider as ReduxProvider} from 'react-redux'
 
-import {IntlProvider} from 'react-intl'
-
 import {createMemoryHistory} from 'history'
 
 import {fireEvent, render} from '@testing-library/react'
@@ -14,16 +12,12 @@ import userEvent from '@testing-library/user-event'
 
 import {Router} from 'react-router-dom'
 
+import {wrapIntl} from '../../testUtils'
+
 import {UserWorkspace} from '../../user'
 
 import DashboardCenterContent from './centerContent'
 
-const wrapProviders = (children: any) => {
-    return (
-        <IntlProvider locale='en'>{children}</IntlProvider>
-    )
-}
-
 describe('pages/dashboard/CenterContent', () => {
     const mockStore = configureStore([])
     const workspace1: UserWorkspace = {
@@ -51,7 +45,7 @@ describe('pages/dashboard/CenterContent', () => {
             },
         })
 
-        const component = wrapProviders(
+        const component = wrapIntl(
             <ReduxProvider store={store}>
                 <DashboardCenterContent/>
             </ReduxProvider>,
@@ -67,7 +61,7 @@ describe('pages/dashboard/CenterContent', () => {
             },
         })
 
-        const component = wrapProviders(
+        const component = wrapIntl(
             <ReduxProvider store={store}>
                 <DashboardCenterContent/>
             </ReduxProvider>,
@@ -86,7 +80,7 @@ describe('pages/dashboard/CenterContent', () => {
             },
         })
 
-        const component = wrapProviders(
+        const component = wrapIntl(
             <ReduxProvider store={store}>
                 <DashboardCenterContent/>
             </ReduxProvider>,
@@ -107,7 +101,7 @@ describe('pages/dashboard/CenterContent', () => {
 
         const history = createMemoryHistory()
 
-        const component = wrapProviders(
+        const component = wrapIntl(
             <Router history={history}>
                 <ReduxProvider store={store}>
                     <DashboardCenterContent/>
diff --git a/webapp/src/pages/dashboard/dashboardPage.test.tsx b/webapp/src/pages/dashboard/dashboardPage.test.tsx
index f8a4ee84a..94dcb10e7 100644
--- a/webapp/src/pages/dashboard/dashboardPage.test.tsx
+++ b/webapp/src/pages/dashboard/dashboardPage.test.tsx
@@ -1,8 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React from 'react'
-import {IntlProvider} from 'react-intl'
-
 import {render} from '@testing-library/react'
 
 import configureStore from 'redux-mock-store'
@@ -17,16 +15,10 @@ import {UserWorkspace} from '../../user'
 
 import {FetchMock} from '../../test/fetchMock'
 
-import {mockMatchMedia} from '../../testUtils'
+import {mockMatchMedia, wrapIntl} from '../../testUtils'
 
 import DashboardPage from './dashboardPage'
 
-const wrapProviders = (children: any) => {
-    return (
-        <IntlProvider locale='en'>{children}</IntlProvider>
-    )
-}
-
 beforeEach(() => {
     FetchMock.fn.mockReset()
 })
@@ -73,7 +65,7 @@ describe('pages/dashboard/DashboardPage', () => {
 
         const history = createMemoryHistory()
 
-        const component = wrapProviders(
+        const component = wrapIntl(
             <ReduxProvider store={store}>
                 <Router history={history}>
                     <DashboardPage/>
diff --git a/webapp/src/testUtils.tsx b/webapp/src/testUtils.tsx
index 3f81ad3a3..920deea48 100644
--- a/webapp/src/testUtils.tsx
+++ b/webapp/src/testUtils.tsx
@@ -2,10 +2,19 @@
 // See LICENSE.txt for license information.
 import {IntlProvider} from 'react-intl'
 import React from 'react'
+import {DndProvider} from 'react-dnd'
+import {HTML5Backend} from 'react-dnd-html5-backend'
 import configureStore, {MockStoreEnhanced} from 'redux-mock-store'
 import {Middleware} from 'redux'
 
 export const wrapIntl = (children?: React.ReactNode): JSX.Element => <IntlProvider locale='en'>{children}</IntlProvider>
+export const wrapDNDIntl = (children?: React.ReactNode): JSX.Element => {
+    return (
+        <DndProvider backend={HTML5Backend}>
+            {wrapIntl(children)}
+        </DndProvider>
+    )
+}
 
 export function mockDOM(): void {
     window.focus = jest.fn()
diff --git a/webapp/src/widgets/propertyMenu.test.tsx b/webapp/src/widgets/propertyMenu.test.tsx
index 50de45670..9ba812a07 100644
--- a/webapp/src/widgets/propertyMenu.test.tsx
+++ b/webapp/src/widgets/propertyMenu.test.tsx
@@ -4,12 +4,11 @@
 import React from 'react'
 import {fireEvent, render} from '@testing-library/react'
 import '@testing-library/jest-dom'
-import {IntlProvider} from 'react-intl'
+
+import {wrapIntl} from '../testUtils'
 
 import PropertyMenu from './propertyMenu'
 
-const wrapIntl = (children: any) => <IntlProvider locale='en'>{children}</IntlProvider>
-
 describe('widgets/PropertyMenu', () => {
     beforeEach(() => {
         // Quick fix to disregard console error when unmounting a component