diff --git a/catalog/app/components/FileEditor/FileEditor.spec.tsx b/catalog/app/components/FileEditor/FileEditor.spec.tsx
new file mode 100644
index 00000000000..82d7dc32b82
--- /dev/null
+++ b/catalog/app/components/FileEditor/FileEditor.spec.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react'
+import renderer from 'react-test-renderer'
+import { renderHook } from '@testing-library/react-hooks'
+
+import AsyncResult from 'utils/AsyncResult'
+
+import { useState } from './State'
+import { Editor } from './FileEditor'
+
+jest.mock('utils/AWS', () => ({ S3: { use: () => {} } }))
+
+jest.mock('./Skeleton', () => () => <div>Skeleton</div>)
+
+jest.mock('utils/NamedRoutes', () => ({
+  ...jest.requireActual('utils/NamedRoutes'),
+  use: jest.fn(() => ({ urls: {} })),
+}))
+
+jest.mock(
+  'react-router-dom',
+  jest.fn(() => ({
+    ...jest.requireActual('react-router-dom'),
+    useParams: jest.fn(() => ({ bucket: 'b', key: 'k' })),
+    useLocation: jest.fn(() => ({ search: '?edit=true' })),
+  })),
+)
+
+jest.mock(
+  'components/Preview/Display',
+  jest.fn(() => () => <h1>Display error</h1>),
+)
+
+jest.mock(
+  'components/Preview/loaders/utils',
+  jest.fn(() => ({
+    ...jest.requireActual('components/Preview/loaders/utils'),
+    useObjectGetter: () => ({
+      case: (cases: any) => AsyncResult.case(cases, AsyncResult.Ok({ Body: 'body' })),
+    }),
+  })),
+)
+
+jest.mock(
+  './TextEditor',
+  jest.fn(() => () => <h1>Text Editor</h1>),
+)
+
+jest.mock(
+  'constants/config',
+  jest.fn(() => ({})),
+)
+
+const loadMode = jest.fn((): 'fulfilled' => {
+  throw Promise.resolve(null)
+})
+
+jest.mock(
+  './loader',
+  jest.fn(() => ({
+    loadMode: jest.fn(() => loadMode()),
+    detect: () => 'text',
+    useWriteData: () => {},
+  })),
+)
+
+describe('components/FileEditor/FileEditor', () => {
+  describe('Editor', () => {
+    const handle = { bucket: 'b', key: 'k' }
+    const { result } = renderHook(() => useState(handle))
+    it('Show skeleton', () => {
+      const tree = renderer
+        .create(
+          <Editor
+            {...result.current}
+            className="root"
+            editing={{ brace: 'json' }}
+            handle={handle}
+          />,
+        )
+        .toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('Show TextEditor', () => {
+      loadMode.mockImplementation(() => 'fulfilled')
+      const tree = renderer
+        .create(
+          <Editor
+            {...result.current}
+            className="root"
+            editing={{ brace: 'json' }}
+            handle={handle}
+          />,
+        )
+        .toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+  })
+})
diff --git a/catalog/app/components/FileEditor/__snapshots__/FileEditor.spec.tsx.snap b/catalog/app/components/FileEditor/__snapshots__/FileEditor.spec.tsx.snap
new file mode 100644
index 00000000000..8f02abf331a
--- /dev/null
+++ b/catalog/app/components/FileEditor/__snapshots__/FileEditor.spec.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/FileEditor/FileEditor Editor Show TextEditor 1`] = `
+<div
+  className="makeStyles-tab-1 makeStyles-active-2"
+>
+  <h1>
+    Text Editor
+  </h1>
+</div>
+`;
+
+exports[`components/FileEditor/FileEditor Editor Show skeleton 1`] = `
+<div>
+  Skeleton
+</div>
+`;