feat: migrate enzyme to RTL (#844)

* feat: migrate enzyme to RTL

* fix: snapshots

* fix: updated paragon to fix issues

---------

Co-authored-by: Muhammad Abdullah Waheed <abdullah.waheed@arbisoft.com>

jest.config.js

@@ -1,7 +1,7 @@
 const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
-  setupFiles: [
+  setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],
   coveragePathIgnorePatterns: [

package.json

@@ -40,7 +40,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/paragon": "^22.0.0",
+    "@openedx/paragon": "22.1.1",
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.36.0",
     "axios": "^0.27.2",
@@ -75,17 +75,13 @@
     "@openedx/frontend-build": "13.0.27",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.5",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "audit-ci": "^6.3.0",
     "axios-mock-adapter": "^1.21.1",
     "chance": "^1.1.8",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.2",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
     "lodash.defaultsdeep": "^4.6.1",
     "qs": "^6.11.0",
-    "react-test-renderer": "^17.0.2",
     "redux-mock-store": "^1.5.4",
     "rosie": "^2.1.0",
     "webpack-merge": "^5.8.0"

src/feedback/AlertList.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
-import renderer, { act } from 'react-test-renderer';
+import { render, act } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import ConnectedAlertList from './AlertList';
@@ -28,7 +28,7 @@ describe('AlertList', () => {
         </Provider>
       </IntlProvider>
     );
-    const tree = renderer.create(component).toJSON();
+    const { container: tree } = render(component);
     expect(tree).toMatchSnapshot();
   });
 
@@ -46,7 +46,7 @@ describe('AlertList', () => {
         </Provider>
       </IntlProvider>
     );
-    const tree = renderer.create(component);
+    const { container: tree } = render(component);
     act(() => {
       store.dispatch(addMessage('boo', null, { needed: 'data' }, MESSAGE_TYPES.WARNING));
       store.dispatch(addMessage('bah', 'Bah!', null, MESSAGE_TYPES.INFO));
@@ -55,6 +55,6 @@ describe('AlertList', () => {
       store.dispatch(addMessage(null, 'Debug debug', null, MESSAGE_TYPES.DEBUG));
       store.dispatch(addMessage('fallback-error', null, null, MESSAGE_TYPES.ERROR));
     });
-    expect(tree.toJSON()).toMatchSnapshot();
+    expect(tree).toMatchSnapshot();
   });
 });

src/feedback/AlertMessage.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import renderer from 'react-test-renderer';
+import { fireEvent, render } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import AlertMessage from './AlertMessage';
@@ -23,8 +22,9 @@ describe('AlertMessage', () => {
       </IntlProvider>
     );
 
-    const wrapper = mount(component);
-    wrapper.find('.btn').simulate('click');
+    const { container } = render(component);
+    const button = container.querySelector('.btn');
+    fireEvent.click(button);
 
     expect(closeHandlerMock).toHaveBeenCalledWith(123);
   });
@@ -43,7 +43,7 @@ describe('AlertMessage', () => {
       </IntlProvider>
     );
 
-    const tree = renderer.create(component).toJSON();
+    const { container: tree } = render(component);
     // The alert should have an 'alert-warning' class.  That's the default in the code.
     expect(tree).toMatchSnapshot();
   });
@@ -59,7 +59,7 @@ describe('AlertMessage', () => {
       </IntlProvider>
     );
 
-    const tree = renderer.create(component).toJSON();
+    const { container: tree } = render(component);
     expect(tree).toMatchSnapshot();
   });
 
@@ -74,7 +74,7 @@ describe('AlertMessage', () => {
       </IntlProvider>
     );
 
-    const tree = renderer.create(component).toJSON();
+    const { container: tree } = render(component);
     expect(tree).toMatchSnapshot();
   });
 });

src/feedback/__snapshots__/AlertList.test.jsx.snap

@@ -1,201 +1,184 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AlertList should be null by default 1`] = `null`;
+exports[`AlertList should be null by default 1`] = `<div />`;
 
 exports[`AlertList should render messages of each type 1`] = `
