diff --git a/webapp/src/components/content/__snapshots__/contentElement.test.tsx.snap b/webapp/src/components/content/__snapshots__/contentElement.test.tsx.snap
index 8b8f5102d..b5d330e98 100644
--- a/webapp/src/components/content/__snapshots__/contentElement.test.tsx.snap
+++ b/webapp/src/components/content/__snapshots__/contentElement.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/content/contentElement return an element 1`] = `
+exports[`components/content/contentElement should match snapshot for checkbox type 1`] = `
 <div>
   <div
     class="CheckboxElement"
diff --git a/webapp/src/components/content/contentElement.test.tsx b/webapp/src/components/content/contentElement.test.tsx
index 95c8bee97..77950c26f 100644
--- a/webapp/src/components/content/contentElement.test.tsx
+++ b/webapp/src/components/content/contentElement.test.tsx
@@ -1,52 +1,67 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
+import React, {ReactElement, ReactNode} from 'react'
+
+import '@testing-library/jest-dom'
+
 import {render} from '@testing-library/react'
 
 import {wrapIntl} from '../../testUtils'
 
 import {ContentBlock} from '../../blocks/contentBlock'
 
+import {CardDetailProvider} from '../cardDetail/cardDetailContext'
+import {TestBlockFactory} from '../../test/testBlockFactory'
+
 import ContentElement from './contentElement'
 
+const board = TestBlockFactory.createBoard()
+const card = TestBlockFactory.createCard(board)
+const contentBlock: ContentBlock = {
+    id: 'test-id',
+    workspaceId: '',
+    parentId: card.id,
+    rootId: card.rootId,
+    modifiedBy: 'test-user-id',
+    schema: 0,
+    type: 'checkbox',
+    title: 'test-title',
+    fields: {},
+    createdBy: 'test-user-id',
+    createAt: 0,
+    updateAt: 0,
+    deleteAt: 0,
+}
+
+const wrap = (child: ReactNode): ReactElement => (
+    wrapIntl(
+        <CardDetailProvider card={card}>
+            {child}
+        </CardDetailProvider>,
+    )
+)
+
 describe('components/content/contentElement', () => {
-    test('return an element', () => {
-        const contentBlock: ContentBlock = {
-            id: 'test-id',
-            workspaceId: '',
-            parentId: '',
-            rootId: '',
-            modifiedBy: 'test-user-id',
-            schema: 0,
-            type: 'checkbox',
-            title: 'test-title',
-            fields: {},
-            createdBy: 'test-user-id',
-            createAt: 0,
-            updateAt: 0,
-            deleteAt: 0,
-        }
-        const checkBoxElement = ContentElement({block: contentBlock, readonly: false})
-        const {container} = render(wrapIntl(checkBoxElement))
+    it('should match snapshot for checkbox type', () => {
+        const {container} = render(wrap(
+            <ContentElement
+                block={contentBlock}
+                readonly={false}
+                cords={{x: 0}}
+            />,
+        ))
         expect(container).toMatchSnapshot()
     })
 
-    test('return null', () => {
-        const contentBlock: ContentBlock = {
-            id: 'test-id',
-            workspaceId: '',
-            parentId: '',
-            rootId: '',
-            modifiedBy: 'test-user-id',
-            schema: 0,
-            type: 'unknown',
-            title: 'test-title',
-            fields: {},
-            createdBy: 'test-user-id',
-            createAt: 0,
-            updateAt: 0,
-            deleteAt: 0,
-        }
-        const contentElement = ContentElement({block: contentBlock, readonly: false})
-        expect(contentElement).toBeNull()
+    it('should return null for unknown type', () => {
+        const block: ContentBlock = {...contentBlock, type: 'unknown'}
+        const {container} = render(wrap(
+            <ContentElement
+                block={block}
+                readonly={false}
+                cords={{x: 0}}
+            />,
+        ))
+        expect(container).toBeEmptyDOMElement()
     })
 })