chore(superset-ui-core and NoResultsComponent): Migrate to RTL, add R…

…TL modules to the ui-core (#28187)

superset-frontend/packages/superset-ui-core/package.json

@@ -73,6 +73,10 @@
  "@emotion/cache": "^11.4.0",
  "@emotion/react": "^11.4.1",
  "@emotion/styled": "^11.3.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/react": "*",
  "@types/react-loadable": "*",
  "@types/tinycolor2": "*",

superset-frontend/packages/superset-ui-core/test/chart/components/NoResultsComponent.test.tsx

@@ -18,18 +18,25 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-import { configure } from '@superset-ui/core';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThemeProvider, supersetTheme } from '../../../src/style';
 import NoResultsComponent from '../../../src/chart/components/NoResultsComponent';
 
-configure();
+const renderNoResultsComponent = () =>
+ render(
+ <ThemeProvider theme={supersetTheme}>
+ <NoResultsComponent height="400" width="300" />
+ </ThemeProvider>,
+ );
 
-describe('NoResultsComponent', () => {
- it('renders the no results error', () => {
- const wrapper = shallow(<NoResultsComponent height="400" width="300" />);
+test('renders the no results error', () => {
+ renderNoResultsComponent();
 
- expect(wrapper.text()).toEqual(
- 'No ResultsNo results were returned for this query. If you expected results to be returned, ensure any filters are configured properly and the datasource contains data for the selected time range.',
- );
- });
+ expect(screen.getByText(/No Results/)).toBeInTheDocument();
+ expect(
+ screen.getByText(
+ 'No results were returned for this query. If you expected results to be returned, ensure any filters are configured properly and the datasource contains data for the selected time range.',
+ ),
+ ).toBeInTheDocument();
 });