Improves RTL configuration (#13079)

- Adds plugin:jest-dom/recommended to ESLint plugins list to enforce tests best practices

- Moves import @testing-library/jest-dom/extend-expect; from setup.ts to testing-library.tsx to avoid matchers collision

- Adds @testing-library/user-event to help simulate users events

superset-frontend/.eslintrc.js

@@ -167,11 +167,20 @@ module.exports = {
         'src/**/*.test.js',
         'src/**/*.test.jsx',
       ],
-      plugins: ['jest', 'jest-dom', 'no-only-tests'],
+      plugins: ['jest', 'jest-dom', 'no-only-tests', 'testing-library'],
       env: {
         'jest/globals': true,
       },
-      extends: ['plugin:jest/recommended', 'plugin:testing-library/react'],
+      settings: {
+        jest: {
+          version: 'detect',
+        },
+      },
+      extends: [
+        'plugin:jest/recommended',
+        'plugin:jest-dom/recommended',
+        'plugin:testing-library/react',
+      ],
       rules: {
         'import/no-extraneous-dependencies': [
           'error',

superset-frontend/package.json

@@ -198,8 +198,10 @@
     "@storybook/preset-typescript": "^3.0.0",
     "@storybook/react": "^6.1.17",
     "@svgr/webpack": "^5.4.0",
+    "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.0",
+    "@testing-library/user-event": "^12.7.0",
     "@types/classnames": "^2.2.10",
     "@types/dom-to-image": "^2.6.0",
     "@types/enzyme": "^3.10.5",

superset-frontend/spec/.eslintrc

@@ -21,8 +21,14 @@
   "env": {
     "jest/globals": true
   },
+  "settings": {
+    "jest": {
+      "version": "detect"
+    }
+  },
   "extends": [
     "plugin:jest/recommended",
+    "plugin:jest-dom/recommended",
     "plugin:testing-library/react"
   ],
   "rules": {

superset-frontend/spec/helpers/setup.ts

@@ -16,9 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-// `jest-dom` must be imported before `jest-enzyme` because there are conflicts
-// between these two.
-import '@testing-library/jest-dom/extend-expect';
 import 'jest-enzyme';
 import './shim';
 import { configure as configureTestingLibrary } from '@testing-library/react';

superset-frontend/spec/helpers/testing-library.tsx

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import '@testing-library/jest-dom/extend-expect';
 import React, { ReactNode, ReactElement } from 'react';
 import { render, RenderOptions } from '@testing-library/react';
 import { ThemeProvider, supersetTheme } from '@superset-ui/core';

superset-frontend/spec/javascripts/explore/components/ControlRow_spec.tsx

@@ -25,7 +25,7 @@ describe('ControlSetRow', () => {
     const { getAllByText } = render(
       <ControlSetRow controls={[<p>My Control 1</p>]} />,
     );
-    expect(getAllByText('My Control 1')).toHaveLength(1);
+    expect(getAllByText('My Control 1').length).toBe(1);
   });
   it('renders a single row with two elements', () => {
     const { getAllByText } = render(

superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.jsx

@@ -17,9 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import { Simulate } from 'react-dom/test-utils';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
 import DatasourcePanel from 'src/explore/components/DatasourcePanel';
 import { columns, metrics } from 'spec/javascripts/datasource/fixtures';
 
@@ -51,49 +50,31 @@ describe('datasourcepanel', () => {
   };
 
   function search(value, input) {
-    fireEvent.change(input, {
-      target: { value },
-    });
-    Simulate.change(input);
+    userEvent.clear(input);
+    userEvent.type(input, value);
   }
 
   it('should render', () => {
-    const { container } = render(
-      <ThemeProvider theme={supersetTheme}>
-        <DatasourcePanel {...props} />
-      </ThemeProvider>,
-    );
+    const { container } = render(<DatasourcePanel {...props} />);
     expect(container).toBeVisible();
   });
 
   it('should display items in controls', () => {
-    render(
-      <ThemeProvider theme={supersetTheme}>
-        <DatasourcePanel {...props} />
-      </ThemeProvider>,
-    );
+    render(<DatasourcePanel {...props} />);
     expect(screen.getByText('birth_names')).toBeTruthy();
     expect(screen.getByText('Columns')).toBeTruthy();
     expect(screen.getByText('Metrics')).toBeTruthy();
   });
 
   it('should render search results', () => {
-    const { container } = render(
-      <ThemeProvider theme={supersetTheme}>
-        <DatasourcePanel {...props} />
-      </ThemeProvider>,
-    );
+    const { container } = render(<DatasourcePanel {...props} />);
     const c = container.getElementsByClassName('option-label');
 
     expect(c).toHaveLength(5);
   });
 
   it('should render 0 search results', () => {
-    const { container } = render(
-      <ThemeProvider theme={supersetTheme}>
-        <DatasourcePanel {...props} />
-      </ThemeProvider>,
-    );
+    const { container } = render(<DatasourcePanel {...props} />);
     const c = container.getElementsByClassName('option-label');
     const searchInput = screen.getByPlaceholderText('Search Metrics & Columns');
 
@@ -104,11 +85,7 @@ describe('datasourcepanel', () => {
   });
 
   it('should render and sort search results', () => {
-    const { container } = render(
-      <ThemeProvider theme={supersetTheme}>
-        <DatasourcePanel {...props} />
-      </ThemeProvider>,
-    );
+    const { container } = render(<DatasourcePanel {...props} />);
     const c = container.getElementsByClassName('option-label');
     const searchInput = screen.getByPlaceholderText('Search Metrics & Columns');