Chore: Replace enzyme with RTL in BigValue.test.tsx (#45650)

.betterer.results

@@ -8,9 +8,6 @@ exports[`no enzyme tests`] = {
     "packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx:2315765050": [
       [1, 19, 13, "RegExp match", "2409514259"]
     ],
-    "packages/grafana-ui/src/components/BigValue/BigValue.test.tsx:261212211": [
-      [1, 19, 13, "RegExp match", "2409514259"]
-    ],
     "packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx:1355456933": [
       [1, 31, 13, "RegExp match", "2409514259"]
     ],

packages/grafana-ui/src/components/BigValue/BigValue.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { BigValue, Props, BigValueColorMode, BigValueGraphMode } from './BigValue';
+import { render, screen } from '@testing-library/react';
+import { BigValue, BigValueColorMode, BigValueGraphMode, Props } from './BigValue';
 import { createTheme } from '@grafana/data';
 
 function getProps(propOverrides?: Partial<Props>): Props {
@@ -21,22 +21,12 @@ function getProps(propOverrides?: Partial<Props>): Props {
   return props;
 }
 
-const setup = (propOverrides?: object) => {
-  const props = getProps(propOverrides);
-  const wrapper = shallow(<BigValue {...props} />);
-  const instance = wrapper.instance() as BigValue;
-
-  return {
-    instance,
-    wrapper,
-  };
-};
-
 describe('BigValue', () => {
   describe('Render with basic options', () => {
     it('should render', () => {
-      const { wrapper } = setup();
-      expect(wrapper).toMatchSnapshot();
+      render(<BigValue {...getProps()} />);
+
+      expect(screen.getByText('25')).toBeInTheDocument();
     });
   });
 });

packages/grafana-ui/src/components/BigValue/BigValue.tsx

@@ -1,8 +1,6 @@
-// Library
 import React, { PureComponent } from 'react';
 import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline, TextDisplayOptions } from '@grafana/data';
 
-// Types
 import { Themeable2 } from '../../types';
 import { buildLayout } from './BigValueLayout';
 import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';

packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BigValue Render with basic options should render 1`] = `
-<div
-  style={
-    Object {
-      "alignItems": "center",
-      "background": "linear-gradient(120deg, rgb(179, 24, 0), rgb(230, 0, 31))",
-      "borderRadius": "3px",
-      "display": "flex",
-      "flexDirection": "row",
-      "height": "300px",
-      "padding": "12px",
-      "position": "relative",
-      "width": "300px",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "column",
-        "flexGrow": 1,
-        "justifyContent": "center",
-      }
-    }
-  >
-    <FormattedDisplayValue
-      style={
-        Object {
-          "color": "rgb(247, 248, 250)",
-          "fontSize": 230,
-          "fontWeight": 500,
-          "lineHeight": 1.2,
-          "position": "relative",
-          "textAlign": "center",
-          "zIndex": 1,
-        }
-      }
-      value={
-        Object {
-          "color": "red",
-          "numeric": 25,
-          "text": "25",
-          "titleToAlignTo": undefined,
-          "valueToAlignTo": "25",
-        }
-      }
-    />
-  </div>
-</div>
-`;