feat: enzyme to rtl shift

BilalQamar95 · Jan 11, 2024 · 7b9a2b1 · 7b9a2b1
1 parent 2b80201
commit 7b9a2b1
Show file tree

Hide file tree

Showing 28 changed files with 767 additions and 801 deletions.
diff --git a/audit-ci.json b/audit-ci.json
@@ -1,7 +1,8 @@
 {
     "allowlist": [
         "GHSA-hpx4-r86g-5jrg",
-        "GHSA-wf5p-g6vw-rhxx"
+        "GHSA-wf5p-g6vw-rhxx",
+        "GHSA-jchw-25xp-jwwc"
     ],
     "moderate": true
 }
diff --git a/src/feedback/AlertList.test.jsx b/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();
   });
 });
diff --git a/src/feedback/AlertMessage.test.jsx b/src/feedback/AlertMessage.test.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 import { fireEvent, render } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
@@ -44,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();
   });
@@ -60,7 +59,7 @@ describe('AlertMessage', () => {
       </IntlProvider>
     );
 
-    const tree = renderer.create(component).toJSON();
+    const { container: tree } = render(component);
     expect(tree).toMatchSnapshot();
   });
 
@@ -75,7 +74,7 @@ describe('AlertMessage', () => {
       </IntlProvider>
     );
 
-    const tree = renderer.create(component).toJSON();
+    const { container: tree } = render(component);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/feedback/__snapshots__/AlertList.test.jsx.snap b/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>
 `;