diff --git a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md
index 522c01124de820..1a885b2b2a0a2c 100644
--- a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md
+++ b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md
@@ -84,6 +84,7 @@ readonly links: {
         readonly indexPatterns: {
             readonly loadingData: string;
             readonly introduction: string;
+            readonly fieldFormattersNumber: string;
         };
         readonly addData: string;
         readonly kibana: string;
diff --git a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md
index 2bb885cba434f2..06752d7ca18dff 100644
--- a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md
+++ b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md
@@ -17,5 +17,5 @@ export interface DocLinksStart
 |  --- | --- | --- |
 |  [DOC\_LINK\_VERSION](./kibana-plugin-core-public.doclinksstart.doc_link_version.md) | <code>string</code> |  |
 |  [ELASTIC\_WEBSITE\_URL](./kibana-plugin-core-public.doclinksstart.elastic_website_url.md) | <code>string</code> |  |
-|  [links](./kibana-plugin-core-public.doclinksstart.links.md) | <code>{</code><br/><code>        readonly dashboard: {</code><br/><code>            readonly guide: string;</code><br/><code>            readonly drilldowns: string;</code><br/><code>            readonly drilldownsTriggerPicker: string;</code><br/><code>            readonly urlDrilldownTemplateSyntax: string;</code><br/><code>            readonly urlDrilldownVariables: string;</code><br/><code>        };</code><br/><code>        readonly filebeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly installation: string;</code><br/><code>            readonly configuration: string;</code><br/><code>            readonly elasticsearchOutput: string;</code><br/><code>            readonly startup: string;</code><br/><code>            readonly exportedFields: string;</code><br/><code>        };</code><br/><code>        readonly auditbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly metricbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly heartbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly logstash: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly functionbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly winlogbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly aggs: {</code><br/><code>            readonly date_histogram: string;</code><br/><code>            readonly date_range: string;</code><br/><code>            readonly filter: string;</code><br/><code>            readonly filters: string;</code><br/><code>            readonly geohash_grid: string;</code><br/><code>            readonly histogram: string;</code><br/><code>            readonly ip_range: string;</code><br/><code>            readonly range: string;</code><br/><code>            readonly significant_terms: string;</code><br/><code>            readonly terms: string;</code><br/><code>            readonly avg: string;</code><br/><code>            readonly avg_bucket: string;</code><br/><code>            readonly max_bucket: string;</code><br/><code>            readonly min_bucket: string;</code><br/><code>            readonly sum_bucket: string;</code><br/><code>            readonly cardinality: string;</code><br/><code>            readonly count: string;</code><br/><code>            readonly cumulative_sum: string;</code><br/><code>            readonly derivative: string;</code><br/><code>            readonly geo_bounds: string;</code><br/><code>            readonly geo_centroid: string;</code><br/><code>            readonly max: string;</code><br/><code>            readonly median: string;</code><br/><code>            readonly min: string;</code><br/><code>            readonly moving_avg: string;</code><br/><code>            readonly percentile_ranks: string;</code><br/><code>            readonly serial_diff: string;</code><br/><code>            readonly std_dev: string;</code><br/><code>            readonly sum: string;</code><br/><code>            readonly top_hits: string;</code><br/><code>        };</code><br/><code>        readonly scriptedFields: {</code><br/><code>            readonly scriptFields: string;</code><br/><code>            readonly scriptAggs: string;</code><br/><code>            readonly painless: string;</code><br/><code>            readonly painlessApi: string;</code><br/><code>            readonly painlessSyntax: string;</code><br/><code>            readonly luceneExpressions: string;</code><br/><code>        };</code><br/><code>        readonly indexPatterns: {</code><br/><code>            readonly loadingData: string;</code><br/><code>            readonly introduction: string;</code><br/><code>        };</code><br/><code>        readonly addData: string;</code><br/><code>        readonly kibana: string;</code><br/><code>        readonly siem: {</code><br/><code>            readonly guide: string;</code><br/><code>            readonly gettingStarted: string;</code><br/><code>        };</code><br/><code>        readonly query: {</code><br/><code>            readonly eql: string;</code><br/><code>            readonly luceneQuerySyntax: string;</code><br/><code>            readonly queryDsl: string;</code><br/><code>            readonly kueryQuerySyntax: string;</code><br/><code>        };</code><br/><code>        readonly date: {</code><br/><code>            readonly dateMath: string;</code><br/><code>        };</code><br/><code>        readonly management: Record&lt;string, string&gt;;</code><br/><code>        readonly ml: Record&lt;string, string&gt;;</code><br/><code>        readonly visualize: Record&lt;string, string&gt;;</code><br/><code>    }</code> |  |
+|  [links](./kibana-plugin-core-public.doclinksstart.links.md) | <code>{</code><br/><code>        readonly dashboard: {</code><br/><code>            readonly guide: string;</code><br/><code>            readonly drilldowns: string;</code><br/><code>            readonly drilldownsTriggerPicker: string;</code><br/><code>            readonly urlDrilldownTemplateSyntax: string;</code><br/><code>            readonly urlDrilldownVariables: string;</code><br/><code>        };</code><br/><code>        readonly filebeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly installation: string;</code><br/><code>            readonly configuration: string;</code><br/><code>            readonly elasticsearchOutput: string;</code><br/><code>            readonly startup: string;</code><br/><code>            readonly exportedFields: string;</code><br/><code>        };</code><br/><code>        readonly auditbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly metricbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly heartbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly logstash: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly functionbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly winlogbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly aggs: {</code><br/><code>            readonly date_histogram: string;</code><br/><code>            readonly date_range: string;</code><br/><code>            readonly filter: string;</code><br/><code>            readonly filters: string;</code><br/><code>            readonly geohash_grid: string;</code><br/><code>            readonly histogram: string;</code><br/><code>            readonly ip_range: string;</code><br/><code>            readonly range: string;</code><br/><code>            readonly significant_terms: string;</code><br/><code>            readonly terms: string;</code><br/><code>            readonly avg: string;</code><br/><code>            readonly avg_bucket: string;</code><br/><code>            readonly max_bucket: string;</code><br/><code>            readonly min_bucket: string;</code><br/><code>            readonly sum_bucket: string;</code><br/><code>            readonly cardinality: string;</code><br/><code>            readonly count: string;</code><br/><code>            readonly cumulative_sum: string;</code><br/><code>            readonly derivative: string;</code><br/><code>            readonly geo_bounds: string;</code><br/><code>            readonly geo_centroid: string;</code><br/><code>            readonly max: string;</code><br/><code>            readonly median: string;</code><br/><code>            readonly min: string;</code><br/><code>            readonly moving_avg: string;</code><br/><code>            readonly percentile_ranks: string;</code><br/><code>            readonly serial_diff: string;</code><br/><code>            readonly std_dev: string;</code><br/><code>            readonly sum: string;</code><br/><code>            readonly top_hits: string;</code><br/><code>        };</code><br/><code>        readonly scriptedFields: {</code><br/><code>            readonly scriptFields: string;</code><br/><code>            readonly scriptAggs: string;</code><br/><code>            readonly painless: string;</code><br/><code>            readonly painlessApi: string;</code><br/><code>            readonly painlessSyntax: string;</code><br/><code>            readonly luceneExpressions: string;</code><br/><code>        };</code><br/><code>        readonly indexPatterns: {</code><br/><code>            readonly loadingData: string;</code><br/><code>            readonly introduction: string;</code><br/><code>            readonly fieldFormattersNumber: string;</code><br/><code>        };</code><br/><code>        readonly addData: string;</code><br/><code>        readonly kibana: string;</code><br/><code>        readonly siem: {</code><br/><code>            readonly guide: string;</code><br/><code>            readonly gettingStarted: string;</code><br/><code>        };</code><br/><code>        readonly query: {</code><br/><code>            readonly eql: string;</code><br/><code>            readonly luceneQuerySyntax: string;</code><br/><code>            readonly queryDsl: string;</code><br/><code>            readonly kueryQuerySyntax: string;</code><br/><code>        };</code><br/><code>        readonly date: {</code><br/><code>            readonly dateMath: string;</code><br/><code>        };</code><br/><code>        readonly management: Record&lt;string, string&gt;;</code><br/><code>        readonly ml: Record&lt;string, string&gt;;</code><br/><code>        readonly visualize: Record&lt;string, string&gt;;</code><br/><code>    }</code> |  |
 
diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts
index 637442de7f961c..65288deb173601 100644
--- a/src/core/public/doc_links/doc_links_service.ts
+++ b/src/core/public/doc_links/doc_links_service.ts
@@ -101,6 +101,7 @@ export class DocLinksService {
         indexPatterns: {
           loadingData: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/tutorial-load-dataset.html`,
           introduction: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/index-patterns.html`,
+          fieldFormattersNumber: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/numeral.html`,
         },
         addData: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/connect-to-elasticsearch.html`,
         kibana: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/index.html`,
@@ -230,6 +231,7 @@ export interface DocLinksStart {
     readonly indexPatterns: {
       readonly loadingData: string;
       readonly introduction: string;
+      readonly fieldFormattersNumber: string;
     };
     readonly addData: string;
     readonly kibana: string;
diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md
index 33ebddc1163c1a..8cff784f6fe6fb 100644
--- a/src/core/public/public.api.md
+++ b/src/core/public/public.api.md
@@ -556,6 +556,7 @@ export interface DocLinksStart {
         readonly indexPatterns: {
             readonly loadingData: string;
             readonly introduction: string;
+            readonly fieldFormattersNumber: string;
         };
         readonly addData: string;
         readonly kibana: string;
diff --git a/src/plugins/data/server/ui_settings.ts b/src/plugins/data/server/ui_settings.ts
index 2df6e4cc34f10b..8ab24df33c86ad 100644
--- a/src/plugins/data/server/ui_settings.ts
+++ b/src/plugins/data/server/ui_settings.ts
@@ -392,7 +392,7 @@ export function getUiSettings(): Record<string, UiSettingsParams<unknown>> {
           'data.advancedSettings.format.numberFormat.numeralFormatLinkText',
         values: {
           numeralFormatLink:
-            '<a href="http://numeraljs.com/" target="_blank" rel="noopener noreferrer">' +
+            '<a href="https://www.elastic.co/guide/en/kibana/current/numeral.html" target="_blank" rel="noopener">' +
             i18n.translate('data.advancedSettings.format.numberFormat.numeralFormatLinkText', {
               defaultMessage: 'numeral format',
             }) +
@@ -414,7 +414,7 @@ export function getUiSettings(): Record<string, UiSettingsParams<unknown>> {
           'data.advancedSettings.format.percentFormat.numeralFormatLinkText',
         values: {
           numeralFormatLink:
-            '<a href="http://numeraljs.com/" target="_blank" rel="noopener noreferrer">' +
+            '<a href="https://www.elastic.co/guide/en/kibana/current/numeral.html" target="_blank" rel="noopener">' +
             i18n.translate('data.advancedSettings.format.percentFormat.numeralFormatLinkText', {
               defaultMessage: 'numeral format',
             }) +
@@ -436,7 +436,7 @@ export function getUiSettings(): Record<string, UiSettingsParams<unknown>> {
           'data.advancedSettings.format.bytesFormat.numeralFormatLinkText',
         values: {
           numeralFormatLink:
-            '<a href="http://numeraljs.com/" target="_blank" rel="noopener noreferrer">' +
+            '<a href="https://www.elastic.co/guide/en/kibana/current/numeral.html" target="_blank" rel="noopener">' +
             i18n.translate('data.advancedSettings.format.bytesFormat.numeralFormatLinkText', {
               defaultMessage: 'numeral format',
             }) +
@@ -458,7 +458,7 @@ export function getUiSettings(): Record<string, UiSettingsParams<unknown>> {
           'data.advancedSettings.format.currencyFormat.numeralFormatLinkText',
         values: {
           numeralFormatLink:
-            '<a href="http://numeraljs.com/" target="_blank" rel="noopener noreferrer">' +
+            '<a href="https://www.elastic.co/guide/en/kibana/current/numeral.html" target="_blank" rel="noopener">' +
             i18n.translate('data.advancedSettings.format.currencyFormat.numeralFormatLinkText', {
               defaultMessage: 'numeral format',
             }) +
@@ -484,7 +484,7 @@ export function getUiSettings(): Record<string, UiSettingsParams<unknown>> {
           'data.advancedSettings.format.formattingLocaleText',
         values: {
           numeralLanguageLink:
-            '<a href="http://numeraljs.com/" target="_blank" rel="noopener noreferrer">' +
+            '<a href="https://www.elastic.co/guide/en/kibana/current/numeral.html" target="_blank" rel="noopener">' +
             i18n.translate(
               'data.advancedSettings.format.formattingLocale.numeralLanguageLinkText',
               {
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.tsx.snap b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.tsx.snap
index 69ea6c481d49b1..24ce19710b3606 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`BytesFormatEditor should render normally 1`] = `
     helpText={
       <span>
         <EuiLink
-          href="https://adamwdraper.github.io/Numeral-js/"
+          href="https://www.elastic.co/guide/en/kibana/mocked-test-branch/numeral.html"
           target="_blank"
         >
           <FormattedMessage
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/bytes/bytes.test.tsx b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/bytes/bytes.test.tsx
index a78dbfaa7d3658..7acdee34f4a978 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/bytes/bytes.test.tsx
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/bytes/bytes.test.tsx
@@ -8,9 +8,13 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+import { coreMock } from 'src/core/public/mocks';
+import { createKibanaReactContext } from '../../../../../../../../kibana_react/public';
+import { FieldFormat } from 'src/plugins/data/public';
 
 import { BytesFormatEditor } from './bytes';
-import { FieldFormat } from 'src/plugins/data/public';
+
+type BytesFormatEditorProps = React.ComponentProps<typeof BytesFormatEditor>;
 
 const fieldType = 'number';
 const format = {
@@ -25,7 +29,20 @@ const formatParams = {
 const onChange = jest.fn();
 const onError = jest.fn();
 
+const KibanaReactContext = createKibanaReactContext(
+  coreMock.createStart({ basePath: 'my-base-path' })
+);
+
 describe('BytesFormatEditor', () => {
+  beforeAll(() => {
+    // Enzyme does not support the new Context API in shallow rendering.
+    // @see https://github.com/enzymejs/enzyme/issues/2189
+    (BytesFormatEditor as React.ComponentType<BytesFormatEditorProps>).contextTypes = {
+      services: () => null,
+    };
+    delete (BytesFormatEditor as Partial<typeof BytesFormatEditor>).contextType;
+  });
+
   it('should have a formatId', () => {
     expect(BytesFormatEditor.formatId).toEqual('bytes');
   });
@@ -38,7 +55,8 @@ describe('BytesFormatEditor', () => {
         formatParams={formatParams}
         onChange={onChange}
         onError={onError}
-      />
+      />,
+      { context: KibanaReactContext.value }
     );
     expect(component).toMatchSnapshot();
   });
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.tsx.snap b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.tsx.snap
index c73b5e7186547f..0d74b583b30d1d 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`NumberFormatEditor should render normally 1`] = `
     helpText={
       <span>
         <EuiLink
-          href="https://adamwdraper.github.io/Numeral-js/"
+          href="https://www.elastic.co/guide/en/kibana/mocked-test-branch/numeral.html"
           target="_blank"
         >
           <FormattedMessage
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/number.test.tsx b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/number.test.tsx
index b82d89d7e189b5..43aecebac282a1 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/number.test.tsx
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/number.test.tsx
@@ -8,10 +8,14 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+import { coreMock } from 'src/core/public/mocks';
+import { createKibanaReactContext } from '../../../../../../../../kibana_react/public';
 import { FieldFormat } from 'src/plugins/data/public';
 
 import { NumberFormatEditor } from './number';
 
+type NumberFormatEditorProps = React.ComponentProps<typeof NumberFormatEditor>;
+
 const fieldType = 'number';
 const format = {
   getConverterFor: jest.fn().mockImplementation(() => (input: number) => input * 2),
@@ -25,7 +29,20 @@ const formatParams = {
 const onChange = jest.fn();
 const onError = jest.fn();
 
+const KibanaReactContext = createKibanaReactContext(
+  coreMock.createStart({ basePath: 'my-base-path' })
+);
+
 describe('NumberFormatEditor', () => {
+  beforeAll(() => {
+    // Enzyme does not support the new Context API in shallow rendering.
+    // @see https://github.com/enzymejs/enzyme/issues/2189
+    (NumberFormatEditor as React.ComponentType<NumberFormatEditorProps>).contextTypes = {
+      services: () => null,
+    };
+    delete (NumberFormatEditor as Partial<typeof NumberFormatEditor>).contextType;
+  });
+
   it('should have a formatId', () => {
     expect(NumberFormatEditor.formatId).toEqual('number');
   });
@@ -38,7 +55,8 @@ describe('NumberFormatEditor', () => {
         formatParams={formatParams}
         onChange={onChange}
         onError={onError}
-      />
+      />,
+      { context: KibanaReactContext.value }
     );
     expect(component).toMatchSnapshot();
   });
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/number.tsx b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/number.tsx
index 250bbe570a9c4f..067bfb914e3884 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/number.tsx
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/number/number.tsx
@@ -14,13 +14,17 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { DefaultFormatEditor, defaultState } from '../default';
 
 import { FormatEditorSamples } from '../../samples';
+import { context as contextType } from '../../../../../../../../kibana_react/public';
 
 export interface NumberFormatEditorParams {
   pattern: string;
 }
 
 export class NumberFormatEditor extends DefaultFormatEditor<NumberFormatEditorParams> {
+  static contextType = contextType;
   static formatId = 'number';
+
+  context!: React.ContextType<typeof contextType>;
   state = {
     ...defaultState,
     sampleInputs: [10000, 12.345678, -1, -999, 0.52],
@@ -43,7 +47,10 @@ export class NumberFormatEditor extends DefaultFormatEditor<NumberFormatEditorPa
           }
           helpText={
             <span>
-              <EuiLink target="_blank" href="https://adamwdraper.github.io/Numeral-js/">
+              <EuiLink
+                target="_blank"
+                href={this.context.services.docLinks?.links.indexPatterns.fieldFormattersNumber}
+              >
                 <FormattedMessage
                   id="indexPatternManagement.number.documentationLabel"
                   defaultMessage="Documentation"
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.tsx.snap b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.tsx.snap
index 16ce8ca9643ef2..a96ec7f1e5318c 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`PercentFormatEditor should render normally 1`] = `
     helpText={
       <span>
         <EuiLink
-          href="https://adamwdraper.github.io/Numeral-js/"
+          href="https://www.elastic.co/guide/en/kibana/mocked-test-branch/numeral.html"
           target="_blank"
         >
           <FormattedMessage
diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/percent/percent.test.tsx b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/percent/percent.test.tsx
index 6eff2fd279cbb5..2ba0daf9181bf8 100644
--- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/percent/percent.test.tsx
+++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/editors/percent/percent.test.tsx
@@ -8,10 +8,14 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+import { coreMock } from 'src/core/public/mocks';
+import { createKibanaReactContext } from '../../../../../../../../kibana_react/public';
 import { FieldFormat } from '../../../../../../../../data/public';
 
 import { PercentFormatEditor } from './percent';
 
+type PercentFormatEditorProps = React.ComponentProps<typeof PercentFormatEditor>;
+
 const fieldType = 'number';
 const format = {
   getConverterFor: jest.fn().mockImplementation(() => (input: number) => input * 2),
@@ -25,7 +29,20 @@ const formatParams = {
 const onChange = jest.fn();
 const onError = jest.fn();
 
+const KibanaReactContext = createKibanaReactContext(
+  coreMock.createStart({ basePath: 'my-base-path' })
+);
+
 describe('PercentFormatEditor', () => {
+  beforeAll(() => {
+    // Enzyme does not support the new Context API in shallow rendering.
+    // @see https://github.com/enzymejs/enzyme/issues/2189
+    (PercentFormatEditor as React.ComponentType<PercentFormatEditorProps>).contextTypes = {
+      services: () => null,
+    };
+    delete (PercentFormatEditor as Partial<typeof PercentFormatEditor>).contextType;
+  });
+
   it('should have a formatId', () => {
     expect(PercentFormatEditor.formatId).toEqual('percent');
   });
@@ -38,7 +55,8 @@ describe('PercentFormatEditor', () => {
         formatParams={formatParams}
         onChange={onChange}
         onError={onError}
-      />
+      />,
+      { context: KibanaReactContext.value }
     );
     expect(component).toMatchSnapshot();
   });