diff --git a/.betterer.results b/.betterer.results
index 7dfbd680c2b..b9d843a59ff 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -77,9 +77,6 @@ exports[`no enzyme tests`] = {
     "public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx:4057721851": [
       [1, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx:146069464": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx:2402631398": [
       [0, 17, 13, "RegExp match", "2409514259"]
     ]
@@ -7050,9 +7047,6 @@ exports[`better eslint`] = {
     "public/app/plugins/datasource/loki/components/LokiOptionFields.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/plugins/datasource/loki/components/LokiQueryField.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -7840,7 +7834,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "12"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "13"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "14"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "15"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "15"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "16"]
     ],
     "public/app/plugins/datasource/tempo/datasource.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx b/public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx
index b1d5caa1188..a4984fcd54f 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx
@@ -1,23 +1,35 @@
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 
-import { toUtc } from '@grafana/data';
+import { EventBusSrv, TimeRange, toUtc } from '@grafana/data';
+import { setBackendSrv, TemplateSrv } from '@grafana/runtime';
+import { BackendSrv } from 'app/core/services/backend_srv';
+import { ContextSrv } from 'app/core/services/context_srv';
 
-import { LokiDatasource } from '../datasource';
+import { createLokiDatasource } from '../mocks';
 import { LokiQuery } from '../types';
 
 import { LokiQueryEditor } from './LokiQueryEditor';
 
-const createMockRequestRange = (from: string, to: string) => {
+const createMockRequestRange = (from: string, to: string): TimeRange => {
   return {
     from: toUtc(from, 'YYYY-MM-DD'),
     to: toUtc(to, 'YYYY-MM-DD'),
+    raw: {
+      from: toUtc(from, 'YYYY-MM-DD'),
+      to: toUtc(to, 'YYYY-MM-DD'),
+    },
   };
 };
 
 const setup = (propOverrides?: object) => {
-  const datasourceMock: unknown = {};
-  const datasource: LokiDatasource = datasourceMock as LokiDatasource;
+  const mockTemplateSrv: TemplateSrv = {
+    getVariables: jest.fn(),
+    replace: jest.fn(),
+    containsTemplate: jest.fn(),
+    updateTimeRange: jest.fn(),
+  };
+  const datasource = createLokiDatasource(mockTemplateSrv);
   const onRunQuery = jest.fn();
   const onChange = jest.fn();
 
@@ -29,7 +41,7 @@ const setup = (propOverrides?: object) => {
 
   const range = createMockRequestRange('2020-01-01', '2020-01-02');
 
-  const props: any = {
+  const props = {
     datasource,
     onChange,
     onRunQuery,
@@ -39,26 +51,22 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  const wrapper = shallow(<LokiQueryEditor {...props} />);
-  const instance = wrapper.instance();
-
-  return {
-    instance,
-    wrapper,
-  };
+  render(<LokiQueryEditor {...props} />);
 };
 
-describe('Render LokiQueryEditor with legend', () => {
-  it('should render', () => {
-    const { wrapper } = setup();
-    expect(wrapper).toMatchSnapshot();
+beforeAll(() => {
+  const mockedBackendSrv = new BackendSrv({
+    fromFetch: jest.fn(),
+    appEvents: new EventBusSrv(),
+    contextSrv: new ContextSrv(),
+    logout: jest.fn(),
   });
 
-  it('should update timerange', () => {
-    const { wrapper } = setup();
-    wrapper.setProps({
-      range: createMockRequestRange('2019-01-01', '2020-01-02'),
-    });
-    expect(wrapper).toMatchSnapshot();
+  setBackendSrv(mockedBackendSrv);
+});
+
+describe('LokiQueryEditor', () => {
+  it('should render without throwing', () => {
+    expect(() => setup()).not.toThrow();
   });
 });
diff --git a/public/app/plugins/datasource/loki/components/__snapshots__/LokiQueryEditor.test.tsx.snap b/public/app/plugins/datasource/loki/components/__snapshots__/LokiQueryEditor.test.tsx.snap
deleted file mode 100644
index 2518d3318be..00000000000
--- a/public/app/plugins/datasource/loki/components/__snapshots__/LokiQueryEditor.test.tsx.snap
+++ /dev/null
@@ -1,131 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render LokiQueryEditor with legend should render 1`] = `
-<LokiQueryField
-  ExtraFieldElement={
-    <React.Fragment>
-      <LokiOptionFields
-        lineLimitValue=""
-        onChange={[MockFunction]}
-        onRunQuery={[MockFunction]}
-        query={
-          Object {
-            "expr": "",
-            "legendFormat": "My Legend",
-            "refId": "A",
-          }
-        }
-        resolution={1}
-        runOnBlur={true}
-      />
-      <div
-        className="gf-form-inline"
-      >
-        <div
-          className="gf-form"
-        >
-          <FormLabel
-            tooltip="Controls the name of the time series, using name or pattern. For example
-        {{hostname}} will be replaced with label value for the label hostname. The legend only applies to metric queries."
-            width={6}
-          >
-            Legend
-          </FormLabel>
-          <input
-            className="gf-form-input"
-            onBlur={[MockFunction]}
-            onChange={[Function]}
-            placeholder="legend format"
-            type="text"
-            value="My Legend"
-          />
-        </div>
-      </div>
-    </React.Fragment>
-  }
-  data-testid="loki-editor"
-  datasource={Object {}}
-  history={Array []}
-  onBlur={[MockFunction]}
-  onChange={[MockFunction]}
-  onRunQuery={[MockFunction]}
-  query={
-    Object {
-      "expr": "",
-      "legendFormat": "My Legend",
-      "refId": "A",
-    }
-  }
-  range={
-    Object {
-      "from": "2020-01-01T00:00:00.000Z",
-      "to": "2020-01-02T00:00:00.000Z",
-    }
-  }
-/>
-`;
-
-exports[`Render LokiQueryEditor with legend should update timerange 1`] = `
-<LokiQueryField
-  ExtraFieldElement={
-    <React.Fragment>
-      <LokiOptionFields
-        lineLimitValue=""
-        onChange={[MockFunction]}
-        onRunQuery={[MockFunction]}
-        query={
-          Object {
-            "expr": "",
-            "legendFormat": "My Legend",
-            "refId": "A",
-          }
-        }
-        resolution={1}
-        runOnBlur={true}
-      />
-      <div
-        className="gf-form-inline"
-      >
-        <div
-          className="gf-form"
-        >
-          <FormLabel
-            tooltip="Controls the name of the time series, using name or pattern. For example
-        {{hostname}} will be replaced with label value for the label hostname. The legend only applies to metric queries."
-            width={6}
-          >
-            Legend
-          </FormLabel>
-          <input
-            className="gf-form-input"
-            onBlur={[MockFunction]}
-            onChange={[Function]}
-            placeholder="legend format"
-            type="text"
-            value="My Legend"
-          />
-        </div>
-      </div>
-    </React.Fragment>
-  }
-  data-testid="loki-editor"
-  datasource={Object {}}
-  history={Array []}
-  onBlur={[MockFunction]}
-  onChange={[MockFunction]}
-  onRunQuery={[MockFunction]}
-  query={
-    Object {
-      "expr": "",
-      "legendFormat": "My Legend",
-      "refId": "A",
-    }
-  }
-  range={
-    Object {
-      "from": "2019-01-01T00:00:00.000Z",
-      "to": "2020-01-02T00:00:00.000Z",
-    }
-  }
-/>
-`;