Update unit tests with testing-library/react

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.5.0 (2023-06-25)
+
+### Features / Enhancements
+
+- Update unit tests with testing-library/react (#27)
+
 ## 2.4.0 (2023-05-13)
 
 ### Features / Enhancements

jest-setup.js

@@ -1,7 +1 @@
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-/**
- * Configure
- */
-configure({ adapter: new Adapter() });
+import '@testing-library/jest-dom';

package.json

@@ -7,10 +7,8 @@
     "@grafana/schema": "9.5.2",
     "@grafana/toolkit": "9.5.2",
     "@grafana/ui": "9.5.2",
-    "@types/enzyme": "^3.10.13",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.7",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

src/components/ConfigEditor/ConfigEditor.test.tsx

@@ -1,14 +1,10 @@
-import { shallow, ShallowWrapper } from 'enzyme';
 import React from 'react';
 import { DataSourceSettings } from '@grafana/data';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { TestIds } from '../../constants';
 import { DataSourceOptions } from '../../types';
 import { ConfigEditor } from './ConfigEditor';
 
-/**
- * Component
- */
-type ShallowComponent = ShallowWrapper<ConfigEditor['props'], ConfigEditor['state'], ConfigEditor>;
-
 /**
  * Override Options
  */
@@ -64,20 +60,17 @@ describe('ConfigEditor', () => {
    * Filter
    */
   describe('Filter', () => {
-    const getComponent = (wrapper: ShallowComponent) =>
-      wrapper.findWhere((node: any) => {
-        return node.prop('onChange') === wrapper.instance().onFilterChange;
-      });
-
     it('Should apply filter value and change options if field was changed', () => {
       const options = getOptions({ jsonData: { filter: '' } });
-      const wrapper = shallow<ConfigEditor>(<ConfigEditor options={options} onOptionsChange={onChange} />);
 
-      const testedComponent = getComponent(wrapper);
-      expect(testedComponent.prop('value')).toEqual(options.jsonData.filter);
+      render(<ConfigEditor options={options} onOptionsChange={onChange} />);
+
+      const testedComponent = screen.getByTestId(TestIds.configEditor.fieldFilter);
+      expect(testedComponent).toHaveValue(options.jsonData.filter);
 
       const newValue = 'GF_';
-      testedComponent.simulate('change', { target: { value: newValue } });
+      fireEvent.change(testedComponent, { target: { value: newValue } });
+
       expect(onChange).toHaveBeenCalledWith({
         ...options,
         jsonData: {

src/components/ConfigEditor/ConfigEditor.tsx

@@ -1,47 +1,48 @@
-import React, { ChangeEvent, PureComponent } from 'react';
+import React, { ChangeEvent, useCallback } from 'react';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { InlineField, InlineFieldRow, Input } from '@grafana/ui';
+import { TestIds } from '../../constants';
 import { DataSourceOptions } from '../../types';
 
 /**
  * Editor Properties
  */
 interface Props extends DataSourcePluginOptionsEditorProps<DataSourceOptions> {}
 
-/**
- * State
- */
-interface State {}
-
 /**
  * Config Editor
  */
-export class ConfigEditor extends PureComponent<Props, State> {
+export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
   /**
    * Filter Change
    */
-  onFilterChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onOptionsChange, options } = this.props;
-    const jsonData = {
-      ...options.jsonData,
-      filter: event.target.value,
-    };
-    onOptionsChange({ ...options, jsonData });
-  };
+  const onFilterChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const jsonData = {
+        ...options.jsonData,
+        filter: event.target.value,
+      };
+      onOptionsChange({ ...options, jsonData });
+    },
+    [onOptionsChange, options]
+  );
 
   /**
    * Render
    */
-  render() {
-    const { options } = this.props;
-    const { jsonData } = options;
 
-    return (
-      <InlineFieldRow>
-        <InlineField label="Filter" tooltip="Allows to filter unnecessary or secured variables using Regex" grow>
-          <Input onChange={this.onFilterChange} value={jsonData.filter || ''} placeholder="Regex pattern" />
-        </InlineField>
-      </InlineFieldRow>
-    );
-  }
-}
+  const { jsonData } = options;
+
+  return (
+    <InlineFieldRow>
+      <InlineField label="Filter" tooltip="Allows to filter unnecessary or secured variables using Regex" grow>
+        <Input
+          onChange={onFilterChange}
+          value={jsonData.filter || ''}
+          placeholder="Regex pattern"
+          data-testid={TestIds.configEditor.fieldFilter}
+        />
+      </InlineField>
+    </InlineFieldRow>
+  );
+};

src/components/QueryEditor/QueryEditor.test.tsx

@@ -1,13 +1,8 @@
-import { shallow, ShallowWrapper } from 'enzyme';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { Query } from '../../types';
 import { QueryEditor } from './QueryEditor';
 
-/**
- * Component
- */
-type ShallowComponent = ShallowWrapper<QueryEditor['props'], QueryEditor['state'], QueryEditor>;
-
 /**
  * Get Query with default values and ability to override
  *
@@ -34,16 +29,12 @@ describe('QueryEditor', () => {
    * Component
    */
   describe('Component', () => {
-    const getComponent = (wrapper: ShallowComponent) => wrapper;
-
     it('Should apply feedType value and change', () => {
       const query = getQuery();
-      const wrapper = shallow<QueryEditor>(
-        <QueryEditor datasource={[] as any} query={query} onRunQuery={onRunQuery} onChange={onChange} />
-      );
 
-      const testedComponent = getComponent(wrapper);
-      expect(testedComponent.exists());
+      render(<QueryEditor datasource={[] as any} query={query} onRunQuery={onRunQuery} onChange={onChange} />);
+
+      expect(screen.getByText('No options is available.')).toBeInTheDocument();
     });
   });
 });

src/components/QueryEditor/QueryEditor.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { QueryEditorProps } from '@grafana/data';
 import { DataSource } from '../../datasource';
 import { DataSourceOptions, Query } from '../../types';
@@ -11,8 +11,6 @@ type Props = QueryEditorProps<DataSource, Query, DataSourceOptions>;
 /**
  * Query Editor
  */
-export class QueryEditor extends PureComponent<Props> {
-  render() {
-    return <>No options is available.</>;
-  }
-}
+export const QueryEditor: React.FC<Props> = () => {
+  return <>No options is available.</>;
+};

src/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './datasource';
+export * from './tests';

src/constants/tests.ts

@@ -0,0 +1,8 @@
+/**
+ * Tests Identifiers
+ */
+export const TestIds = {
+  configEditor: {
+    fieldFilter: 'data-testid config-editor field-filter',
+  },
+};