diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/bytes/bytes.test.js b/src/ui/public/field_editor/components/field_format_editor/editors/bytes/bytes.test.js
index 09786c7758671..6c7e42f7f8fcc 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/bytes/bytes.test.js
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/bytes/bytes.test.js
@@ -34,6 +34,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('BytesFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(BytesFormatEditor.formatId).toEqual('bytes');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <BytesFormatEditor
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/color/__snapshots__/color.test.js.snap b/src/ui/public/field_editor/components/field_format_editor/editors/color/__snapshots__/color.test.js.snap
index ff272f88ee332..299a9f91ac705 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/color/__snapshots__/color.test.js.snap
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/color/__snapshots__/color.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ColorFormatEditor should render multiple colors 1`] = `
+exports[`ColorFormatEditorComponent should render multiple colors 1`] = `
 <React.Fragment>
   <EuiBasicTable
     columns={
@@ -84,7 +84,7 @@ exports[`ColorFormatEditor should render multiple colors 1`] = `
 </React.Fragment>
 `;
 
-exports[`ColorFormatEditor should render other type normally (range field) 1`] = `
+exports[`ColorFormatEditorComponent should render other type normally (range field) 1`] = `
 <React.Fragment>
   <EuiBasicTable
     columns={
@@ -161,7 +161,7 @@ exports[`ColorFormatEditor should render other type normally (range field) 1`] =
 </React.Fragment>
 `;
 
-exports[`ColorFormatEditor should render string type normally (regex field) 1`] = `
+exports[`ColorFormatEditorComponent should render string type normally (regex field) 1`] = `
 <React.Fragment>
   <EuiBasicTable
     columns={
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/color/color.js b/src/ui/public/field_editor/components/field_format_editor/editors/color/color.js
index 30ea73d78efdc..b675810f9495f 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/color/color.js
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/color/color.js
@@ -36,8 +36,6 @@ import { DEFAULT_COLOR } from '../../../../../../../core_plugins/kibana/common/f
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
 export class ColorFormatEditorComponent extends DefaultFormatEditor {
-  static formatId = 'color';
-
   constructor(props) {
     super(props);
     this.onChange({
@@ -203,3 +201,4 @@ export class ColorFormatEditorComponent extends DefaultFormatEditor {
 }
 
 export const ColorFormatEditor = injectI18n(ColorFormatEditorComponent);
+ColorFormatEditor.formatId = 'color';
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/color/color.test.js b/src/ui/public/field_editor/components/field_format_editor/editors/color/color.test.js
index 38dc215544805..d403492d800ff 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/color/color.test.js
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/color/color.test.js
@@ -20,7 +20,7 @@
 import React from 'react';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 
-import { ColorFormatEditorComponent } from './color';
+import { ColorFormatEditor, ColorFormatEditorComponent } from './color';
 import { DEFAULT_COLOR } from '../../../../../../../core_plugins/kibana/common/field_formats/types/color_default';
 
 const fieldType = 'string';
@@ -34,6 +34,12 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('ColorFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(ColorFormatEditor.formatId).toEqual('color');
+  });
+});
+
+describe('ColorFormatEditorComponent', () => {
   it('should render string type normally (regex field)', async () => {
     const component = shallowWithIntl(
       <ColorFormatEditorComponent
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/date/date.test.js b/src/ui/public/field_editor/components/field_format_editor/editors/date/date.test.js
index a5e46e6d39aed..ce7cdcc7c4b66 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/date/date.test.js
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/date/date.test.js
@@ -34,6 +34,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('DateFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(DateFormatEditor.formatId).toEqual('date');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <DateFormatEditor
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/duration/duration.test.js b/src/ui/public/field_editor/components/field_format_editor/editors/duration/duration.test.js
index 279ecaab1f2b4..d68532dc0bced 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/duration/duration.test.js
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/duration/duration.test.js
@@ -57,6 +57,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('DurationFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(DurationFormatEditor.formatId).toEqual('duration');
+  });
+
   it('should render human readable output normally', async () => {
     const component = shallow(
       <DurationFormatEditor
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/number/number.test.js b/src/ui/public/field_editor/components/field_format_editor/editors/number/number.test.js
index 77a85e06a844b..197bf1f0b7c9e 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/number/number.test.js
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/number/number.test.js
@@ -34,6 +34,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('NumberFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(NumberFormatEditor.formatId).toEqual('number');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <NumberFormatEditor
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/percent/percent.test.js b/src/ui/public/field_editor/components/field_format_editor/editors/percent/percent.test.js
index e699c366fc887..f3b4a1370ea1a 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/percent/percent.test.js
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/percent/percent.test.js
@@ -34,6 +34,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('PercentFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(PercentFormatEditor.formatId).toEqual('percent');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <PercentFormatEditor
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap b/src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap
index cd06e9f47361a..51d0d13d8b222 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StaticLookupFormatEditor should render multiple lookup entries and unknown key value 1`] = `
+exports[`StaticLookupFormatEditorComponent should render multiple lookup entries and unknown key value 1`] = `
 <React.Fragment>
   <EuiBasicTable
     columns={
@@ -94,7 +94,7 @@ exports[`StaticLookupFormatEditor should render multiple lookup entries and unkn
 </React.Fragment>
 `;
 
-exports[`StaticLookupFormatEditor should render normally 1`] = `
+exports[`StaticLookupFormatEditorComponent should render normally 1`] = `
 <React.Fragment>
   <EuiBasicTable
     columns={
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/static_lookup.js b/src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/static_lookup.js
index b888c2e730e83..153a598bb184b 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/static_lookup.js
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/static_lookup.js
@@ -34,7 +34,6 @@ import {
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
 export class StaticLookupFormatEditorComponent extends DefaultFormatEditor {
-  static formatId = 'static_lookup';
 
   onLookupChange = (newLookupParams, index) => {
     const lookupEntries = [...this.props.formatParams.lookupEntries];
@@ -164,3 +163,4 @@ export class StaticLookupFormatEditorComponent extends DefaultFormatEditor {
 }
 
 export const StaticLookupFormatEditor = injectI18n(StaticLookupFormatEditorComponent);
+StaticLookupFormatEditor.formatId = 'static_lookup';
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/static_lookup.test.js b/src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/static_lookup.test.js
index 6297179ed3011..59c54990cf4e2 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/static_lookup.test.js
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/static_lookup.test.js
@@ -20,7 +20,7 @@
 import React from 'react';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 
-import { StaticLookupFormatEditorComponent } from './static_lookup';
+import { StaticLookupFormatEditor, StaticLookupFormatEditorComponent } from './static_lookup';
 
 const fieldType = 'string';
 const format = {
@@ -33,8 +33,13 @@ const formatParams = {
 const onChange = jest.fn();
 const onError = jest.fn();
 
-
 describe('StaticLookupFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(StaticLookupFormatEditor.formatId).toEqual('static_lookup');
+  });
+});
+
+describe('StaticLookupFormatEditorComponent', () => {
   it('should render normally', async () => {
     const component = shallowWithIntl(
       <StaticLookupFormatEditorComponent
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/string/string.test.js b/src/ui/public/field_editor/components/field_format_editor/editors/string/string.test.js
index 59638d1e97109..b801b9aa4b6db 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/string/string.test.js
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/string/string.test.js
@@ -42,6 +42,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('StringFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(StringFormatEditor.formatId).toEqual('string');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <StringFormatEditor
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/truncate/truncate.test.js b/src/ui/public/field_editor/components/field_format_editor/editors/truncate/truncate.test.js
index 4b2c752246f2f..a0888f3e9b3ad 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/truncate/truncate.test.js
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/truncate/truncate.test.js
@@ -34,6 +34,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('TruncateFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(TruncateFormatEditor.formatId).toEqual('truncate');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <TruncateFormatEditor
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/url/url.test.js b/src/ui/public/field_editor/components/field_format_editor/editors/url/url.test.js
index 726a98f798bbc..258d2d0b67c0b 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/url/url.test.js
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/url/url.test.js
@@ -43,6 +43,10 @@ jest.mock('ui/chrome', () => ({
 
 
 describe('UrlFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(UrlFormatEditor.formatId).toEqual('url');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <UrlFormatEditor