-Array [
+<div>
   <div
-    className="fade alert-content alert alert-warning show"
+    class="fade alert-content alert alert-warning show"
     dialog="Boo indeed!"
     role="alert"
   >
     <div
-      className="pgn__alert-message-wrapper"
+      class="pgn__alert-message-wrapper"
     >
       <div
-        className="alert-message-content"
+        class="alert-message-content"
       >
         Boo indeed!
       </div>
       <div
-        className="pgn__alert-actions pgn__action-row"
+        class="pgn__alert-actions pgn__action-row"
       >
         <span
-          className="pgn__action-row-spacer"
+          class="pgn__action-row-spacer"
         />
         <button
-          className="btn btn-tertiary btn-sm"
-          disabled={false}
-          onClick={[Function]}
+          class="btn btn-tertiary btn-sm"
           type="button"
         >
           Dismiss
         </button>
       </div>
     </div>
-  </div>,
+  </div>
   <div
-    className="fade alert-content alert alert-info show"
+    class="fade alert-content alert alert-info show"
     dialog="Bah!"
     role="alert"
   >
     <div
-      className="pgn__alert-message-wrapper"
+      class="pgn__alert-message-wrapper"
     >
       <div
-        className="alert-message-content"
+        class="alert-message-content"
       >
         Bah!
       </div>
       <div
-        className="pgn__alert-actions pgn__action-row"
+        class="pgn__alert-actions pgn__action-row"
       >
         <span
-          className="pgn__action-row-spacer"
+          class="pgn__action-row-spacer"
         />
         <button
-          className="btn btn-tertiary btn-sm"
-          disabled={false}
-          onClick={[Function]}
+          class="btn btn-tertiary btn-sm"
           type="button"
         >
           Dismiss
         </button>
       </div>
     </div>
-  </div>,
+  </div>
   <div
-    className="fade alert-content alert alert-success show"
+    class="fade alert-content alert alert-success show"
     dialog="Meh!"
     role="alert"
   >
     <div
-      className="pgn__alert-message-wrapper"
+      class="pgn__alert-message-wrapper"
     >
       <div
-        className="alert-message-content"
+        class="alert-message-content"
       >
         Meh!
       </div>
       <div
-        className="pgn__alert-actions pgn__action-row"
+        class="pgn__alert-actions pgn__action-row"
       >
         <span
-          className="pgn__action-row-spacer"
+          class="pgn__action-row-spacer"
         />
         <button
-          className="btn btn-tertiary btn-sm"
-          disabled={false}
-          onClick={[Function]}
+          class="btn btn-tertiary btn-sm"
           type="button"
         >
           Dismiss
         </button>
       </div>
     </div>
-  </div>,
+  </div>
   <div
-    className="fade alert-content alert alert-danger show"
+    class="fade alert-content alert alert-danger show"
     dialog="Gah!  An error!"
     role="alert"
   >
     <div
-      className="pgn__alert-message-wrapper"
+      class="pgn__alert-message-wrapper"
     >
       <div
-        className="alert-message-content"
+        class="alert-message-content"
       >
         Gah!  An error!
       </div>
       <div
-        className="pgn__alert-actions pgn__action-row"
+        class="pgn__alert-actions pgn__action-row"
       >
         <span
-          className="pgn__action-row-spacer"
+          class="pgn__action-row-spacer"
         />
         <button
-          className="btn btn-tertiary btn-sm"
-          disabled={false}
-          onClick={[Function]}
+          class="btn btn-tertiary btn-sm"
           type="button"
         >
           Dismiss
         </button>
       </div>
     </div>
-  </div>,
+  </div>
   <div
-    className="fade alert-content alert alert-warning show"
+    class="fade alert-content alert alert-warning show"
     dialog="Debug debug"
     role="alert"
   >
     <div
-      className="pgn__alert-message-wrapper"
+      class="pgn__alert-message-wrapper"
     >
       <div
-        className="alert-message-content"
+        class="alert-message-content"
       >
         Debug debug
       </div>
       <div
-        className="pgn__alert-actions pgn__action-row"
+        class="pgn__alert-actions pgn__action-row"
       >
         <span
-          className="pgn__action-row-spacer"
+          class="pgn__action-row-spacer"
         />
         <button
-          className="btn btn-tertiary btn-sm"
-          disabled={false}
-          onClick={[Function]}
+          class="btn btn-tertiary btn-sm"
           type="button"
         >
           Dismiss
         </button>
       </div>
     </div>
-  </div>,
+  </div>
   <div
-    className="fade alert-content alert alert-danger show"
-    dialog={
-      <FallbackErrorMessage
-        values={Object {}}
-      />
-    }
+    class="fade alert-content alert alert-danger show"
+    dialog="[object Object]"
     role="alert"
   >
     <div
-      className="pgn__alert-message-wrapper"
+      class="pgn__alert-message-wrapper"
     >
       <div
-        className="alert-message-content"
+        class="alert-message-content"
       >
         There was an unexpected problem. If the problem persists, please 
         <a
-          className="pgn__hyperlink default-link standalone-link"
+          class="pgn__hyperlink default-link standalone-link"
           href="http://localhost:18000/support"
-          onClick={[Function]}
           target="_self"
         >
           contact support
         </a>
         .
       </div>
       <div
-        className="pgn__alert-actions pgn__action-row"
+        class="pgn__alert-actions pgn__action-row"
       >
         <span
-          className="pgn__action-row-spacer"
+          class="pgn__action-row-spacer"
         />
         <button
-          className="btn btn-tertiary btn-sm"
-          disabled={false}
-          onClick={[Function]}
+          class="btn btn-tertiary btn-sm"
           type="button"
         >
           Dismiss
         </button>
       </div>
     </div>
-  </div>,
-]
+  </div>
+</div>
 `;