test: Fixes act errors in DatasourceEditor test (#21424)

superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx

@@ -19,11 +19,19 @@
 import React from 'react';
 import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import DatasourceEditor from 'src/components/Datasource/DatasourceEditor';
 import mockDatasource from 'spec/fixtures/mockDatasource';
 import * as featureFlags from 'src/featureFlags';
 
+jest.mock('src/components/Icons/Icon', () => ({ fileName, role, ...rest }) => (
+  <span
+    role={role ?? 'img'}
+    aria-label={fileName.replace('_', '-')}
+    {...rest}
+  />
+));
+
 const props = {
   datasource: mockDatasource['7__table'],
   addSuccessToast: () => {},
@@ -32,24 +40,19 @@ const props = {
 };
 const DATASOURCE_ENDPOINT = 'glob:*/datasource/external_metadata_by_name/*';
 
+const asyncRender = props =>
+  waitFor(() => render(<DatasourceEditor {...props} />, { useRedux: true }));
+
 describe('DatasourceEditor', () => {
   fetchMock.get(DATASOURCE_ENDPOINT, []);
 
-  let el;
   let isFeatureEnabledMock;
 
-  beforeEach(() => {
-    el = (
-      <DatasourceEditor
-        {...props}
-        datasource={{ ...props.datasource, table_name: 'Vehicle Sales +' }}
-      />
-    );
-    render(el, { useRedux: true });
-  });
-
-  it('is valid', () => {
-    expect(React.isValidElement(el)).toBe(true);
+  beforeEach(async () => {
+    await asyncRender({
+      ...props,
+      datasource: { ...props.datasource, table_name: 'Vehicle Sales +' },
+    });
   });
 
   it('renders Tabs', () => {
@@ -193,11 +196,8 @@ describe('DatasourceEditor', () => {
         .mockImplementation(() => true);
     });
 
-    beforeEach(() => {
-      render(el, { useRedux: true });
-    });
-
-    it('disable edit Source tab', () => {
+    it('disable edit Source tab', async () => {
+      await asyncRender(props);
       expect(
         screen.queryByRole('img', { name: /lock-locked/i }),
       ).not.toBeInTheDocument();
@@ -208,7 +208,7 @@ describe('DatasourceEditor', () => {
 
 describe('DatasourceEditor RTL', () => {
   it('properly renders the metric information', async () => {
-    render(<DatasourceEditor {...props} />, { useRedux: true });
+    await asyncRender(props);
     const metricButton = screen.getByTestId('collection-tab-Metrics');
     userEvent.click(metricButton);
     const expandToggle = await screen.findAllByLabelText(/toggle expand/i);
@@ -221,9 +221,7 @@ describe('DatasourceEditor RTL', () => {
     expect(warningMarkdown.value).toEqual('someone');
   });
   it('properly updates the metric information', async () => {
-    render(<DatasourceEditor {...props} />, {
-      useRedux: true,
-    });
+    await asyncRender(props);
     const metricButton = screen.getByTestId('collection-tab-Metrics');
     userEvent.click(metricButton);
     const expandToggle = await screen.findAllByLabelText(/toggle expand/i);
@@ -238,26 +236,22 @@ describe('DatasourceEditor RTL', () => {
     expect(certificationDetails.value).toEqual('I am typing something new');
   });
   it('shows the default datetime column', async () => {
-    render(<DatasourceEditor {...props} />, { useRedux: true });
+    await asyncRender(props);
     const metricButton = screen.getByTestId('collection-tab-Columns');
     userEvent.click(metricButton);
-
     const dsDefaultDatetimeRadio = screen.getByTestId('radio-default-dttm-ds');
     expect(dsDefaultDatetimeRadio).toBeChecked();
-
     const genderDefaultDatetimeRadio = screen.getByTestId(
       'radio-default-dttm-gender',
     );
     expect(genderDefaultDatetimeRadio).not.toBeChecked();
   });
   it('allows choosing only temporal columns as the default datetime', async () => {
-    render(<DatasourceEditor {...props} />, { useRedux: true });
+    await asyncRender(props);
     const metricButton = screen.getByTestId('collection-tab-Columns');
     userEvent.click(metricButton);
-
     const dsDefaultDatetimeRadio = screen.getByTestId('radio-default-dttm-ds');
     expect(dsDefaultDatetimeRadio).toBeEnabled();
-
     const genderDefaultDatetimeRadio = screen.getByTestId(
       'radio-default-dttm-gender',
     );