feat: use react-testing-library for detailed unit tests (#316)

* feat: use react-testing-library for tests

* feat: update tests for Subscriptions

* feat: update tests for NotFoundPage

* feat: update tests for ManageSubscriptions

* feat: update tests for OrdersandSubscriptions

package.json

@@ -79,6 +79,8 @@
     "@edx/browserslist-config": "^1.2.0",
     "@edx/frontend-build": "^12.7.0",
     "@edx/reactifex": "^2.1.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.5",
     "axios-mock-adapter": "1.21.1",
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-imports": "2.0.0",
@@ -87,7 +89,6 @@
     "fetch-mock": "9.11.0",
     "husky": "8.0.1",
     "react-dev-utils": "^12.0.1",
-    "react-test-renderer": "^16.14.0",
     "redux-mock-store": "1.5.4"
   }
 }

src/components/BasicAlert.jsx

@@ -30,6 +30,7 @@ const BasicAlert = ({ isModal, isVisible, onClose }) => {
 
   return isModal ? (
     <AlertModal
+      data-testid="basic-alert"
       variant="danger"
       title={title}
       icon={Info}
@@ -46,7 +47,12 @@ const BasicAlert = ({ isModal, isVisible, onClose }) => {
       <p>{body}</p>
     </AlertModal>
   ) : (
-    <Alert variant="danger" icon={Info} show={isVisible}>
+    <Alert
+      data-testid="basic-alert"
+      variant="danger"
+      icon={Info}
+      show={isVisible}
+    >
       <Alert.Heading>{title}</Alert.Heading>
       <p>{body}</p>
     </Alert>

src/components/NotFoundPage.test.jsx

@@ -1,20 +1,15 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { render } from '../testing';
 
 import NotFoundPage from './NotFoundPage';
 
 describe('<NotFoundPage />', () => {
-  describe('Renders NotFoundPage', () => {
-    it('renders not found page', () => {
-      const tree = renderer
-        .create((
-          <IntlProvider locale="en">
-            <NotFoundPage />
-          </IntlProvider>
-        ))
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
+  it('Renders not found message', () => {
+    const { getByText } = render(<NotFoundPage />);
+    expect(
+      getByText(
+        "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
+      ),
+    ).toBeInTheDocument();
   });
 });

src/components/SupportLink.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '../testing';
+
+import SupportLink from './SupportLink';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: () => ({
+    SUPPORT_URL: 'https://example.com/support',
+  }),
+}));
+
+describe('<SupportLink />', () => {
+  it('Renders support link', () => {
+    const { getByText } = render(<SupportLink />);
+
+    const contactSupportLink = getByText('contact support');
+    expect(contactSupportLink).toBeInTheDocument();
+    expect(contactSupportLink).toHaveAttribute(
+      'href',
+      'https://example.com/support/hc/requests/new',
+    );
+  });
+});

src/order-history/OrderHistoryPage.test.jsx

@@ -1,13 +1,9 @@
 /* eslint-disable global-require */
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { Provider } from 'react-redux';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import configureMockStore from 'redux-mock-store';
+import { render } from '../testing';
 
 import ConnectedOrderHistoryPage from './OrderHistoryPage';
 
-const mockStore = configureMockStore();
 const storeMocks = require('../store/__mocks__/mockStore');
 
 const requiredOrderHistoryPageProps = {
@@ -24,19 +20,18 @@ global.matchMedia = (media) => ({
   matches: true,
 });
 
+const matchSnapshot = (store) => {
+  const { container } = render(
+    <ConnectedOrderHistoryPage {...requiredOrderHistoryPageProps} />,
+    store,
+  );
+  expect(container.querySelector('section')).toMatchSnapshot();
+};
+
 describe('<OrderHistoryPage />', () => {
   describe('Renders correctly in various states', () => {
     it('renders orders table with pagination', () => {
-      const tree = renderer
-        .create(
-          <IntlProvider locale="en">
-            <Provider store={mockStore(storeMocks)}>
-              <ConnectedOrderHistoryPage {...requiredOrderHistoryPageProps} />
-            </Provider>
-          </IntlProvider>,
-        )
-        .toJSON();
-      expect(tree).toMatchSnapshot();
+      matchSnapshot(storeMocks);
     });
 
     it('renders empty orders', () => {
@@ -51,16 +46,7 @@ describe('<OrderHistoryPage />', () => {
         },
       };
 
-      const tree = renderer
-        .create(
-          <IntlProvider locale="en">
-            <Provider store={mockStore(storeMockWithoutOrders)}>
-              <ConnectedOrderHistoryPage {...requiredOrderHistoryPageProps} />
-            </Provider>
-          </IntlProvider>,
-        )
-        .toJSON();
-      expect(tree).toMatchSnapshot();
+      matchSnapshot(storeMockWithoutOrders);
     });
 
     it('renders loading state', () => {
@@ -77,16 +63,7 @@ describe('<OrderHistoryPage />', () => {
         },
       };
 
-      const tree = renderer
-        .create(
-          <IntlProvider locale="en">
-            <Provider store={mockStore(storeMockWithLoading)}>
-              <ConnectedOrderHistoryPage {...requiredOrderHistoryPageProps} />
-            </Provider>
-          </IntlProvider>,
-        )
-        .toJSON();
-      expect(tree).toMatchSnapshot();
+      matchSnapshot(storeMockWithLoading);
     });
   });
 });

src/order-history/__snapshots__/OrderHistoryPage.test.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<OrderHistoryPage /> Renders correctly in various states renders empty orders 1`] = `
 <section
-  className="page__order-history"
+  class="page__order-history"
 >
   <h1>
     Order History
@@ -17,27 +17,23 @@ exports[`<OrderHistoryPage /> Renders correctly in various states renders empty
 
 exports[`<OrderHistoryPage /> Renders correctly in various states renders loading state 1`] = `
 <section
-  className="page__order-history"
+  class="page__order-history"
 >
   <h1>
     Order History
   </h1>
   <div>
     <div>
       <div
-        className="d-flex justify-content-center align-items-center flex-column"
-        style={
-          Object {
-            "height": "50vh",
-          }
-        }
+        class="d-flex justify-content-center align-items-center flex-column"
+        style="height: 50vh;"
       >
         <div
-          className="spinner-border text-primary"
+          class="spinner-border text-primary"
           role="status"
         >
           <span
-            className="sr-only"
+            class="sr-only"
           >
             Loading orders...
           </span>
@@ -50,49 +46,47 @@ exports[`<OrderHistoryPage /> Renders correctly in various states renders loadin
 
 exports[`<OrderHistoryPage /> Renders correctly in various states renders orders table with pagination 1`] = `
 <section
-  className="page__order-history"
+  class="page__order-history"
 >
   <h1>
     Order History
   </h1>
   <div>
     <nav
       aria-label="pagination navigation"
-      className="pagination-margin pagination-default"
+      class="pagination-margin pagination-default"
     >
       <div
-        aria-atomic={true}
+        aria-atomic="true"
         aria-live="polite"
         aria-relevant="text"
-        className="sr-only"
+        class="sr-only"
       >
         Page 2, Current Page, of 10
       </div>
       <ul
-        className="pagination"
+        class="pagination"
       >
         <li
-          className="page-item"
+          class="page-item"
         >
           <button
             aria-label="Previous, Page 1"
-            className="previous page-link btn btn-primary"
-            disabled={false}
-            onClick={[Function]}
+            class="previous page-link btn btn-primary"
             type="button"
           >
             <div>
               <span
-                className="pgn__icon"
+                class="pgn__icon"
               >
                 <svg
-                  aria-hidden={true}
+                  aria-hidden="true"
                   fill="none"
-                  focusable={false}
-                  height={24}
+                  focusable="false"
+                  height="24"
                   role="img"
                   viewBox="0 0 24 24"
-                  width={24}
+                  width="24"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
@@ -106,28 +100,26 @@ exports[`<OrderHistoryPage /> Renders correctly in various states renders orders
           </button>
         </li>
         <li
-          className="page-item"
+          class="page-item"
         >
           <button
             aria-label="Next, Page 3"
-            className="next page-link btn btn-primary"
-            disabled={false}
-            onClick={[Function]}
+            class="next page-link btn btn-primary"
             type="button"
           >
             <div>
               Next
               <span
-                className="pgn__icon"
+                class="pgn__icon"
               >
                 <svg
-                  aria-hidden={true}
+                  aria-hidden="true"
                   fill="none"
-                  focusable={false}
-                  height={24}
+                  focusable="false"
+                  height="24"
                   role="img"
                   viewBox="0 0 24 24"
-                  width={24}
+                  width="24"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path