diff --git a/webapp/src/components/__snapshots__/markdownEditor.test.tsx.snap b/webapp/src/components/__snapshots__/markdownEditor.test.tsx.snap
new file mode 100644
index 000000000..a6a07080a
--- /dev/null
+++ b/webapp/src/components/__snapshots__/markdownEditor.test.tsx.snap
@@ -0,0 +1,398 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/markdownEditor return markdownEditor, write hello and verify blur 1`] = `
+
+`;
+
+exports[`components/markdownEditor return markdownEditor, write hi and verify change 1`] = `
+
+`;
+
+exports[`components/markdownEditor should match snapshot 1`] = `
+
+`;
diff --git a/webapp/src/components/markdownEditor.test.tsx b/webapp/src/components/markdownEditor.test.tsx
new file mode 100644
index 000000000..479074f12
--- /dev/null
+++ b/webapp/src/components/markdownEditor.test.tsx
@@ -0,0 +1,172 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import {act, fireEvent, render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+
+import {mocked} from 'ts-jest/utils'
+
+import {mockDOM, wrapDNDIntl} from '../testUtils'
+
+import {Utils} from '../utils'
+
+import {MarkdownEditor} from './markdownEditor'
+
+jest.mock('../utils')
+const mockedUtils = mocked(Utils, true)
+jest.useFakeTimers()
+
+describe('components/markdownEditor', () => {
+ beforeAll(mockDOM)
+ beforeEach(jest.clearAllMocks)
+ test('should match snapshot', async () => {
+ let container
+ await act(async () => {
+ const result = render(wrapDNDIntl(
+ ,
+ ))
+ container = result.container
+ })
+ expect(container).toMatchSnapshot()
+ })
+ test('return markdownEditor, write hello and verify blur', async () => {
+ const onMockedBlur = jest.fn()
+ let container
+ await act(async () => {
+ const result = render(wrapDNDIntl(
+ ,
+ ))
+ 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')
+ fireEvent.blur(elementsTextArea[1])
+ expect(onMockedBlur).toBeCalledTimes(1)
+ expect(onMockedBlur).toBeCalledWith('hello')
+ expect(container).toMatchSnapshot()
+ })
+
+ test('return markdownEditor, write hi and verify change', async () => {
+ const onMockedChange = jest.fn()
+ let container
+ await act(async () => {
+ const result = render(wrapDNDIntl(
+ ,
+ ))
+ 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)
+ const elementText = elementsTextArea[1]
+ userEvent.type(elementText, 'h')
+ expect(onMockedChange).toBeCalledTimes(1)
+ expect(onMockedChange).toBeCalledWith('h')
+ userEvent.type(elementText, 'i')
+ expect(onMockedChange).toBeCalledTimes(2)
+ expect(onMockedChange).toBeCalledWith('hi')
+ expect(container).toMatchSnapshot()
+ })
+ test('return markdownEditor and verify accept', async () => {
+ const onMockedAccept = jest.fn()
+ await act(async () => {
+ render(wrapDNDIntl(
+ ,
+ ))
+ 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)
+ fireEvent.click(elementsTextArea[1])
+ fireEvent.keyDown(elementsTextArea[1], {metaKey: true, keyCode: 13})
+ act(() => {
+ jest.runOnlyPendingTimers()
+ })
+ expect(mockedUtils.log).toBeCalledTimes(1)
+ expect(onMockedAccept).toBeCalledTimes(1)
+ })
+ test('return markdownEditor and verify blur on escape', async () => {
+ const onMockedBlur = jest.fn()
+ await act(async () => {
+ render(wrapDNDIntl(
+ ,
+ ))
+ 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)
+ fireEvent.click(elementsTextArea[1])
+ fireEvent.keyDown(elementsTextArea[1], {keyCode: 27})
+ expect(onMockedBlur).toBeCalledTimes(1)
+ })
+})