chore: Add testing-library packages for react & update simple tests (p…

…atternfly#6921)

package.json

@@ -33,6 +33,9 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.9.0",
     "@octokit/rest": "^16.43.2",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/enzyme": "3.9.0",
     "@types/jest": "27.0.2",
     "@types/react": "^17.0.0",

packages/eslint-plugin-patternfly-react/lib/rules/no-anonymous-functions.js

@@ -2,8 +2,7 @@
 module.exports = {
   meta: {
     docs: {
-      description:
-        "Don't use arrow functions or classes without a displayName so Enzyme and React devtools show component name",
+      description: "Don't use arrow functions or classes without a displayName so React devtools show component name",
       category: 'Possible Errors',
       recommended: false
     },

packages/react-catalog-view-extension/src/components/CatalogItemHeader/CatalogItemHeader.test.tsx

@@ -1,9 +1,9 @@
 import { CatalogItemHeader } from './CatalogItemHeader';
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 test('simple catalog item header', () => {
-  const view = shallow(
+  const view = render(
     <CatalogItemHeader
       title="PatternFly"
       vendor={
@@ -13,5 +13,5 @@ test('simple catalog item header', () => {
       }
     />
   );
-  expect(view).toMatchSnapshot();
+  expect(view.container).toMatchSnapshot();
 });

packages/react-catalog-view-extension/src/components/CatalogItemHeader/__snapshots__/CatalogItemHeader.test.tsx.snap

@@ -1,29 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`simple catalog item header 1`] = `
-<header
-  className="catalog-item-header-pf"
->
-  <div
-    className="catalog-item-header-pf-text"
+<div>
+  <header
+    class="catalog-item-header-pf"
   >
-    <h1
-      className="catalog-item-header-pf-title"
+    <div
+      class="catalog-item-header-pf-text"
     >
-      PatternFly
-    </h1>
-    <h5
-      className="catalog-item-header-pf-subtitle"
-    >
-      <span>
-        provided by 
-        <a
-          href="redhat.com"
-        >
-          Red Hat
-        </a>
-      </span>
-    </h5>
-  </div>
-</header>
+      <h1
+        class="catalog-item-header-pf-title"
+      >
+        PatternFly
+      </h1>
+      <h5
+        class="catalog-item-header-pf-subtitle"
+      >
+        <span>
+          provided by 
+          <a
+            href="redhat.com"
+          >
+            Red Hat
+          </a>
+        </span>
+      </h5>
+    </div>
+  </header>
+</div>
 `;

packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.test.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { CatalogTile } from './CatalogTile';
 import { CatalogTileBadge } from './CatalogTileBadge';
 
 test('CatalogTile renders properly', () => {
-  const component = mount(
+  const result = render(
     <div>
       <CatalogTile
         id="single-badge-test"
@@ -85,11 +86,11 @@ test('CatalogTile renders properly', () => {
       />
     </div>
   );
-  expect(component).toMatchSnapshot();
+  expect(result.container).toMatchSnapshot();
 });
 
 test('CatalogTile href renders properly', () => {
-  const view = mount(
+  const view = render(
     <CatalogTile
       id="test-href"
       href="http://patternfly.org"
@@ -99,13 +100,13 @@ test('CatalogTile href renders properly', () => {
       description="1234567890123"
     />
   );
-  expect(view).toMatchSnapshot();
+  expect(view.container).toMatchSnapshot();
 });
 
 test('CatalogTile onClick behaves properly', () => {
   const onClickMock = jest.fn();
 
-  const view = mount(
+  render(
     <CatalogTile
       id="test-on-click"
       className="test-click-class"
@@ -117,9 +118,6 @@ test('CatalogTile onClick behaves properly', () => {
     />
   );
 
-  view
-    .find('#test-on-click.test-click-class')
-    .hostNodes()
-    .simulate('click');
+  userEvent.click(screen.getByText('Patternfly'));
   expect(onClickMock).toBeCalled();
 });