diff --git a/.betterer.results b/.betterer.results
index f72393aa21f..3fff26564be 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -97,9 +97,6 @@ exports[`no enzyme tests`] = {
     ],
     "public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx:2402631398": [
       [0, 17, 13, "RegExp match", "2409514259"]
-    ],
-    "public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.test.tsx:3424320489": [
-      [0, 19, 13, "RegExp match", "2409514259"]
     ]
   }`
 };
diff --git a/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.test.tsx b/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.test.tsx
index 4e4a38f4024..70d3e0ac3ca 100644
--- a/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.test.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.test.tsx
@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import AzureCredentialsForm, { Props } from './AzureCredentialsForm';
@@ -21,47 +21,40 @@ const setup = (propsFunc?: (props: Props) => Props) => {
       { value: 'chinaazuremonitor', label: 'Azure China' },
     ],
     onCredentialsChange: jest.fn(),
-    getSubscriptions: jest.fn(),
+    getSubscriptions: jest.fn().mockResolvedValue([]),
   };
 
   if (propsFunc) {
     props = propsFunc(props);
   }
 
-  return shallow(<AzureCredentialsForm {...props} />);
+  render(<AzureCredentialsForm {...props} />);
 };
 
-describe('Render', () => {
-  it('should render component', () => {
-    const wrapper = setup();
-    expect(wrapper).toMatchSnapshot();
+describe('AzureCredentialsForm', () => {
+  it('should render without error', () => {
+    expect(() => setup()).not.toThrow();
   });
 
-  it('should disable azure monitor secret input', () => {
-    const wrapper = setup((props) => ({
+  it('should disable azure monitor secret input when the clientSecret is a symbol', async () => {
+    setup((props) => ({
       ...props,
       credentials: {
-        authType: 'clientsecret',
-        azureCloud: 'azuremonitor',
-        tenantId: 'e7f3f661-a933-3h3f-0294-31c4f962ec48',
-        clientId: '34509fad-c0r9-45df-9e25-f1ee34af6900',
+        ...props.credentials,
         clientSecret: Symbol(),
       },
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(await screen.findByLabelText('Client Secret')).toBeDisabled();
   });
 
-  it('should enable azure monitor load subscriptions button', () => {
-    const wrapper = setup((props) => ({
+  it('should enable azure monitor load subscriptions button when all required fields are defined', async () => {
+    setup((props) => ({
       ...props,
       credentials: {
-        authType: 'clientsecret',
-        azureCloud: 'azuremonitor',
-        tenantId: 'e7f3f661-a933-3h3f-0294-31c4f962ec48',
-        clientId: '34509fad-c0r9-45df-9e25-f1ee34af6900',
+        ...props.credentials,
         clientSecret: 'e7f3f661-a933-4b3f-8176-51c4f982ec48',
       },
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(await screen.findByRole('button', { name: 'Load Subscriptions' })).not.toBeDisabled();
   });
 });
diff --git a/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx b/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx
index 23dec0aa749..76fb10fef40 100644
--- a/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx
@@ -211,8 +211,10 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
           {typeof credentials.clientSecret === 'symbol' ? (
             <div className="gf-form-inline">
               <div className="gf-form">
-                <InlineFormLabel className="width-12">Client Secret</InlineFormLabel>
-                <Input className="width-25" placeholder="configured" disabled={true} />
+                <InlineFormLabel htmlFor="azure-client-secret" className="width-12">
+                  Client Secret
+                </InlineFormLabel>
+                <Input id="azure-client-secret" className="width-25" placeholder="configured" disabled={true} />
               </div>
               <div className="gf-form">
                 <div className="max-width-30 gf-form-inline">
diff --git a/public/app/plugins/datasource/prometheus/configuration/__snapshots__/AzureCredentialsForm.test.tsx.snap b/public/app/plugins/datasource/prometheus/configuration/__snapshots__/AzureCredentialsForm.test.tsx.snap
deleted file mode 100644
index 12ea8b30e5a..00000000000
--- a/public/app/plugins/datasource/prometheus/configuration/__snapshots__/AzureCredentialsForm.test.tsx.snap
+++ /dev/null
@@ -1,620 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should disable azure monitor secret input 1`] = `
-<div
-  className="gf-form-group"
->
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-        tooltip="Choose an Azure Cloud"
-      >
-        Azure Cloud
-      </FormLabel>
-      <Select
-        allowCustomValue={false}
-        autoFocus={false}
-        backspaceRemovesValue={true}
-        className="width-15"
-        components={
-          Object {
-            "Group": [Function],
-            "IndicatorsContainer": [Function],
-            "MenuList": [Function],
-            "Option": [Function],
-            "SingleValue": [Function],
-          }
-        }
-        isClearable={false}
-        isDisabled={false}
-        isLoading={false}
-        isMulti={false}
-        isSearchable={true}
-        maxMenuHeight={300}
-        onChange={[Function]}
-        openMenuOnFocus={false}
-        options={
-          Array [
-            Object {
-              "label": "Azure",
-              "value": "azuremonitor",
-            },
-            Object {
-              "label": "Azure US Government",
-              "value": "govazuremonitor",
-            },
-            Object {
-              "label": "Azure Germany",
-              "value": "germanyazuremonitor",
-            },
-            Object {
-              "label": "Azure China",
-              "value": "chinaazuremonitor",
-            },
-          ]
-        }
-        tabSelectsValue={true}
-        value={
-          Object {
-            "label": "Azure",
-            "value": "azuremonitor",
-          }
-        }
-      />
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-      >
-        Directory (tenant) ID
-      </FormLabel>
-      <div
-        className="width-15"
-      >
-        <Input
-          className="width-30"
-          onChange={[Function]}
-          placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-          value="e7f3f661-a933-3h3f-0294-31c4f962ec48"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-      >
-        Application (client) ID
-      </FormLabel>
-      <div
-        className="width-15"
-      >
-        <Input
-          className="width-30"
-          onChange={[Function]}
-          placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-          value="34509fad-c0r9-45df-9e25-f1ee34af6900"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-      >
-        Client Secret
-      </FormLabel>
-      <Input
-        className="width-25"
-        disabled={true}
-        placeholder="configured"
-      />
-    </div>
-    <div
-      className="gf-form"
-    >
-      <div
-        className="max-width-30 gf-form-inline"
-      >
-        <Button
-          onClick={[Function]}
-          type="button"
-          variant="secondary"
-        >
-          reset
-        </Button>
-      </div>
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-      >
-        Default Subscription
-      </FormLabel>
-      <div
-        className="width-25"
-      >
-        <Select
-          allowCustomValue={false}
-          autoFocus={false}
-          backspaceRemovesValue={true}
-          className=""
-          components={
-            Object {
-              "Group": [Function],
-              "IndicatorsContainer": [Function],
-              "MenuList": [Function],
-              "Option": [Function],
-              "SingleValue": [Function],
-            }
-          }
-          isClearable={false}
-          isDisabled={false}
-          isLoading={false}
-          isMulti={false}
-          isSearchable={true}
-          maxMenuHeight={300}
-          onChange={[Function]}
-          openMenuOnFocus={false}
-          options={Array []}
-          tabSelectsValue={true}
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <div
-        className="max-width-30 gf-form-inline"
-      >
-        <Button
-          disabled={false}
-          onClick={[Function]}
-          size="sm"
-          type="button"
-          variant="secondary"
-        >
-          Load Subscriptions
-        </Button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Render should enable azure monitor load subscriptions button 1`] = `
-<div
-  className="gf-form-group"
->
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-        tooltip="Choose an Azure Cloud"
-      >
-        Azure Cloud
-      </FormLabel>
-      <Select
-        allowCustomValue={false}
-        autoFocus={false}
-        backspaceRemovesValue={true}
-        className="width-15"
-        components={
-          Object {
-            "Group": [Function],
-            "IndicatorsContainer": [Function],
-            "MenuList": [Function],
-            "Option": [Function],
-            "SingleValue": [Function],
-          }
-        }
-        isClearable={false}
-        isDisabled={false}
-        isLoading={false}
-        isMulti={false}
-        isSearchable={true}
-        maxMenuHeight={300}
-        onChange={[Function]}
-        openMenuOnFocus={false}
-        options={
-          Array [
-            Object {
-              "label": "Azure",
-              "value": "azuremonitor",
-            },
-            Object {
-              "label": "Azure US Government",
-              "value": "govazuremonitor",
-            },
-            Object {
-              "label": "Azure Germany",
-              "value": "germanyazuremonitor",
-            },
-            Object {
-              "label": "Azure China",
-              "value": "chinaazuremonitor",
-            },
-          ]
-        }
-        tabSelectsValue={true}
-        value={
-          Object {
-            "label": "Azure",
-            "value": "azuremonitor",
-          }
-        }
-      />
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-      >
-        Directory (tenant) ID
-      </FormLabel>
-      <div
-        className="width-15"
-      >
-        <Input
-          className="width-30"
-          onChange={[Function]}
-          placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-          value="e7f3f661-a933-3h3f-0294-31c4f962ec48"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-      >
-        Application (client) ID
-      </FormLabel>
-      <div
-        className="width-15"
-      >
-        <Input
-          className="width-30"
-          onChange={[Function]}
-          placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-          value="34509fad-c0r9-45df-9e25-f1ee34af6900"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-      >
-        Client Secret
-      </FormLabel>
-      <div
-        className="width-15"
-      >
-        <Input
-          className="width-30"
-          onChange={[Function]}
-          placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-          value="e7f3f661-a933-4b3f-8176-51c4f982ec48"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-      >
-        Default Subscription
-      </FormLabel>
-      <div
-        className="width-25"
-      >
-        <Select
-          allowCustomValue={false}
-          autoFocus={false}
-          backspaceRemovesValue={true}
-          className=""
-          components={
-            Object {
-              "Group": [Function],
-              "IndicatorsContainer": [Function],
-              "MenuList": [Function],
-              "Option": [Function],
-              "SingleValue": [Function],
-            }
-          }
-          isClearable={false}
-          isDisabled={false}
-          isLoading={false}
-          isMulti={false}
-          isSearchable={true}
-          maxMenuHeight={300}
-          onChange={[Function]}
-          openMenuOnFocus={false}
-          options={Array []}
-          tabSelectsValue={true}
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <div
-        className="max-width-30 gf-form-inline"
-      >
-        <Button
-          disabled={false}
-          onClick={[Function]}
-          size="sm"
-          type="button"
-          variant="secondary"
-        >
-          Load Subscriptions
-        </Button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Render should render component 1`] = `
-<div
-  className="gf-form-group"
->
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-        tooltip="Choose an Azure Cloud"
-      >
-        Azure Cloud
-      </FormLabel>
-      <Select
-        allowCustomValue={false}
-        autoFocus={false}
-        backspaceRemovesValue={true}
-        className="width-15"
-        components={
-          Object {
-            "Group": [Function],
-            "IndicatorsContainer": [Function],
-            "MenuList": [Function],
-            "Option": [Function],
-            "SingleValue": [Function],
-          }
-        }
-        isClearable={false}
-        isDisabled={false}
-        isLoading={false}
-        isMulti={false}
-        isSearchable={true}
-        maxMenuHeight={300}
-        onChange={[Function]}
-        openMenuOnFocus={false}
-        options={
-          Array [
-            Object {
-              "label": "Azure",
-              "value": "azuremonitor",
-            },
-            Object {
-              "label": "Azure US Government",
-              "value": "govazuremonitor",
-            },
-            Object {
-              "label": "Azure Germany",
-              "value": "germanyazuremonitor",
-            },
-            Object {
-              "label": "Azure China",
-              "value": "chinaazuremonitor",
-            },
-          ]
-        }
-        tabSelectsValue={true}
-        value={
-          Object {
-            "label": "Azure",
-            "value": "azuremonitor",
-          }
-        }
-      />
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-      >
-        Directory (tenant) ID
-      </FormLabel>
-      <div
-        className="width-15"
-      >
-        <Input
-          className="width-30"
-          onChange={[Function]}
-          placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-          value="e7f3f661-a933-3h3f-0294-31c4f962ec48"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-      >
-        Application (client) ID
-      </FormLabel>
-      <div
-        className="width-15"
-      >
-        <Input
-          className="width-30"
-          onChange={[Function]}
-          placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-          value="34509fad-c0r9-45df-9e25-f1ee34af6900"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-      >
-        Client Secret
-      </FormLabel>
-      <div
-        className="width-15"
-      >
-        <Input
-          className="width-30"
-          onChange={[Function]}
-          placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-          value=""
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <FormLabel
-        className="width-12"
-      >
-        Default Subscription
-      </FormLabel>
-      <div
-        className="width-25"
-      >
-        <Select
-          allowCustomValue={false}
-          autoFocus={false}
-          backspaceRemovesValue={true}
-          className=""
-          components={
-            Object {
-              "Group": [Function],
-              "IndicatorsContainer": [Function],
-              "MenuList": [Function],
-              "Option": [Function],
-              "SingleValue": [Function],
-            }
-          }
-          isClearable={false}
-          isDisabled={false}
-          isLoading={false}
-          isMulti={false}
-          isSearchable={true}
-          maxMenuHeight={300}
-          onChange={[Function]}
-          openMenuOnFocus={false}
-          options={Array []}
-          tabSelectsValue={true}
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <div
-        className="max-width-30 gf-form-inline"
-      >
-        <Button
-          disabled={true}
-          onClick={[Function]}
-          size="sm"
-          type="button"
-          variant="secondary"
-        >
-          Load Subscriptions
-        </Button>
-      </div>
-    </div>
-  </div>
-</div>
-`;