diff --git a/webapp/src/components/content/__snapshots__/textElement.test.tsx.snap b/webapp/src/components/content/__snapshots__/textElement.test.tsx.snap
new file mode 100644
index 000000000..c7ad7bd12
--- /dev/null
+++ b/webapp/src/components/content/__snapshots__/textElement.test.tsx.snap
@@ -0,0 +1,267 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/content/TextElement return a textElement 1`] = `
+
+`;
+
+exports[`components/content/TextElement return a textElement and do a blur event 1`] = `
+
+`;
diff --git a/webapp/src/components/content/textElement.test.tsx b/webapp/src/components/content/textElement.test.tsx
new file mode 100644
index 000000000..bacbdc0e3
--- /dev/null
+++ b/webapp/src/components/content/textElement.test.tsx
@@ -0,0 +1,94 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+import {render, screen, fireEvent, act} from '@testing-library/react'
+
+import '@testing-library/jest-dom'
+
+import {mocked} from 'ts-jest/utils'
+
+import userEvent from '@testing-library/user-event'
+
+import {TextBlock} from '../../blocks/textBlock'
+
+import {mockDOM, wrapDNDIntl} from '../../testUtils'
+
+import {Utils} from '../../utils'
+
+import mutator from '../../mutator'
+
+import TextElement from './textElement'
+
+jest.mock('../../utils')
+jest.mock('../../mutator')
+const mockedUtils = mocked(Utils, true)
+const mockedMutator = mocked(mutator, true)
+mockedUtils.createGuid.mockReturnValue('test-id')
+const defaultBlock: TextBlock = {
+ id: 'test-id',
+ workspaceId: 'test-id',
+ parentId: 'test-id',
+ rootId: 'test-id',
+ modifiedBy: 'test-user-id',
+ schema: 0,
+ type: 'text',
+ title: '',
+ fields: {},
+ createdBy: 'test-user-id',
+ createAt: 0,
+ updateAt: 0,
+ deleteAt: 0,
+}
+describe('components/content/TextElement', () => {
+ beforeAll(() => {
+ mockDOM()
+ })
+
+ test('return a textElement', async () => {
+ const component = wrapDNDIntl(
+ ,
+ )
+
+ let container: Element | undefined
+ await act(async () => {
+ const result = render(component)
+ container = result.container
+ const elementMarkDown = screen.getByRole('textbox', {hidden: true})
+ userEvent.click(elementMarkDown)
+ })
+ const elementsTextArea = screen.getAllByRole('textbox', {hidden: true})
+ expect(elementsTextArea).not.toBeNull()
+ expect(elementsTextArea.length).toBeGreaterThanOrEqual(2)
+ userEvent.type(elementsTextArea[1], 'hello')
+ expect(container).toMatchSnapshot()
+ })
+ test('return a textElement and do a blur event', async () => {
+ const component = wrapDNDIntl(
+ ,
+ )
+
+ let container: Element | undefined
+ let elementMarkDown: Element | undefined
+
+ await act(async () => {
+ const result = render(component)
+ container = result.container
+ elementMarkDown = screen.getByRole('textbox', {hidden: true})
+ userEvent.click(elementMarkDown)
+ })
+ const elementsTextArea = screen.getAllByRole('textbox', {hidden: true})
+ expect(elementsTextArea).not.toBeNull()
+ expect(elementsTextArea.length).toBeGreaterThanOrEqual(2)
+ userEvent.type(elementsTextArea[1], 'hello')
+ fireEvent.blur(elementsTextArea[1])
+ expect(container).toMatchSnapshot()
+ expect(mockedMutator.changeTitle).toBeCalledTimes(1)
+ })
+})