Merge branch 'master' of https://github.com/openedx/frontend-app-learner-dashboard into mashal-m/replace-edx/paragon-frontend-build

.github/CODEOWNERS

@@ -1,8 +1,8 @@
 # Root app is developed and owned by Aurora
-*   @edx/content-aurora
+*   @openedx/2U-aperture
 
 # WIDGETS and experiments are developed and owned by separate teams below
 
 # Recommendations panel
-/src/widgets/RecommendationsPanel       @edx/vanguards
+/src/widgets/RecommendationsPanel       @openedx/2U-vanguards
-/src/widgets/LookingForChallengeWidget  @edx/vanguards
+/src/widgets/LookingForChallengeWidget  @openedx/2U-vanguards

.github/renovate.json

@@ -0,0 +1,33 @@
+{
+    "extends": [
+      "config:base",
+      "schedule:weekly",
+      ":automergeLinters",
+      ":automergeMinor",
+      ":automergeTesters",
+      ":enableVulnerabilityAlerts",
+      ":rebaseStalePrs",
+      ":semanticCommits",
+      ":updateNotScheduled"
+    ],
+    "packageRules": [
+      {
+        "matchDepTypes": [
+          "devDependencies"
+        ],
+        "matchUpdateTypes": [
+          "lockFileMaintenance",
+          "minor",
+          "patch",
+          "pin"
+        ],
+        "automerge": true
+      },
+      {
+        "matchPackagePatterns": ["@edx", "@openedx"],
+        "matchUpdateTypes": ["minor", "patch"],
+        "automerge": true
+      }
+    ],
+    "timezone": "America/New_York"
+  }

Makefile

@@ -63,12 +63,13 @@ pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
-      && atlas pull --filter=$(transifex_langs) \
+      && atlas pull $(ATLAS_OPTIONS) \
+               translations/frontend-platform/src/i18n/messages:frontend-platform \
                translations/paragon/src/i18n/messages:paragon \
                translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
                translations/frontend-app-learner-dashboard/src/i18n/messages:frontend-app-learner-dashboard
 
-	$(intl_imports) paragon frontend-component-footer frontend-app-learner-dashboard
+	$(intl_imports) frontend-platform paragon frontend-component-footer frontend-app-learner-dashboard
 endif
 
 # This target is used by CI.

jest.config.js

@@ -6,9 +6,6 @@ module.exports = createConfig('jest', {
     '<rootDir>/src/setupTest.jsx',
   ],
   modulePaths: ['<rootDir>/src/'],
-  snapshotSerializers: [
-    'enzyme-to-json/serializer',
-  ],
   coveragePathIgnorePatterns: [
     'src/segment.js',
     'src/postcss.config.js',

package-lock.json

@@ -14,6 +14,7 @@
         "@edx/frontend-component-footer": "^12.2.1",
         "@edx/frontend-enterprise-hotjar": "^2.0.0",
         "@edx/frontend-platform": "^5.5.4",
+        "@edx/openedx-atlas": "^0.6.0",
         "@edx/react-unit-test-utils": "^1.7.0",
         "@fortawesome/fontawesome-svg-core": "^1.2.36",
         "@fortawesome/free-brands-svg-icons": "^5.15.4",
@@ -29,8 +30,6 @@
         "core-js": "3.16.2",
         "dompurify": "^2.3.1",
         "email-prop-type": "^3.0.1",
-        "enzyme": "^3.11.0",
-        "enzyme-to-json": "^3.6.2",
         "file-saver": "^2.0.5",
         "filesize": "^8.0.6",
         "font-awesome": "4.7.0",
@@ -67,7 +66,6 @@
         "@openedx/frontend-build": "13.0.19",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^12.1.0",
-        "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
         "axios-mock-adapter": "^1.20.0",
         "copy-webpack-plugin": "^11.0.0",
         "fetch-mock": "^9.11.0",
@@ -2643,10 +2641,18 @@
         "@newrelic/publish-sourcemap": "^5.0.1"
       }
     },
+    "node_modules/@edx/openedx-atlas": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@edx/openedx-atlas/-/openedx-atlas-0.6.0.tgz",
+      "integrity": "sha512-wZO7hA4VJ/bXjaQNNR7KXGYyTCNs1mBJd3HwQK2EmOwFZYFNX6nzSAm9S7HCfi/kb1PCRpmp3wJt+v/Eu9BEQg==",
+      "bin": {
+        "atlas": "atlas"
+      }
+    },
     "node_modules/@edx/paragon": {
-      "version": "20.46.2",
+      "version": "20.46.3",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.46.2.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.46.3.tgz",
-      "integrity": "sha512-px+KS/BV1CbiMKgfVgUofyjJi4CHUCUOLRukJbT66VPPqWP4Xon5Rns6uohoratPXMg2kNN46v2L8wIwqKQ4Lw==",
+      "integrity": "sha512-cHxoxoOREVFbBqW9IRAtlIAQo1lcF9JJXkLoEw1Vam6oetKSa5Mc0SL5kykbV+1iRPP7kS8A0Csf5nRr0oolLQ==",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/react-fontawesome": "^0.1.18",
@@ -2754,9 +2760,9 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/@edx/react-unit-test-utils": {
-      "version": "1.7.0",
+      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/@edx/react-unit-test-utils/-/react-unit-test-utils-1.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/react-unit-test-utils/-/react-unit-test-utils-1.7.1.tgz",
-      "integrity": "sha512-wuUIelYGa9P5/n4+qDGevWH+cQS8iUOzTHpoc5yujqDED85i733U2Yt6cI+jSTAfQtCzPBn2pkGYdCLz5zL+hw==",
+      "integrity": "sha512-EEMoy0SIZOpJAsrr8BNxW+ZL13UzqCw0z5MFNO1AGgElsUbiXiVY/ReRkstLJjf4CFiXro6mFhtKMFmz1Wg2cQ==",
       "dependencies": {
         "@edx/browserslist-config": "^1.1.1",
         "@edx/frontend-platform": "4.6.0",
@@ -7570,14 +7576,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/cheerio": {
-      "version": "0.22.31",
-      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.31.tgz",
-      "integrity": "sha512-Kt7Cdjjdi2XWSfrZ53v4Of0wG3ZcmaegFXjMmz9tfNrZSkzzo36G0AL1YqSdcIA78Etjt6E609pt5h1xnQkPUw==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/connect": {
       "version": "3.4.36",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.36.tgz",
@@ -8112,46 +8110,6 @@
         }
       }
     },
-    "node_modules/@wojtekmaj/enzyme-adapter-react-17": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@wojtekmaj/enzyme-adapter-react-17/-/enzyme-adapter-react-17-0.8.0.tgz",
-      "integrity": "sha512-zeUGfQRziXW7R7skzNuJyi01ZwuKCH8WiBNnTgUJwdS/CURrJwAhWsfW7nG7E30ak8Pu3ZwD9PlK9skBfAoOBw==",
-      "dev": true,
-      "dependencies": {
-        "@wojtekmaj/enzyme-adapter-utils": "^0.2.0",
-        "enzyme-shallow-equal": "^1.0.0",
-        "has": "^1.0.0",
-        "prop-types": "^15.7.0",
-        "react-is": "^17.0.0",
-        "react-test-renderer": "^17.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/wojtekmaj/enzyme-adapter-react-17?sponsor=1"
-      },
-      "peerDependencies": {
-        "enzyme": "^3.0.0",
-        "react": "^17.0.0-0",
-        "react-dom": "^17.0.0-0"
-      }
-    },
-    "node_modules/@wojtekmaj/enzyme-adapter-utils": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@wojtekmaj/enzyme-adapter-utils/-/enzyme-adapter-utils-0.2.0.tgz",
-      "integrity": "sha512-ZvZm9kZxZEKAbw+M1/Q3iDuqQndVoN8uLnxZ8bzxm7KgGTBejrGRoJAp8f1EN8eoO3iAjBNEQnTDW/H4Ekb0FQ==",
-      "dev": true,
-      "dependencies": {
-        "function.prototype.name": "^1.1.0",
-        "has": "^1.0.0",
-        "object.fromentries": "^2.0.0",
-        "prop-types": "^15.7.0"
-      },
-      "funding": {
-        "url": "https://github.com/wojtekmaj/enzyme-adapter-utils?sponsor=1"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0-0"
-      }
-    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -8536,24 +8494,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/array.prototype.filter": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.filter/-/array.prototype.filter-1.0.2.tgz",
-      "integrity": "sha512-us+UrmGOilqttSOgoWZTpOvHu68vZT2YCjc/H4vhu56vzZpaDFBhB+Se2UwqWzMKbDv7Myq5M5pcZLAtUvTQdQ==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "es-array-method-boxes-properly": "^1.0.0",
-        "is-string": "^1.0.7"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/array.prototype.flat": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
@@ -9716,42 +9656,6 @@
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
     },
-    "node_modules/cheerio": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
-      "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
-      "dependencies": {
-        "cheerio-select": "^2.1.0",
-        "dom-serializer": "^2.0.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.0.1",
-        "htmlparser2": "^8.0.1",
-        "parse5": "^7.0.0",
-        "parse5-htmlparser2-tree-adapter": "^7.0.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
-      }
-    },
-    "node_modules/cheerio-select": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
-      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-select": "^5.1.0",
-        "css-what": "^6.1.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
     "node_modules/child_process": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/child_process/-/child_process-1.0.2.tgz",
@@ -11291,11 +11195,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/discontinuous-range": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
-      "integrity": "sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ=="
-    },
     "node_modules/dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -11720,71 +11619,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/enzyme": {
-      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.11.0.tgz",
-      "integrity": "sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==",
-      "dependencies": {
-        "array.prototype.flat": "^1.2.3",
-        "cheerio": "^1.0.0-rc.3",
-        "enzyme-shallow-equal": "^1.0.1",
-        "function.prototype.name": "^1.1.2",
-        "has": "^1.0.3",
-        "html-element-map": "^1.2.0",
-        "is-boolean-object": "^1.0.1",
-        "is-callable": "^1.1.5",
-        "is-number-object": "^1.0.4",
-        "is-regex": "^1.0.5",
-        "is-string": "^1.0.5",
-        "is-subset": "^0.1.1",
-        "lodash.escape": "^4.0.1",
-        "lodash.isequal": "^4.5.0",
-        "object-inspect": "^1.7.0",
-        "object-is": "^1.0.2",
-        "object.assign": "^4.1.0",
-        "object.entries": "^1.1.1",
-        "object.values": "^1.1.1",
-        "raf": "^3.4.1",
-        "rst-selector-parser": "^2.2.3",
-        "string.prototype.trim": "^1.2.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/enzyme-shallow-equal": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.5.tgz",
-      "integrity": "sha512-i6cwm7hN630JXenxxJFBKzgLC3hMTafFQXflvzHgPmDhOBhxUWDe8AeRv1qp2/uWJ2Y8z5yLWMzmAfkTOiOCZg==",
-      "dependencies": {
-        "has": "^1.0.3",
-        "object-is": "^1.1.5"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/enzyme-to-json": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.6.2.tgz",
-      "integrity": "sha512-Ynm6Z6R6iwQ0g2g1YToz6DWhxVnt8Dy1ijR2zynRKxTyBGA8rCDXU3rs2Qc4OKvUvc2Qoe1bcFK6bnPs20TrTg==",
-      "dependencies": {
-        "@types/cheerio": "^0.22.22",
-        "lodash": "^4.17.21",
-        "react-is": "^16.12.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "peerDependencies": {
-        "enzyme": "^3.4.0"
-      }
-    },
-    "node_modules/enzyme-to-json/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -11853,11 +11687,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/es-array-method-boxes-properly": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
-      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA=="
-    },
     "node_modules/es-get-iterator": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
@@ -14429,18 +14258,6 @@
         "entities": "^3.0.1"
       }
     },
-    "node_modules/html-element-map": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.3.1.tgz",
-      "integrity": "sha512-6XMlxrAFX4UEEGxctfFnmrFaaZFNf9i5fNuV5wZ3WWQ4FVaNP1aX1LkX9j2mfEx1NpjeE/rL3nmgEn23GdFmrg==",
-      "dependencies": {
-        "array.prototype.filter": "^1.0.0",
-        "call-bind": "^1.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -14551,24 +14368,6 @@
         "webpack": "^5.20.0"
       }
     },
-    "node_modules/htmlparser2": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
-      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
-      "funding": [
-        "https://github.com/fb55/htmlparser2?sponsor=1",
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.0.1",
-        "entities": "^4.4.0"
-      }
-    },
     "node_modules/http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -15628,7 +15427,8 @@
     "node_modules/is-subset": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
-      "integrity": "sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw=="
+      "integrity": "sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw==",
+      "dev": true
     },
     "node_modules/is-symbol": {
       "version": "1.0.4",
@@ -18635,7 +18435,8 @@
     "node_modules/lodash.escape": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
-      "integrity": "sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw=="
+      "integrity": "sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw==",
+      "peer": true
     },
     "node_modules/lodash.escaperegexp": {
       "version": "4.1.2",
@@ -18649,11 +18450,6 @@
       "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==",
       "peer": true
     },
-    "node_modules/lodash.flattendeep": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
-      "integrity": "sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ=="
-    },
     "node_modules/lodash.invokemap": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz",
@@ -18663,7 +18459,8 @@
     "node_modules/lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "dev": true
     },
     "node_modules/lodash.ismatch": {
       "version": "4.4.0",
@@ -19349,11 +19146,6 @@
         "node": "*"
       }
     },
-    "node_modules/moo": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
-      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q=="
-    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -19441,32 +19233,6 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
-    "node_modules/nearley": {
-      "version": "2.20.1",
-      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
-      "integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==",
-      "dependencies": {
-        "commander": "^2.19.0",
-        "moo": "^0.5.0",
-        "railroad-diagrams": "^1.0.0",
-        "randexp": "0.4.6"
-      },
-      "bin": {
-        "nearley-railroad": "bin/nearley-railroad.js",
-        "nearley-test": "bin/nearley-test.js",
-        "nearley-unparse": "bin/nearley-unparse.js",
-        "nearleyc": "bin/nearleyc.js"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://nearley.js.org/#give-to-nearley"
-      }
-    },
-    "node_modules/nearley/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -22880,29 +22646,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/parse5": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
-      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-      "dependencies": {
-        "entities": "^4.4.0"
-      },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
-    "node_modules/parse5-htmlparser2-tree-adapter": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
-      "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
-      "dependencies": {
-        "domhandler": "^5.0.2",
-        "parse5": "^7.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -22989,11 +22732,6 @@
         }
       }
     },
-    "node_modules/performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
-    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -24195,31 +23933,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/raf": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
-      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "dependencies": {
-        "performance-now": "^2.1.0"
-      }
-    },
-    "node_modules/railroad-diagrams": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
-      "integrity": "sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A=="
-    },
-    "node_modules/randexp": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
-      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
-      "dependencies": {
-        "discontinuous-range": "1.0.0",
-        "ret": "~0.1.10"
-      },
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -25673,15 +25386,6 @@
         "rimraf": "bin.js"
       }
     },
-    "node_modules/rst-selector-parser": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
-      "integrity": "sha512-nDG1rZeP6oFTLN6yNDV/uiAvs1+FS/KlrEwh7+y7dpuApDBy6bI2HTBcc0/V8lv9OTqfyD34eF7au2pm8aBbhA==",
-      "dependencies": {
-        "lodash.flattendeep": "^4.4.0",
-        "nearley": "^2.7.10"
-      }
-    },
     "node_modules/rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",

package.json

@@ -31,6 +31,7 @@
     "@edx/frontend-component-footer": "^12.2.1",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
     "@edx/frontend-platform": "^5.5.4",
+    "@edx/openedx-atlas": "^0.6.0",
     "@openedx/paragon": "^21.11.3",
     "@edx/react-unit-test-utils": "^1.7.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
@@ -46,8 +47,6 @@
     "core-js": "3.16.2",
     "dompurify": "^2.3.1",
     "email-prop-type": "^3.0.1",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.2",
     "file-saver": "^2.0.5",
     "filesize": "^8.0.6",
     "font-awesome": "4.7.0",
@@ -84,7 +83,6 @@
     "@edx/reactifex": "^2.1.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "axios-mock-adapter": "^1.20.0",
     "copy-webpack-plugin": "^11.0.0",
     "fetch-mock": "^9.11.0",

src/ExperimentContext.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { waitFor, render } from '@testing-library/react';
-import { waitFor } from '@testing-library/react';
 import { useWindowSize } from '@openedx/paragon';
 
 import api from 'widgets/ProductRecommendations/api';
@@ -40,7 +39,7 @@ describe('experiments context', () => {
         it('calls useEffect once', () => {
           expect(calls.length).toEqual(1);
         });
-        describe('successfull fetch', () => {
+        describe('successful fetch', () => {
           it('sets the country code', async () => {
             let resolveFn;
             api.fetchRecommendationsContext.mockReturnValueOnce(
@@ -58,7 +57,7 @@ describe('experiments context', () => {
             });
           });
         });
-        describe('unsuccessfull fetch', () => {
+        describe('unsuccessful fetch', () => {
           it('sets the country code to an empty string', async () => {
             let rejectFn;
             api.fetchRecommendationsContext.mockReturnValueOnce(
@@ -109,7 +108,7 @@ describe('experiments context', () => {
 
       state.mock();
 
-      mount(
+      render(
         <ExperimentProvider>
           <TestComponent />
         </ExperimentProvider>,

src/components/Banner.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { Alert } from '@openedx/paragon';
 
@@ -11,17 +11,17 @@ describe('Banner', () => {
   describe('snapshot', () => {
     test('renders default banner', () => {
       const wrapper = shallow(<Banner {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('renders with variants', () => {
       const wrapper = shallow(<Banner {...props} variant="success" />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
 
-      expect(wrapper.find(Alert).prop('variant')).toEqual('success');
+      expect(wrapper.instance.findByType(Alert)[0].props.variant).toEqual('success');
     });
     test('renders with custom class', () => {
       const wrapper = shallow(<Banner {...props} className="custom-class" />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 });

src/components/NoticesWrapper/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import useNoticesWrapperData from './hooks';
 import NoticesWrapper from '.';
@@ -22,13 +22,15 @@ describe('NoticesWrapper component', () => {
     it('does not show children if redirected', () => {
       useNoticesWrapperData.mockReturnValueOnce({ isRedirected: true });
       el = shallow(<NoticesWrapper>{children}</NoticesWrapper>);
-      expect(el.children().length).toEqual(0);
+      expect(el.instance.children.length).toEqual(0);
     });
     it('shows children if not redirected', () => {
       el = shallow(<NoticesWrapper>{children}</NoticesWrapper>);
-      expect(el.children().length).toEqual(2);
+      expect(el.instance.children.length).toEqual(2);
-      expect(el.children().at(0).matchesElement(children[0])).toEqual(true);
+      expect(el.instance.children[0].type).toEqual(shallow(children[0]).type);
-      expect(el.children().at(1).matchesElement(children[1])).toEqual(true);
+      expect(el.instance.props).toEqual(shallow(children[0]).props);
+      expect(el.instance.children[1].type).toEqual(shallow(children[1]).type);
+      expect(el.instance.props).toEqual(shallow(children[1]).props);
     });
   });
 });

src/components/ZendeskFab/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import ZendeskFab from '.';
 
@@ -7,6 +7,6 @@ jest.mock('react-zendesk', () => 'Zendesk');
 describe('ZendeskFab', () => {
   test('snapshot', () => {
     const wrapper = shallow(<ZendeskFab />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
   });
 });

src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import ActionButton from '.';
 
@@ -14,12 +14,12 @@ describe('ActionButton', () => {
     test('is collapsed', () => {
       useIsCollapsed.mockReturnValueOnce(true);
       const wrapper = shallow(<ActionButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is not collapsed', () => {
       useIsCollapsed.mockReturnValueOnce(false);
       const wrapper = shallow(<ActionButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 });

src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx

@@ -1,6 +1,5 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { htmlProps } from 'data/constants/htmlKeys';
 import { reduxHooks } from 'hooks';
 import track from 'tracking';
 import useActionDisabledState from '../hooks';
@@ -59,10 +58,10 @@ describe('BeginCourseButton', () => {
         wrapper = shallow(<BeginCourseButton {...props} />);
       });
       test('snapshot', () => {
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.snapshot).toMatchSnapshot();
       });
       it('should be disabled', () => {
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+        expect(wrapper.instance.props.disabled).toEqual(true);
       });
     });
     describe('enabled', () => {
@@ -70,13 +69,13 @@ describe('BeginCourseButton', () => {
         wrapper = shallow(<BeginCourseButton {...props} />);
       });
       test('snapshot', () => {
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.snapshot).toMatchSnapshot();
       });
       it('should be enabled', () => {
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+        expect(wrapper.instance.props.disabled).toEqual(false);
       });
       it('should track enter course clicked event on click, with exec ed param', () => {
-        expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
+        expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
           track.course.enterCourseClicked,
           props.cardId,
           homeUrl + execEdPath(props.cardId),

src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx

@@ -1,6 +1,5 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { htmlProps } from 'data/constants/htmlKeys';
 import { reduxHooks } from 'hooks';
 import track from 'tracking';
 import useActionDisabledState from '../hooks';
@@ -57,10 +56,10 @@ describe('ResumeButton', () => {
         wrapper = shallow(<ResumeButton {...props} />);
       });
       test('snapshot', () => {
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.snapshot).toMatchSnapshot();
       });
       it('should be disabled', () => {
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+        expect(wrapper.instance.props.disabled).toEqual(true);
       });
     });
     describe('enabled', () => {
@@ -68,13 +67,13 @@ describe('ResumeButton', () => {
         wrapper = shallow(<ResumeButton {...props} />);
       });
       test('snapshot', () => {
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.snapshot).toMatchSnapshot();
       });
       it('should be enabled', () => {
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+        expect(wrapper.instance.props.disabled).toEqual(false);
       });
       it('should track enter course clicked event on click, with exec ed param', () => {
-        expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
+        expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
           track.course.enterCourseClicked,
           props.cardId,
           resumeUrl + execEdPath(props.cardId),

src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx

@@ -1,7 +1,6 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
-import { htmlProps } from 'data/constants/htmlKeys';
 import useActionDisabledState from '../hooks';
 
 import SelectSessionButton from './SelectSessionButton';
@@ -19,17 +18,17 @@ let wrapper;
 describe('SelectSessionButton', () => {
   const props = { cardId: 'cardId' };
   it('default render', () => {
-    expect(wrapper).toMatchSnapshot();
     wrapper = shallow(<SelectSessionButton {...props} />);
-    expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.prop(htmlProps.onClick).getMockName()).toEqual(
+    expect(wrapper.instance.props.disabled).toEqual(false);
+    expect(wrapper.instance.props.onClick.getMockName()).toEqual(
       reduxHooks.useUpdateSelectSessionModalCallback().getMockName(),
     );
   });
   test('disabled states', () => {
     useActionDisabledState.mockReturnValueOnce({ disableSelectSession: true });
-    expect(wrapper).toMatchSnapshot();
     wrapper = shallow(<SelectSessionButton {...props} />);
-    expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+    expect(wrapper.snapshot).toMatchSnapshot();
+    expect(wrapper.instance.props.disabled).toEqual(true);
   });
 });

src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx

@@ -1,8 +1,7 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import track from 'tracking';
 import { reduxHooks } from 'hooks';
-import { htmlProps } from 'data/constants/htmlKeys';
 import useActionDisabledState from '../hooks';
 import UpgradeButton from './UpgradeButton';
 
@@ -32,9 +31,9 @@ describe('UpgradeButton', () => {
   describe('snapshot', () => {
     test('can upgrade', () => {
       const wrapper = shallow(<UpgradeButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+      expect(wrapper.instance.props.disabled).toEqual(false);
-      expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
+      expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
         track.course.upgradeClicked,
         props.cardId,
         upgradeUrl,
@@ -43,8 +42,8 @@ describe('UpgradeButton', () => {
     test('cannot upgrade', () => {
       useActionDisabledState.mockReturnValueOnce({ disableUpgradeCourse: true });
       const wrapper = shallow(<UpgradeButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+      expect(wrapper.instance.props.disabled).toEqual(true);
     });
   });
 });

src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx

@@ -1,7 +1,6 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import track from 'tracking';
-import { htmlProps } from 'data/constants/htmlKeys';
 import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ViewCourseButton from './ViewCourseButton';
@@ -29,18 +28,18 @@ const homeUrl = 'homeUrl';
 describe('ViewCourseButton', () => {
   test('learner can view course', () => {
     const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
+    expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
       track.course.enterCourseClicked,
       defaultProps.cardId,
       homeUrl,
     ));
-    expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+    expect(wrapper.instance.props.disabled).toEqual(false);
   });
   test('learner cannot view course', () => {
     useActionDisabledState.mockReturnValueOnce({ disableViewCourse: true });
     const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+    expect(wrapper.instance.props.disabled).toEqual(true);
   });
 });

src/containers/CourseCard/components/CourseCardActions/__snapshots__/SelectSessionButton.test.jsx.snap

@@ -1,8 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SelectSessionButton default render 1`] = `undefined`;
+exports[`SelectSessionButton default render 1`] = `
-
-exports[`SelectSessionButton disabled states 1`] = `
 <ActionButton
   disabled={false}
   onClick={[MockFunction mockOpenSessionModal]}
@@ -10,3 +8,12 @@ exports[`SelectSessionButton disabled states 1`] = `
   Select Session
 </ActionButton>
 `;
+
+exports[`SelectSessionButton disabled states 1`] = `
+<ActionButton
+  disabled={true}
+  onClick={[MockFunction mockOpenSessionModal]}
+>
+  Select Session
+</ActionButton>
+`;

src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import CertificateBanner from './CertificateBanner';
@@ -61,7 +61,7 @@ describe('CertificateBanner', () => {
           isRestricted: true,
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is restricted with support email', () => {
       const wrapper = createWrapper({
@@ -72,7 +72,7 @@ describe('CertificateBanner', () => {
           supportEmail: 'suport@email',
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is restricted with billing email', () => {
       const wrapper = createWrapper({
@@ -83,7 +83,7 @@ describe('CertificateBanner', () => {
           billingEmail: 'billing@email',
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is restricted and verified', () => {
       const wrapper = createWrapper({
@@ -94,7 +94,7 @@ describe('CertificateBanner', () => {
           isVerified: true,
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is restricted and verified with support email', () => {
       const wrapper = createWrapper({
@@ -108,7 +108,7 @@ describe('CertificateBanner', () => {
           supportEmail: 'suport@email',
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is restricted and verified with billing email', () => {
       const wrapper = createWrapper({
@@ -122,7 +122,7 @@ describe('CertificateBanner', () => {
           billingEmail: 'billing@email',
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is restricted and verified with support and billing email', () => {
       const wrapper = createWrapper({
@@ -137,21 +137,21 @@ describe('CertificateBanner', () => {
           billingEmail: 'billing@email',
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is passing and is downloadable', () => {
       const wrapper = createWrapper({
         grade: { isPassing: true },
         certificate: { isDownloadable: true },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('not passing and is downloadable', () => {
       const wrapper = createWrapper({
         grade: { isPassing: false },
         certificate: { isDownloadable: true },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('not passing and audit', () => {
       const wrapper = createWrapper({
@@ -159,17 +159,17 @@ describe('CertificateBanner', () => {
           isAudit: true,
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('not passing and has finished', () => {
       const wrapper = createWrapper({
         courseRun: { isArchived: true },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('not passing and not audit and not finished', () => {
       const wrapper = createWrapper({});
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is passing and is earned but unavailable', () => {
       const wrapper = createWrapper({
@@ -180,7 +180,7 @@ describe('CertificateBanner', () => {
           isEarnedButUnavailable: true,
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is passing and not downloadable render empty', () => {
       const wrapper = createWrapper({
@@ -188,7 +188,7 @@ describe('CertificateBanner', () => {
           isPassing: true,
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
   describe('behavior', () => {
@@ -202,7 +202,7 @@ describe('CertificateBanner', () => {
           billingEmail: 'billing@email',
         },
       });
-      const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
+      const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n');
       expect(bannerMessage).toEqual(messages.certRestricted.defaultMessage);
       expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
     });
@@ -219,7 +219,7 @@ describe('CertificateBanner', () => {
           billingEmail: 'billing@email',
         },
       });
-      const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
+      const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n');
       expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
       expect(bannerMessage).toContain(messages.certRefundContactBilling.defaultMessage);
     });

src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { Hyperlink } from '@openedx/paragon';
 
 import { reduxHooks } from 'hooks';
@@ -70,11 +70,11 @@ describe('CourseBanner', () => {
       render({ enrollment: { isAuditAccessExpired: true, canUpgrade: true } });
     });
     test('snapshot: (auditAccessExpired, upgradeToAccess)', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('messages: (auditAccessExpired, upgradeToAccess)', () => {
-      expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage);
+      expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
-      expect(el.text()).toContain(messages.upgradeToAccess.defaultMessage);
+      expect(el.instance.children[0].children[2].el).toContain(messages.upgradeToAccess.defaultMessage);
     });
   });
   describe('audit access expired, cannot upgrade', () => {
@@ -82,11 +82,11 @@ describe('CourseBanner', () => {
       render({ enrollment: { isAuditAccessExpired: true } });
     });
     test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('messages: (auditAccessExpired, upgradeToAccess)', () => {
-      expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage);
+      expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
-      expect(el.find(Hyperlink).text()).toEqual(messages.findAnotherCourse.defaultMessage);
+      expect(el.instance.findByType(Hyperlink)[0].children[0].el).toEqual(messages.findAnotherCourse.defaultMessage);
     });
   });
   describe('course run active and cannot upgrade', () => {
@@ -94,31 +94,31 @@ describe('CourseBanner', () => {
       render({ courseRun: { isActive: true } });
     });
     test('snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('messages: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
-      expect(el.text()).toContain(messages.upgradeDeadlinePassed.defaultMessage);
+      expect(el.instance.children[0].children[0].el).toContain(messages.upgradeDeadlinePassed.defaultMessage);
-      const link = el.find(Hyperlink);
+      const link = el.instance.findByType(Hyperlink);
-      expect(link.text()).toEqual(messages.exploreCourseDetails.defaultMessage);
+      expect(link[0].children[0].el).toEqual(messages.exploreCourseDetails.defaultMessage);
-      expect(link.props().destination).toEqual(courseRunData.marketingUrl);
+      expect(link[0].props.destination).toEqual(courseRunData.marketingUrl);
     });
   });
   test('no display if audit access not expired and (course is not active or can upgrade)', () => {
     render();
     // isEmptyRender() isn't true because the minimal is <Fragment />
-    expect(el.html()).toEqual('');
+    expect(el.instance.children).toEqual([]);
     render({ enrollment: { canUpgrade: true }, courseRun: { isActive: true } });
-    expect(el.html()).toEqual('');
+    expect(el.instance.children).toEqual([]);
   });
   describe('unmet prerequisites', () => {
     beforeEach(() => {
       render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
     });
     test('snapshot: unmetPrerequisites', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('messages: prerequisitesNotMet', () => {
-      expect(el.text()).toContain(messages.prerequisitesNotMet.defaultMessage);
+      expect(el.instance.children[0].children[0].el).toContain(messages.prerequisitesNotMet.defaultMessage);
     });
   });
   describe('too early', () => {
@@ -126,17 +126,17 @@ describe('CourseBanner', () => {
       beforeEach(() => {
         render({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
       });
-      test('snapshot', () => expect(el).toMatchSnapshot());
+      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
-      test('messages', () => expect(el.text()).toEqual(''));
+      test('messages', () => expect(el.instance.children).toEqual([]));
     });
     describe('has start date', () => {
       beforeEach(() => {
         render({ enrollment: { coursewareAccess: { isTooEarly: true } } });
       });
-      test('snapshot', () => expect(el).toMatchSnapshot());
+      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
 
       test('messages: courseHasNotStarted', () => {
-        expect(el.text()).toContain(
+        expect(el.instance.children[0].children[0].el).toContain(
           formatMessage(messages.courseHasNotStarted, { startDate: courseRunData.startDate }),
         );
       });
@@ -147,7 +147,7 @@ describe('CourseBanner', () => {
       render({ enrollment: { coursewareAccess: { isStaff: true } } });
     });
     test('snapshot: isStaff', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
   });
   test('snapshot: stacking banners', () => {
@@ -160,6 +160,6 @@ describe('CourseBanner', () => {
         },
       },
     });
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
 });

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/__snapshots__/index.test.jsx.snap

@@ -6,6 +6,7 @@ exports[`CreditBanner component render with error state snapshot 1`] = `
 >
   <p
     className="credit-error-msg"
+    data-testid="credit-error-msg"
   >
     <format-message-function
       message={
@@ -38,6 +39,7 @@ exports[`CreditBanner component render with error state with no email snapshot 1
 >
   <p
     className="credit-error-msg"
+    data-testid="credit-error-msg"
   >
     An error occurred with this transaction.
   </p>

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.jsx

@@ -21,7 +21,7 @@ export const CreditBanner = ({ cardId }) => {
   return (
     <Banner {...(error && { variant: 'danger' })}>
       {error && (
-        <p className="credit-error-msg">
+        <p className="credit-error-msg" data-testid="credit-error-msg">
           {supportEmail ? formatMessage(messages.error, { supportEmailLink }) : formatMessage(messages.errorNoEmail)}
         </p>
       )}

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from 'testUtils';
 import { MailtoLink } from '@openedx/paragon';
@@ -44,20 +44,18 @@ describe('CreditBanner component', () => {
         el = shallow(<CreditBanner cardId={cardId} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('passes danger variant to Banner parent', () => {
-        expect(el.find('Banner').props().variant).toEqual('danger');
+        expect(el.instance.findByType('Banner')[0].props.variant).toEqual('danger');
       });
       it('includes credit-error-msg with support email link', () => {
-        expect(el.find('.credit-error-msg').containsMatchingElement(
+        expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(shallow(formatMessage(messages.error, {
-          formatMessage(messages.error, {
           supportEmailLink: (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>),
-          }),
+        })));
-        )).toEqual(true);
       });
       it('loads ContentComponent with cardId', () => {
-        expect(el.find('ContentComponent').props().cardId).toEqual(cardId);
+        expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId);
       });
     });
 
@@ -70,12 +68,10 @@ describe('CreditBanner component', () => {
         el = shallow(<CreditBanner cardId={cardId} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('includes credit-error-msg without support email link', () => {
-        expect(el.find('.credit-error-msg').containsMatchingElement(
+        expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(formatMessage(messages.errorNoEmail));
-          formatMessage(messages.errorNoEmail),
-        )).toEqual(true);
       });
     });
 
@@ -89,10 +85,10 @@ describe('CreditBanner component', () => {
         el = shallow(<CreditBanner cardId={cardId} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('loads ContentComponent with cardId', () => {
-        expect(el.find('ContentComponent').props().cardId).toEqual(cardId);
+        expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId);
       });
     });
   });

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from 'testUtils';
 import { reduxHooks } from 'hooks';
@@ -38,19 +38,19 @@ describe('ApprovedContent component', () => {
     describe('rendered CreditContent component', () => {
       let component;
       beforeAll(() => {
-        component = el.find('CreditContent');
+        component = el.instance.findByType('CreditContent');
       });
       test('action.href from credit.providerStatusUrl', () => {
-        expect(component.props().action.href).toEqual(credit.providerStatusUrl);
+        expect(component[0].props.action.href).toEqual(credit.providerStatusUrl);
       });
       test('action.message is formatted viewCredit message', () => {
-        expect(component.props().action.message).toEqual(formatMessage(messages.viewCredit));
+        expect(component[0].props.action.message).toEqual(formatMessage(messages.viewCredit));
       });
       test('action.disabled is false', () => {
-        expect(component.props().action.disabled).toEqual(false);
+        expect(component[0].props.action.disabled).toEqual(false);
       });
       test('message is formatted approved message', () => {
-        expect(component.props().message).toEqual(formatMessage(
+        expect(component[0].props.message).toEqual(formatMessage(
           messages.approved,
           {
             congratulations: (<b>{formatMessage(messages.congratulations)}</b>),

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/EligibleContent.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import { formatMessage } from 'testUtils';
@@ -36,7 +36,7 @@ const render = () => {
   el = shallow(<EligibleContent cardId={cardId} />);
 };
 const loadComponent = () => {
-  component = el.find('CreditContent');
+  component = el.instance.findByType('CreditContent');
 };
 describe('EligibleContent component', () => {
   beforeEach(() => {
@@ -56,24 +56,24 @@ describe('EligibleContent component', () => {
         loadComponent();
       });
       test('action.onClick sends credit purchase track event', () => {
-        expect(component.props().action.onClick).toEqual(
+        expect(component[0].props.action.onClick).toEqual(
           track.credit.purchase(courseId),
         );
       });
       test('action.message is formatted getCredit message', () => {
-        expect(component.props().action.message).toEqual(formatMessage(messages.getCredit));
+        expect(component[0].props.action.message).toEqual(formatMessage(messages.getCredit));
       });
       test('message is formatted eligible message if no provider', () => {
         reduxHooks.useCardCreditData.mockReturnValueOnce({});
         render();
         loadComponent();
-        expect(component.props().message).toEqual(formatMessage(
+        expect(component[0].props.message).toEqual(formatMessage(
           messages.eligible,
           { getCredit: (<b>{formatMessage(messages.getCredit)}</b>) },
         ));
       });
       test('message is formatted eligible message if provider', () => {
-        expect(component.props().message).toEqual(
+        expect(component[0].props.message).toEqual(
           formatMessage(messages.eligibleFromProvider, { providerName: credit.providerName }),
         );
       });

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from 'testUtils';
 
@@ -45,21 +45,21 @@ describe('MustRequestContent component', () => {
   describe('render', () => {
     describe('rendered CreditContent component', () => {
       beforeEach(() => {
-        component = el.find('CreditContent');
+        component = el.instance.findByType('CreditContent');
       });
       test('action.onClick calls createCreditRequest from useCreditRequestData hook', () => {
-        expect(component.props().action.onClick).toEqual(createCreditRequest);
+        expect(component[0].props.action.onClick).toEqual(createCreditRequest);
       });
       test('action.message is formatted requestCredit message', () => {
-        expect(component.props().action.message).toEqual(
+        expect(component[0].props.action.message).toEqual(
           formatMessage(messages.requestCredit),
         );
       });
       test('action.disabled is false', () => {
-        expect(component.props().action.disabled).toEqual(false);
+        expect(component[0].props.action.disabled).toEqual(false);
       });
       test('message is formatted mustRequest message', () => {
-        expect(component.props().message).toEqual(
+        expect(component[0].props.message).toEqual(
           formatMessage(messages.mustRequest, {
             linkToProviderSite: <ProviderLink cardId={cardId} />,
             requestCredit: <b>{formatMessage(messages.requestCredit)}</b>,
@@ -67,7 +67,7 @@ describe('MustRequestContent component', () => {
         );
       });
       test('requestData drawn from useCreditRequestData hook', () => {
-        expect(component.props().requestData).toEqual(requestData);
+        expect(component[0].props.requestData).toEqual(requestData);
       });
     });
   });

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/PendingContent.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from 'testUtils';
 import { reduxHooks } from 'hooks';
@@ -40,21 +40,21 @@ describe('PendingContent component', () => {
   describe('render', () => {
     describe('rendered CreditContent component', () => {
       beforeEach(() => {
-        component = el.find('CreditContent');
+        component = el.instance.findByType('CreditContent');
       });
       test('action.href will go to provider status site', () => {
-        expect(component.props().action.href).toEqual(providerStatusUrl);
+        expect(component[0].props.action.href).toEqual(providerStatusUrl);
       });
       test('action.message is formatted requestCredit message', () => {
-        expect(component.props().action.message).toEqual(
+        expect(component[0].props.action.message).toEqual(
           formatMessage(messages.viewDetails),
         );
       });
       test('action.disabled is false', () => {
-        expect(component.props().action.disabled).toEqual(false);
+        expect(component[0].props.action.disabled).toEqual(false);
       });
       test('message is formatted pending message', () => {
-        expect(component.props().message).toEqual(
+        expect(component[0].props.message).toEqual(
           formatMessage(messages.received, { providerName }),
         );
       });

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/RejectedContent.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from 'testUtils';
 import { reduxHooks } from 'hooks';
@@ -25,7 +25,7 @@ reduxHooks.useCardCreditData.mockReturnValue(credit);
 let el;
 let component;
 const render = () => { el = shallow(<RejectedContent cardId={cardId} />); };
-const loadComponent = () => { component = el.find('CreditContent'); };
+const loadComponent = () => { component = el.instance.findByType('CreditContent'); };
 
 describe('RejectedContent component', () => {
   beforeEach(render);
@@ -38,10 +38,10 @@ describe('RejectedContent component', () => {
     describe('rendered CreditContent component', () => {
       beforeAll(loadComponent);
       test('no action is passed', () => {
-        expect(component.props().action).toEqual(undefined);
+        expect(component[0].props.action).toEqual(undefined);
       });
       test('message is formatted rejected message', () => {
-        expect(component.props().message).toEqual(formatMessage(
+        expect(component[0].props.message).toEqual(formatMessage(
           messages.rejected,
           {
             linkToProviderSite: <ProviderLink cardId={cardId} />,

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.jsx

@@ -6,7 +6,7 @@ import CreditRequestForm from './CreditRequestForm';
 
 export const CreditContent = ({ action, message, requestData }) => (
   <>
-    <div className="message-copy credit-msg">
+    <div className="message-copy credit-msg" data-testid="credit-msg">
       {message}
     </div>
     {action && (
@@ -21,6 +21,7 @@ export const CreditContent = ({ action, message, requestData }) => (
           variant="outline-primary"
           className="border-gray-400"
           onClick={action.onClick}
+          data-testid="action-row-btn"
         >
           {action.message}
         </Button>

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import CreditContent from './CreditContent';
 
@@ -22,24 +22,24 @@ describe('CreditContent component', () => {
         el = shallow(<CreditContent {...props} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('loads href, onClick, and message into action row button', () => {
-        const buttonEl = el.find('ActionRow Button');
+        const buttonEl = el.instance.findByTestId('action-row-btn')[0];
-        expect(buttonEl.props().href).toEqual(action.href);
+        expect(buttonEl.props.href).toEqual(action.href);
-        expect(buttonEl.props().onClick).toEqual(action.onClick);
+        expect(buttonEl.props.onClick).toEqual(action.onClick);
-        expect(buttonEl.props().disabled).toEqual(action.disabled);
+        expect(buttonEl.props.disabled).toEqual(action.disabled);
-        expect(buttonEl.text()).toEqual(action.message);
+        expect(buttonEl.children[0].el).toEqual(action.message);
       });
       it('loads message into credit-msg div', () => {
-        expect(el.find('div.credit-msg').text()).toEqual(message);
+        expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
       });
       it('loads CreditRequestForm with passed requestData', () => {
-        expect(el.find('CreditRequestForm').props().requestData).toEqual(requestData);
+        expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData);
       });
       test('disables action button when action.disabled is true', () => {
-        el.setProps({ action: { ...action, disabled: true } });
+        el = shallow(<CreditContent {...props} action={{ ...action, disabled: true }} />);
-        expect(el.find('ActionRow Button').props().disabled).toEqual(true);
+        expect(el.instance.findByTestId('action-row-btn')[0].props.disabled).toEqual(true);
       });
     });
     describe('without action', () => {
@@ -47,13 +47,13 @@ describe('CreditContent component', () => {
         el = shallow(<CreditContent {...{ message, requestData }} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('loads message into credit-msg div', () => {
-        expect(el.find('div.credit-msg').text()).toEqual(message);
+        expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
       });
       it('loads CreditRequestForm with passed requestData', () => {
-        expect(el.find('CreditRequestForm').props().requestData).toEqual(requestData);
+        expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData);
       });
     });
   });

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { keyStore } from 'utils';
 
@@ -46,19 +46,19 @@ describe('CreditRequestForm component', () => {
         shallowRender(requestData);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('loads Form with requestData url', () => {
-        expect(el.find('Form').props().action).toEqual(requestData.url);
+        expect(el.instance.findByType('Form')[0].props.action).toEqual(requestData.url);
       });
       it('loads a textarea form control for each requestData parameter', () => {
-        const controls = el.find('FormControl');
+        const controls = el.instance.findByType('FormControl');
-        expect(controls.at(0).props().name).toEqual(paramKeys.key1);
+        expect(controls[0].props.name).toEqual(paramKeys.key1);
-        expect(controls.at(0).props().value).toEqual(requestData.parameters.key1);
+        expect(controls[0].props.value).toEqual(requestData.parameters.key1);
-        expect(controls.at(1).props().name).toEqual(paramKeys.key2);
+        expect(controls[1].props.name).toEqual(paramKeys.key2);
-        expect(controls.at(1).props().value).toEqual(requestData.parameters.key2);
+        expect(controls[1].props.value).toEqual(requestData.parameters.key2);
-        expect(controls.at(2).props().name).toEqual(paramKeys.key3);
+        expect(controls[2].props.name).toEqual(paramKeys.key3);
-        expect(controls.at(2).props().value).toEqual(requestData.parameters.key3);
+        expect(controls[2].props.value).toEqual(requestData.parameters.key3);
       });
     });
   });

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/ProviderLink.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 
@@ -30,13 +30,13 @@ describe('ProviderLink component', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     it('passes credit.providerStatusUrl to the hyperlink href', () => {
-      expect(el.find('Hyperlink').props().href).toEqual(credit.providerStatusUrl);
+      expect(el.instance.findByType('Hyperlink')[0].props.href).toEqual(credit.providerStatusUrl);
     });
     it('passes providerName for the link message', () => {
-      expect(el.find('Hyperlink').text()).toEqual(credit.providerName);
+      expect(el.instance.findByType('Hyperlink')[0].children[0].el).toEqual(credit.providerName);
     });
   });
 });

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/__snapshots__/CreditContent.test.jsx.snap

@@ -4,6 +4,7 @@ exports[`CreditContent component render with action snapshot 1`] = `
 <Fragment>
   <div
     className="message-copy credit-msg"
+    data-testid="credit-msg"
   >
     test-message
   </div>
@@ -13,6 +14,7 @@ exports[`CreditContent component render with action snapshot 1`] = `
     <Button
       as="a"
       className="border-gray-400"
+      data-testid="action-row-btn"
       disabled={false}
       href="test-action-href"
       onClick={[MockFunction test-action-onClick]}
@@ -40,6 +42,7 @@ exports[`CreditContent component render without action snapshot 1`] = `
 <Fragment>
   <div
     className="message-copy credit-msg"
+    data-testid="credit-msg"
   >
     test-message
   </div>

src/containers/CourseCard/components/CourseCardBanners/EntitlementBanner.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import EntitlementBanner from './EntitlementBanner';
@@ -50,11 +50,11 @@ describe('EntitlementBanner', () => {
   });
   test('snapshot: no sessions available', () => {
     render({ entitlement: { isFulfilled: false, hasSessions: false } });
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   test('snapshot: expiration warning', () => {
     render({ entitlement: { showExpirationWarning: true } });
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   test('no display if sessions available and not displaying warning', () => {
     render();

src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/ProgramsList.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { ProgramsList } from './ProgramsList';
 
@@ -16,8 +16,8 @@ describe('ProgramsList', () => {
 
   it('renders correctly', () => {
     const wrapper = shallow(<ProgramsList programs={programs} />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
 
-    expect(wrapper.find('li').length).toEqual(programs.length);
+    expect(wrapper.instance.findByType('li').length).toEqual(programs.length);
   });
 });

src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/index.jsx

@@ -15,16 +15,20 @@ export const RelatedProgramsBanner = ({ cardId }) => {
 
   const programData = reduxHooks.useCardRelatedProgramsData(cardId);
 
+  if (!programData?.length) {
+    return null;
+  }
+
   return (
-    programData?.length > 0 && (
     <Banner
       icon={Program}
       className="bg-white border-top border-bottom mb-0 related-programs-banner"
     >
-        <span className="font-weight-bolder">{formatMessage(messages.relatedPrograms)}</span>
+      <span className="font-weight-bolder">
+        {formatMessage(messages.relatedPrograms)}
+      </span>
       <ProgramList programs={programData.list} />
     </Banner>
-    )
   );
 };
 RelatedProgramsBanner.propTypes = {

src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import RelatedProgramsBanner from '.';
@@ -37,6 +37,6 @@ describe('RelatedProgramsBanner', () => {
       length: 2,
     });
     const el = shallow(<RelatedProgramsBanner cardId={cardId} />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
 });

src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CertificateBanner.test.jsx.snap

@@ -15,7 +15,7 @@ exports[`CertificateBanner snapshot is passing and is earned but unavailable 1`]
 </Banner>
 `;
 
-exports[`CertificateBanner snapshot is passing and not downloadable render empty 1`] = `""`;
+exports[`CertificateBanner snapshot is passing and not downloadable render empty 1`] = `null`;
 
 exports[`CertificateBanner snapshot is restricted 1`] = `
 <Banner

src/containers/CourseCard/components/CourseCardBanners/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 
@@ -22,11 +22,11 @@ describe('CourseCardBanners', () => {
   };
   test('renders default CourseCardBanners', () => {
     const wrapper = shallow(<CourseCardBanners {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
   });
   test('render with isEnrolled false', () => {
     reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isEnrolled: false });
     const wrapper = shallow(<CourseCardBanners {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
   });
 });

src/containers/CourseCard/components/CourseCardDetails/__snapshots__/index.test.jsx.snap

@@ -1,54 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CourseCard Details component does not have change session button on regular course 1`] = `
-<span
+<div>
-  className="small"
+  <span
+    class="small"
     data-testid="CourseCardDetails"
->
+  >
     provider-name
      • 
     test-course-number
      • access-message
-</span>
+  </span>
+</div>
 `;
 
 exports[`CourseCard Details component has change session button on entitlement course 1`] = `
-<span
+<div>
-  className="small"
+  <span
+    class="small"
     data-testid="CourseCardDetails"
->
+  >
     provider-name
      • 
     test-course-number
      • access-message
      • 
-  <Button
+    <button
-    className="m-0 p-0"
+      class="m-0 p-0"
-    onClick={[MockFunction useSelectSession.openSessionModal]}
-    size="inline"
       variant="link"
     >
       change-or-leave-session-message
-  </Button>
+    </button>
-</span>
+  </span>
+</div>
 `;
 
 exports[`CourseCard Details component has change session button on entitlement course but no access message 1`] = `
-<span
+<div>
-  className="small"
+  <span
+    class="small"
     data-testid="CourseCardDetails"
->
+  >
     provider-name
      • 
     test-course-number
      • 
-  <Button
+    <button
-    className="m-0 p-0"
+      class="m-0 p-0"
-    onClick={[MockFunction useSelectSession.openSessionModal]}
-    size="inline"
       variant="link"
     >
       change-or-leave-session-message
-  </Button>
+    </button>
-</span>
+  </span>
+</div>
 `;

src/containers/CourseCard/components/CourseCardDetails/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import CourseCardDetails from '.';
 
@@ -28,27 +28,44 @@ describe('CourseCard Details component', () => {
       ...defaultHooks,
       ...hookOverrides,
     });
-    return shallow(<CourseCardDetails cardId={cardId} />);
+    return render(<CourseCardDetails cardId={cardId} />);
+  };
+
+  const fetchSeparators = (wrapper) => {
+    const elements = wrapper.container.querySelectorAll('*');
+    let separatorsCount = 0;
+
+    elements.forEach((element) => {
+      // Use a regular expression to find all occurrences of '•' in the text content
+      const separatorMatches = element.textContent.match(/•/g);
+
+      // If matches are found, add the count to the total
+      if (separatorMatches) {
+        separatorsCount += separatorMatches.length;
+      }
+    });
+
+    return separatorsCount;
   };
 
   test('has change session button on entitlement course', () => {
     const wrapper = createWrapper();
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.container).toMatchSnapshot();
     // it has 3 separator, 4 column
-    expect(wrapper.text().match(/•/g)).toHaveLength(3);
+    expect(fetchSeparators(wrapper)).toBe(3);
   });
 
   test('has change session button on entitlement course but no access message', () => {
     const wrapper = createWrapper({ accessMessage: null });
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.container).toMatchSnapshot();
     // it has 2 separator, 3 column
-    expect(wrapper.text().match(/•/g)).toHaveLength(2);
+    expect(fetchSeparators(wrapper)).toBe(2);
   });
 
   test('does not have change session button on regular course', () => {
     const wrapper = createWrapper({ isEntitlement: false });
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.container).toMatchSnapshot();
     // it has 2 separator, 3 column
-    expect(wrapper.text().match(/•/g)).toHaveLength(2);
+    expect(fetchSeparators(wrapper)).toBe(2);
   });
 });

src/containers/CourseCard/components/CourseCardImage.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import track from 'tracking';
@@ -36,9 +36,9 @@ describe('CourseCardImage', () => {
   describe('snapshot', () => {
     test('renders clickable link course Image', () => {
       const wrapper = shallow(<CourseCardImage {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
-      expect(wrapper.type()).toBe('a');
+      expect(wrapper.instance.type).toBe('a');
-      expect(wrapper.prop('onClick')).toEqual(
+      expect(wrapper.instance.props.onClick).toEqual(
         reduxHooks.useTrackCourseEvent(
           track.course.courseImageClicked,
           props.cardId,
@@ -49,8 +49,8 @@ describe('CourseCardImage', () => {
     test('renders disabled link', () => {
       useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
       const wrapper = shallow(<CourseCardImage {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
-      expect(wrapper.type()).toBe('div');
+      expect(wrapper.instance.type).toBe('div');
     });
   });
   describe('behavior', () => {

src/containers/CourseCard/components/CourseCardTitle.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import track from 'tracking';
@@ -34,10 +34,10 @@ describe('CourseCardTitle', () => {
   describe('snapshot', () => {
     test('renders clickable link course title', () => {
       const wrapper = shallow(<CourseCardTitle {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
-      const title = wrapper.find('.course-card-title');
+      const title = wrapper.instance.findByTestId('CourseCardTitle');
-      expect(title.type()).toBe('a');
+      expect(title[0].type).toBe('a');
-      expect(title.prop('onClick')).toEqual(
+      expect(title[0].props.onClick).toEqual(
         reduxHooks.useTrackCourseEvent(
           track.course.courseTitleClicked,
           props.cardId,
@@ -48,10 +48,10 @@ describe('CourseCardTitle', () => {
     test('renders disabled link', () => {
       useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
       const wrapper = shallow(<CourseCardTitle {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
-      const title = wrapper.find('.course-card-title');
+      const title = wrapper.instance.findByTestId('CourseCardTitle');
-      expect(title.type()).toBe('span');
+      expect(title[0].type).toBe('span');
-      expect(title.prop('onClick')).toBeUndefined();
+      expect(title[0].props.onClick).toBeUndefined();
     });
   });
   describe('behavior', () => {

src/containers/CourseCard/components/RelatedProgramsBadge/index.jsx

@@ -10,13 +10,14 @@ import useRelatedProgramsBadgeData from './hooks';
 
 export const RelatedProgramsBadge = ({ cardId }) => {
   const {
-    isOpen,
+    isOpen, openModal, closeModal, numPrograms, programsMessage,
-    openModal,
-    closeModal,
-    numPrograms,
-    programsMessage,
   } = useRelatedProgramsBadgeData({ cardId });
-  return (numPrograms > 0) && (
+
+  if (numPrograms === 0) {
+    return null;
+  }
+
+  return (
     <>
       <Button
         data-testid="RelatedProgramsBadge"

src/containers/CourseCard/components/RelatedProgramsBadge/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import useRelatedProgramsBadge from './hooks';
 import RelatedProgramsBadge from '.';
@@ -25,6 +25,6 @@ describe('RelatedProgramsBadge component', () => {
   });
   test('snapshot: 3 programs', () => {
     useRelatedProgramsBadge.mockReturnValueOnce(hookProps);
-    expect(shallow(<RelatedProgramsBadge cardId={cardId} />)).toMatchSnapshot();
+    expect(shallow(<RelatedProgramsBadge cardId={cardId} />).snapshot).toMatchSnapshot();
   });
 });

src/containers/CourseCard/components/__snapshots__/CourseCardImage.test.jsx.snap

@@ -15,6 +15,7 @@ exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
   }
   tabIndex="-1"
 >
+  <Fragment>
     <img
       alt="Course thumbnail"
       className="pgn__card-image-cap show"
@@ -36,6 +37,7 @@ exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
         src="test-file-stub"
       />
     </span>
+  </Fragment>
 </a>
 `;
 
@@ -43,6 +45,7 @@ exports[`CourseCardImage snapshot renders disabled link 1`] = `
 <div
   className="pgn__card-wrapper-image-cap overflow-visible orientation"
 >
+  <Fragment>
     <img
       alt="Course thumbnail"
       className="pgn__card-image-cap show"
@@ -64,5 +67,6 @@ exports[`CourseCardImage snapshot renders disabled link 1`] = `
         src="test-file-stub"
       />
     </span>
+  </Fragment>
 </div>
 `;

src/containers/CourseCard/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import CourseCard from '.';
 import hooks from './hooks';
@@ -20,10 +20,10 @@ const cardId = 'test-card-id';
 describe('CourseCard component', () => {
   test('snapshot: collapsed', () => {
     hooks.useIsCollapsed.mockReturnValueOnce(true);
-    expect(shallow(<CourseCard cardId={cardId} />)).toMatchSnapshot();
+    expect(shallow(<CourseCard cardId={cardId} />).snapshot).toMatchSnapshot();
   });
   test('snapshot: not collapsed', () => {
     hooks.useIsCollapsed.mockReturnValueOnce(false);
-    expect(shallow(<CourseCard cardId={cardId} />)).toMatchSnapshot();
+    expect(shallow(<CourseCard cardId={cardId} />).snapshot).toMatchSnapshot();
   });
 });

src/containers/CourseFilterControls/ActiveCourseFilters.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { FilterKeys } from 'data/constants/app';
 import ActiveCourseFilters from './ActiveCourseFilters';
@@ -15,7 +15,7 @@ describe('ActiveCourseFilters', () => {
   describe('snapshot', () => {
     test('renders', () => {
       const wrapper = shallow(<ActiveCourseFilters {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 });

src/containers/CourseFilterControls/CourseFilterControls.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { breakpoints, useWindowSize } from '@openedx/paragon';
 
@@ -44,21 +44,21 @@ describe('CourseFilterControls', () => {
       reduxHooks.useHasCourses.mockReturnValueOnce(false);
       useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
       const wrapper = shallow(<CourseFilterControls {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
   describe('mobile', () => {
     test('snapshot', () => {
       useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth - 1 });
       const wrapper = shallow(<CourseFilterControls {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
   describe('is not mobile', () => {
     test('snapshot', () => {
       useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
       const wrapper = shallow(<CourseFilterControls {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 });

src/containers/CourseFilterControls/components/Checkbox.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { FilterKeys } from 'data/constants/app';
 import Checkbox from './Checkbox';
@@ -8,7 +8,7 @@ describe('Checkbox', () => {
     Object.keys(FilterKeys).forEach((filterKey) => {
       it(`renders ${filterKey}`, () => {
         const wrapper = shallow(<Checkbox filterKey={filterKey} />);
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.snapshot).toMatchSnapshot();
       });
     });
   });

src/containers/CourseFilterControls/components/FilterForm.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { FilterKeys } from 'data/constants/app';
 import FilterForm, { filterOrder } from './FilterForm';
@@ -13,7 +13,7 @@ describe('FilterForm', () => {
   describe('snapshot', () => {
     test('renders', () => {
       const wrapper = shallow(<FilterForm {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 

src/containers/CourseFilterControls/components/SortForm.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { SortKeys } from 'data/constants/app';
 import SortForm from './SortForm';
@@ -13,7 +13,7 @@ describe('SortForm', () => {
   describe('snapshot', () => {
     test('renders', () => {
       const wrapper = shallow(<SortForm {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 });

src/containers/CourseList/NoCoursesView/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import EmptyCourse from '.';
 
@@ -13,6 +13,6 @@ jest.mock('hooks', () => ({
 
 describe('NoCoursesView', () => {
   test('snapshot', () => {
-    expect(shallow(<EmptyCourse />)).toMatchSnapshot();
+    expect(shallow(<EmptyCourse />).snapshot).toMatchSnapshot();
   });
 });

src/containers/CourseList/__snapshots__/index.test.jsx.snap

@@ -18,6 +18,7 @@ exports[`CourseList collapsed with multiple courses and pages snapshot 1`] = `
       <CourseFilterControls />
     </div>
   </div>
+  <Fragment>
     <div
       id="course-list-active-filters-container"
     >
@@ -46,6 +47,7 @@ exports[`CourseList collapsed with multiple courses and pages snapshot 1`] = `
         variant="reduced"
       />
     </div>
+  </Fragment>
 </div>
 `;
 
@@ -67,9 +69,11 @@ exports[`CourseList no courses snapshot 1`] = `
       <CourseFilterControls />
     </div>
   </div>
+  <Fragment>
     <div
       className="d-flex flex-column flex-grow-1"
     />
+  </Fragment>
 </div>
 `;
 
@@ -91,9 +95,11 @@ exports[`CourseList no filters snapshot 1`] = `
       <CourseFilterControls />
     </div>
   </div>
+  <Fragment>
     <div
       className="d-flex flex-column flex-grow-1"
     />
+  </Fragment>
 </div>
 `;
 
@@ -117,6 +123,7 @@ exports[`CourseList with filters snapshot 1`] = `
       />
     </div>
   </div>
+  <Fragment>
     <div
       id="course-list-active-filters-container"
     >
@@ -127,6 +134,7 @@ exports[`CourseList with filters snapshot 1`] = `
     <div
       className="d-flex flex-column flex-grow-1"
     />
+  </Fragment>
 </div>
 `;
 
@@ -148,6 +156,7 @@ exports[`CourseList with multiple courses and pages snapshot 1`] = `
       <CourseFilterControls />
     </div>
   </div>
+  <Fragment>
     <div
       className="d-flex flex-column flex-grow-1"
     >
@@ -171,5 +180,6 @@ exports[`CourseList with multiple courses and pages snapshot 1`] = `
         variant="secondary"
       />
     </div>
+  </Fragment>
 </div>
 `;

src/containers/CourseList/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import { useCourseListData, useIsCollapsed } from './hooks';
@@ -42,13 +42,13 @@ describe('CourseList', () => {
     test('snapshot', () => {
       reduxHooks.useHasCourses.mockReturnValue(true);
       const wrapper = createWrapper();
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
   describe('no filters', () => {
     test('snapshot', () => {
       const wrapper = createWrapper();
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
   describe('with filters', () => {
@@ -57,7 +57,7 @@ describe('CourseList', () => {
         filterOptions: { abitary: 'filter' },
         showFilters: true,
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
   describe('with multiple courses and pages', () => {
@@ -66,7 +66,7 @@ describe('CourseList', () => {
         visibleList: [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }],
         numPages: 3,
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
   describe('collapsed with multiple courses and pages', () => {
@@ -77,7 +77,7 @@ describe('CourseList', () => {
         numPages: 3,
         showFilters: true,
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 });

src/containers/Dashboard/DashboardLayout.test.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { Col, Row } from '@openedx/paragon';
 
-import WidgetFooter from 'containers/WidgetContainers/WidgetFooter';
 import hooks from './hooks';
 import DashboardLayout, { columnConfig } from './DashboardLayout';
 
@@ -32,43 +31,43 @@ describe('DashboardLayout', () => {
 
   const testColumns = () => {
     it('loads courseList and sidebar column layout', () => {
-      const columns = el.find(Row).find(Col);
+      const columns = el.instance.findByType(Row)[0].findByType(Col);
       Object.keys(columnConfig.sidebar).forEach(size => {
-        expect(columns.at(1).props()[size]).toEqual(columnConfig.sidebar[size]);
+        expect(columns[1].props[size]).toEqual(columnConfig.sidebar[size]);
       });
     });
     it('displays children in first column', () => {
-      const columns = el.find(Row).find(Col);
+      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      expect(columns.at(0).contains(children)).toEqual(true);
+      expect(columns[0].children).not.toHaveLength(0);
     });
     it('displays sidebar prop in second column', () => {
-      const columns = el.find(Row).find(Col);
+      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      expect(columns.at(1).find(props.sidebar)).toHaveLength(1);
+      expect(columns[1].findByType(props.sidebar)).toHaveLength(1);
     });
     it('displays a footer in the second row', () => {
-      const columns = el.find(Row).at(1).find(Col);
+      const columns = el.instance.findByType(Row)[1].findByType(Col);
-      expect(columns.at(0).containsMatchingElement(<WidgetFooter />)).toBeTruthy();
+      expect(columns[0].children[0].type).toEqual('WidgetFooter');
     });
   };
   const testSidebarLayout = () => {
     it('displays widthSidebar width for course list column', () => {
-      const columns = el.find(Row).find(Col);
+      const columns = el.instance.findByType(Row)[0].findByType(Col);
       Object.keys(columnConfig.courseList.withSidebar).forEach(size => {
-        expect(columns.at(0).props()[size]).toEqual(columnConfig.courseList.withSidebar[size]);
+        expect(columns[0].props[size]).toEqual(columnConfig.courseList.withSidebar[size]);
       });
     });
   };
   const testNoSidebarLayout = () => {
     it('displays noSidebar width for course list column', () => {
-      const columns = el.find(Row).find(Col);
+      const columns = el.instance.findByType(Row)[0].findByType(Col);
       Object.keys(columnConfig.courseList.noSidebar).forEach(size => {
-        expect(columns.at(0).props()[size]).toEqual(columnConfig.courseList.noSidebar[size]);
+        expect(columns[0].props[size]).toEqual(columnConfig.courseList.noSidebar[size]);
       });
     });
   };
   const testSnapshot = () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
   };
   describe('collapsed', () => {
@@ -86,17 +85,17 @@ describe('DashboardLayout', () => {
       testNoSidebarLayout();
     });
     it('does not show spacer component above widget sidebar', () => {
-      const columns = el.find(Col);
+      const columns = el.instance.findByType(Col);
-      expect(columns.at(1).find('h2').length).toEqual(0);
+      expect(columns[1].findByType('h2').length).toEqual(0);
     });
   });
 
   describe('not collapsed', () => {
     const testWidgetSpacing = () => {
       it('shows a blank (nbsp) h2 spacer component above widget sidebar', () => {
-        const columns = el.find(Col);
+        const columns = el.instance.findByType(Col);
         // nonbreaking space equivalent
-        expect(columns.at(1).find('h2').text()).toEqual('\xA0');
+        expect(columns[1].findByType('h2')[0].children[0].el).toEqual('\xA0');
       });
     };
     describe('sidebar showing', () => {

src/containers/Dashboard/LoadingView.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { Spinner } from '@openedx/paragon';
 
 import hooks from './hooks';
@@ -14,10 +14,10 @@ describe('LoadingView', () => {
     hooks.useDashboardMessages.mockReturnValueOnce({ spinnerScreenReaderText });
   });
   test('snapshot', () => {
-    expect(shallow(<LoadingView />)).toMatchSnapshot();
+    expect(shallow(<LoadingView />).snapshot).toMatchSnapshot();
   });
   it('renders spinner component with associated screen reader text', () => {
     const wrapper = shallow(<LoadingView />);
-    expect(wrapper.find(Spinner).props().screenReaderText).toEqual(spinnerScreenReaderText);
+    expect(wrapper.instance.findByType(Spinner)[0].props.screenReaderText).toEqual(spinnerScreenReaderText);
   });
 });

src/containers/Dashboard/__snapshots__/index.test.jsx.snap

@@ -10,8 +10,11 @@ exports[`Dashboard snapshots courses loaded, show select session modal, no avail
   >
     test-page-title
   </h1>
+  <Fragment>
     <SelectSessionModal />
+  </Fragment>
   <div
+    data-testid="dashboard-content"
     id="dashboard-content"
   >
     <DashboardLayout
@@ -34,6 +37,7 @@ exports[`Dashboard snapshots courses still loading snapshot 1`] = `
     test-page-title
   </h1>
   <div
+    data-testid="dashboard-content"
     id="dashboard-content"
   >
     <LoadingView />
@@ -51,8 +55,11 @@ exports[`Dashboard snapshots there are no courses, there ARE available dashboard
   >
     test-page-title
   </h1>
+  <Fragment>
     <EnterpriseDashboardModal />
+  </Fragment>
   <div
+    data-testid="dashboard-content"
     id="dashboard-content"
   >
     <DashboardLayout

src/containers/Dashboard/index.jsx

@@ -31,7 +31,7 @@ export const Dashboard = () => {
           {(hasCourses && showSelectSessionModal) && <SelectSessionModal />}
         </>
       )}
-      <div id="dashboard-content">
+      <div id="dashboard-content" data-testid="dashboard-content">
         {initIsPending
           ? (<LoadingView />)
           : (

src/containers/Dashboard/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 
@@ -58,18 +58,18 @@ describe('Dashboard', () => {
   describe('snapshots', () => {
     const testTitle = () => {
       test('page title is displayed in sr-only h1 tag', () => {
-        const heading = wrapper.find('h1');
+        const heading = wrapper.instance.findByType('h1')[0];
-        expect(heading.props().className).toEqual('sr-only');
+        expect(heading.props.className).toEqual('sr-only');
-        expect(heading.text()).toEqual(pageTitle);
+        expect(heading.children[0].el).toEqual(pageTitle);
       });
     };
     const testSnapshot = () => {
       test('snapshot', () => {
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.snapshot).toMatchSnapshot();
       });
     };
     const testContent = (el) => {
-      expect(wrapper.find('#dashboard-content').children()).toMatchObject(shallow(el));
+      expect(wrapper.instance.findByTestId('dashboard-content')[0].children[0]).toMatchObject(shallow(el));
     };
 
     const renderString = (show) => (show ? 'renders' : 'does not render');
@@ -86,11 +86,11 @@ describe('Dashboard', () => {
         testContent(contentEl);
       });
       it(`${renderString(showEnterpriseModal)} dashbaord modal`, () => {
-        expect(wrapper.find(EnterpriseDashboardModal).length)
+        expect(wrapper.instance.findByType(EnterpriseDashboardModal).length)
           .toEqual(showEnterpriseModal ? 1 : 0);
       });
       it(`${renderString(showSelectSessionModal)} select session modal`, () => {
-        expect(wrapper.find(SelectSessionModal).length).toEqual(showSelectSessionModal ? 1 : 0);
+        expect(wrapper.instance.findByType(SelectSessionModal).length).toEqual(showSelectSessionModal ? 1 : 0);
       });
     };
     describe('courses still loading', () => {

src/containers/EmailSettingsModal/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import hooks from './hooks';
 import EmailSettingsModal from '.';
@@ -40,18 +40,18 @@ describe('EmailSettingsModal', () => {
   describe('render', () => {
     test('snapshot: emails disabled, show: false', () => {
       hooks.mockReturnValueOnce(hookProps);
-      expect(shallow(<EmailSettingsModal {...props} show={false} />)).toMatchSnapshot();
+      expect(shallow(<EmailSettingsModal {...props} show={false} />).snapshot).toMatchSnapshot();
     });
     test('snapshot: emails disabled, show: true', () => {
       hooks.mockReturnValueOnce(hookProps);
-      expect(shallow(<EmailSettingsModal {...props} />)).toMatchSnapshot();
+      expect(shallow(<EmailSettingsModal {...props} />).snapshot).toMatchSnapshot();
     });
     test('snapshot: emails enabled, show: true', () => {
       hooks.mockReturnValueOnce({
         ...hookProps,
         isOptedOut: false,
       });
-      expect(shallow(<EmailSettingsModal {...props} />)).toMatchSnapshot();
+      expect(shallow(<EmailSettingsModal {...props} />).snapshot).toMatchSnapshot();
     });
   });
 });

src/containers/EnterpriseDashboardModal/__snapshots__/index.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EnterpriseDashboard empty snapshot 1`] = `""`;
+exports[`EnterpriseDashboard empty snapshot 1`] = `null`;
 
 exports[`EnterpriseDashboard snapshot 1`] = `
 <ModalDialog

src/containers/EnterpriseDashboardModal/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import EnterpriseDashboard from '.';
 
 import useEnterpriseDashboardHook from './hooks';
@@ -19,11 +19,11 @@ describe('EnterpriseDashboard', () => {
     };
     useEnterpriseDashboardHook.mockReturnValueOnce({ ...hookData });
     const el = shallow(<EnterpriseDashboard />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   test('empty snapshot', () => {
     useEnterpriseDashboardHook.mockReturnValueOnce({});
     const el = shallow(<EnterpriseDashboard />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
 });

src/containers/LearnerDashboardHeader/BrandLogo.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import BrandLogo from './BrandLogo';
@@ -15,14 +15,14 @@ describe('BrandLogo', () => {
       url: 'url',
     });
     const wrapper = shallow(<BrandLogo />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.find('a').prop('href')).toEqual('url');
+    expect(wrapper.instance.findByType('a')[0].props.href).toEqual('url');
   });
 
   test('dashboard undefined', () => {
     reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce(null);
     const wrapper = shallow(<BrandLogo />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.find('a').prop('href')).toEqual('/');
+    expect(wrapper.instance.findByType('a')[0].props.href).toEqual('/');
   });
 });

src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx

@@ -21,15 +21,20 @@ export const CollapseMenuBody = ({ isOpen }) => {
   const dashboard = reduxHooks.useEnterpriseDashboardData();
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
 
-  const exploreCoursesClick = findCoursesNavDropdownClicked(urls.baseAppUrl(courseSearchUrl));
+  const exploreCoursesClick = findCoursesNavDropdownClicked(
+    urls.baseAppUrl(courseSearchUrl),
+  );
+
+  if (!isOpen) {
+    return null;
+  }
 
   return (
-    isOpen && (
     <div className="d-flex flex-column shadow-sm nav-small-menu">
       <Button as="a" href="/" variant="inverse-primary">
         {formatMessage(messages.course)}
       </Button>
-        <Button as="a" href={urls.programsUrl} variant="inverse-primary">
+      <Button as="a" href={urls.programsUrl()} variant="inverse-primary">
         {formatMessage(messages.program)}
       </Button>
       <Button
@@ -61,9 +66,7 @@ export const CollapseMenuBody = ({ isOpen }) => {
           )}
           <Button
             as="a"
-              href={`${getConfig().LMS_BASE_URL}/u/${
+            href={`${getConfig().LMS_BASE_URL}/u/${authenticatedUser.username}`}
-                authenticatedUser.username
-              }`}
             variant="inverse-primary"
           >
             {formatMessage(messages.profile)}
@@ -94,7 +97,6 @@ export const CollapseMenuBody = ({ isOpen }) => {
         </>
       )}
     </div>
-    )
   );
 };
 

src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { AppContext } from '@edx/frontend-platform/react';
 
 import CollapseMenuBody from './CollapseMenuBody';
@@ -29,12 +29,12 @@ jest.mock('../hooks', () => ({
 describe('CollapseMenuBody', () => {
   test('render', () => {
     const wrapper = shallow(<CollapseMenuBody isOpen />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
   });
 
   test('render empty if not open', () => {
     const wrapper = shallow(<CollapseMenuBody isOpen={false} />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
     expect(wrapper.isEmptyRender()).toBe(true);
   });
 
@@ -42,7 +42,7 @@ describe('CollapseMenuBody', () => {
     const { authenticatedUser } = AppContext;
     AppContext.authenticatedUser = null;
     const wrapper = shallow(<CollapseMenuBody isOpen />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
     AppContext.authenticatedUser = authenticatedUser;
   });
 });

src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap

@@ -36,6 +36,7 @@ exports[`CollapseMenuBody render 1`] = `
   >
     Help
   </Button>
+  <Fragment>
     <Button
       as="a"
       href="url"
@@ -64,10 +65,11 @@ exports[`CollapseMenuBody render 1`] = `
     >
       Sign Out
     </Button>
+  </Fragment>
 </div>
 `;
 
-exports[`CollapseMenuBody render empty if not open 1`] = `""`;
+exports[`CollapseMenuBody render empty if not open 1`] = `null`;
 
 exports[`CollapseMenuBody render unauthenticated 1`] = `
 <div

src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/index.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CollapsedHeader render nothing if not collapsed 1`] = `""`;
+exports[`CollapsedHeader render nothing if not collapsed 1`] = `false`;
 
 exports[`CollapsedHeader renders 1`] = `
 <Fragment>

src/containers/LearnerDashboardHeader/CollapsedHeader/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import CollapsedHeader from '.';
 
@@ -18,13 +18,13 @@ jest.mock('../hooks', () => ({
 describe('CollapsedHeader', () => {
   it('renders', () => {
     const wrapper = shallow(<CollapsedHeader />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
   });
 
   it('render nothing if not collapsed', () => {
     useIsCollapsed.mockReturnValueOnce(false);
     const wrapper = shallow(<CollapsedHeader />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
   });
 
   it('renders with isOpen true', () => {
@@ -33,6 +33,6 @@ describe('CollapsedHeader', () => {
       toggleIsOpen: jest.fn().mockName('toggleIsOpen'),
     });
     const wrapper = shallow(<CollapsedHeader />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
   });
 });

src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap

@@ -63,10 +63,10 @@ exports[`ConfirmEmailBanner snapshot Show on unverified 1`] = `
     <p
       className="text-center"
     >
-      We've sent you an email to verify your acccount. Please check your inbox and click on the big red button to confirm and keep learning.
+      We've sent you an email to verify your account. Please check your inbox and click on the big red button to confirm and keep learning.
     </p>
   </MarketingModal>
 </Fragment>
 `;
 
-exports[`ConfirmEmailBanner snapshot do not show on already verified 1`] = `""`;
+exports[`ConfirmEmailBanner snapshot do not show on already verified 1`] = `null`;

src/containers/LearnerDashboardHeader/ConfirmEmailBanner/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import hooks from './hooks';
 import ConfirmEmailBanner from '.';
@@ -24,12 +24,12 @@ describe('ConfirmEmailBanner', () => {
     test('do not show on already verified', () => {
       hooks.mockReturnValueOnce({ ...hookProps, isNeeded: false });
       const el = shallow(<ConfirmEmailBanner />);
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('Show on unverified', () => {
       hooks.mockReturnValueOnce({ ...hookProps });
       const el = shallow(<ConfirmEmailBanner />);
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
   });
 });

src/containers/LearnerDashboardHeader/ConfirmEmailBanner/messages.js

@@ -24,7 +24,7 @@ const messages = defineMessages({
   confirmEmailModalBody: {
     id: 'leanerDashboard.confirmEmailModalBody',
     description: 'text hint for confirming email modal',
-    defaultMessage: 'We\'ve sent you an email to verify your acccount. Please check your inbox and click on the big red button to confirm and keep learning.',
+    defaultMessage: 'We\'ve sent you an email to verify your account. Please check your inbox and click on the big red button to confirm and keep learning.',
   },
   confirmEmailImageAlt: {
     id: 'leanerDashboard.confirmEmailImageAlt',

src/containers/LearnerDashboardHeader/ExpandedHeader/AuthenticatedUserDropdown.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import { getConfig } from '@edx/frontend-platform';
@@ -61,7 +61,7 @@ describe('AuthenticatedUserDropdown', () => {
       const { authenticatedUser } = AppContext;
       AppContext.authenticatedUser = null;
       const wrapper = shallow(<AuthenticatedUserDropdown />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
       expect(wrapper.isEmptyRender()).toBe(true);
       AppContext.authenticatedUser = authenticatedUser;
     });
@@ -69,13 +69,13 @@ describe('AuthenticatedUserDropdown', () => {
       reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce(defaultDashboardData);
       useIsCollapsed.mockReturnValueOnce(true);
       const wrapper = shallow(<AuthenticatedUserDropdown />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('without enterprise dashboard and expanded', () => {
       reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce(null);
       useIsCollapsed.mockReturnValueOnce(false);
       const wrapper = shallow(<AuthenticatedUserDropdown />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 });

src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/AuthenticatedUserDropdown.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AuthenticatedUserDropdown snapshots no auth render empty 1`] = `""`;
+exports[`AuthenticatedUserDropdown snapshots no auth render empty 1`] = `null`;
 
 exports[`AuthenticatedUserDropdown snapshots with enterprise dashboard 1`] = `
 <Dropdown
@@ -22,6 +22,7 @@ exports[`AuthenticatedUserDropdown snapshots with enterprise dashboard 1`] = `
   <Dropdown.Menu
     className="dropdown-menu-right"
   >
+    <Fragment>
       <Dropdown.Header>
         SWITCH DASHBOARD
       </Dropdown.Header>
@@ -42,6 +43,7 @@ exports[`AuthenticatedUserDropdown snapshots with enterprise dashboard 1`] = `
         Dashboard
       </Dropdown.Item>
       <Dropdown.Divider />
+    </Fragment>
     <Dropdown.Item
       href="http://account-profile-url.test/u/username"
     >
@@ -87,6 +89,7 @@ exports[`AuthenticatedUserDropdown snapshots without enterprise dashboard and ex
   <Dropdown.Menu
     className="dropdown-menu-right"
   >
+    <Fragment>
       <Dropdown.Header>
         SWITCH DASHBOARD
       </Dropdown.Header>
@@ -98,6 +101,7 @@ exports[`AuthenticatedUserDropdown snapshots without enterprise dashboard and ex
         Personal
       </Dropdown.Item>
       <Dropdown.Divider />
+    </Fragment>
     <Dropdown.Item
       href="http://localhost:18000/career"
     >

src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/index.test.jsx.snap

@@ -52,4 +52,4 @@ exports[`ExpandedHeader render 1`] = `
 </header>
 `;
 
-exports[`ExpandedHeader render empty if collapsed 1`] = `""`;
+exports[`ExpandedHeader render empty if collapsed 1`] = `null`;

src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx

@@ -19,10 +19,15 @@ export const ExpandedHeader = () => {
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
   const isCollapsed = useIsCollapsed();
 
-  const exploreCoursesClick = findCoursesNavClicked(urls.baseAppUrl(courseSearchUrl));
+  const exploreCoursesClick = findCoursesNavClicked(
+    urls.baseAppUrl(courseSearchUrl),
+  );
+
+  if (isCollapsed) {
+    return null;
+  }
 
   return (
-    !isCollapsed && (
     <header className="d-flex shadow-sm align-items-center learner-variant-header pl-4">
       <div className="flex-grow-1 d-flex align-items-center">
         <BrandLogo />
@@ -37,7 +42,7 @@ export const ExpandedHeader = () => {
         </Button>
         <Button
           as="a"
-          href={urls.programsUrl}
+          href={urls.programsUrl()}
           variant="inverse-primary"
           className="p-4"
         >
@@ -66,7 +71,6 @@ export const ExpandedHeader = () => {
 
       <AuthenticatedUserDropdown />
     </header>
-    )
   );
 };
 

src/containers/LearnerDashboardHeader/ExpandedHeader/index.test.jsx

@@ -1,11 +1,11 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import ExpandedHeader from '.';
 
 import { useIsCollapsed } from '../hooks';
 
 jest.mock('data/services/lms/urls', () => ({
-  programsUrl: 'programsUrl',
+  programsUrl: () => 'programsUrl',
   baseAppUrl: url => (`http://localhost:18000${url}`),
 }));
 
@@ -29,13 +29,13 @@ describe('ExpandedHeader', () => {
   test('render', () => {
     useIsCollapsed.mockReturnValueOnce(false);
     const wrapper = shallow(<ExpandedHeader />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
   });
 
   test('render empty if collapsed', () => {
     useIsCollapsed.mockReturnValueOnce(true);
     const wrapper = shallow(<ExpandedHeader />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
     expect(wrapper.isEmptyRender()).toBe(true);
   });
 });

src/containers/LearnerDashboardHeader/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import LearnerDashboardHeader from '.';
 
 jest.mock('containers/MasqueradeBar', () => 'MasqueradeBar');
@@ -9,10 +9,10 @@ jest.mock('./ExpandedHeader', () => 'ExpandedHeader');
 describe('LearnerDashboardHeader', () => {
   test('render', () => {
     const wrapper = shallow(<LearnerDashboardHeader />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.find('ConfirmEmailBanner')).toHaveLength(1);
+    expect(wrapper.instance.findByType('ConfirmEmailBanner')).toHaveLength(1);
-    expect(wrapper.find('MasqueradeBar')).toHaveLength(1);
+    expect(wrapper.instance.findByType('MasqueradeBar')).toHaveLength(1);
-    expect(wrapper.find('CollapsedHeader')).toHaveLength(1);
+    expect(wrapper.instance.findByType('CollapsedHeader')).toHaveLength(1);
-    expect(wrapper.find('ExpandedHeader')).toHaveLength(1);
+    expect(wrapper.instance.findByType('ExpandedHeader')).toHaveLength(1);
   });
 });

src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap

@@ -7,6 +7,7 @@ exports[`MasqueradeBar snapshot can masquerade 1`] = `
   <Form
     className="masquerade-bar w-100"
   >
+    <Fragment>
       <FormLabel
         className="masquerade-form-label"
         id="masquerade-form-label"
@@ -40,6 +41,7 @@ exports[`MasqueradeBar snapshot can masquerade 1`] = `
         type="submit"
         variant="brand"
       />
+    </Fragment>
   </Form>
 </div>
 `;
@@ -51,6 +53,7 @@ exports[`MasqueradeBar snapshot can masquerade with input 1`] = `
   <Form
     className="masquerade-bar w-100"
   >
+    <Fragment>
       <FormLabel
         className="masquerade-form-label"
         id="masquerade-form-label"
@@ -84,11 +87,12 @@ exports[`MasqueradeBar snapshot can masquerade with input 1`] = `
         type="submit"
         variant="brand"
       />
+    </Fragment>
   </Form>
 </div>
 `;
 
-exports[`MasqueradeBar snapshot cannot masquerade 1`] = `""`;
+exports[`MasqueradeBar snapshot cannot masquerade 1`] = `null`;
 
 exports[`MasqueradeBar snapshot is masquerading failed with error 1`] = `
 <div
@@ -97,6 +101,7 @@ exports[`MasqueradeBar snapshot is masquerading failed with error 1`] = `
   <Form
     className="masquerade-bar w-100"
   >
+    <Fragment>
       <FormLabel
         className="masquerade-form-label"
         id="masquerade-form-label"
@@ -134,6 +139,7 @@ exports[`MasqueradeBar snapshot is masquerading failed with error 1`] = `
         type="submit"
         variant="brand"
       />
+    </Fragment>
   </Form>
 </div>
 `;
@@ -145,6 +151,7 @@ exports[`MasqueradeBar snapshot is masquerading pending 1`] = `
   <Form
     className="masquerade-bar w-100"
   >
+    <Fragment>
       <FormLabel
         className="masquerade-form-label"
         id="masquerade-form-label"
@@ -178,6 +185,7 @@ exports[`MasqueradeBar snapshot is masquerading pending 1`] = `
         type="submit"
         variant="brand"
       />
+    </Fragment>
   </Form>
 </div>
 `;
@@ -189,6 +197,7 @@ exports[`MasqueradeBar snapshot is masquerading with input 1`] = `
   <Form
     className="masquerade-bar w-100"
   >
+    <Fragment>
       <FormLabel
         className="masquerade-form-label"
         inline={true}
@@ -205,6 +214,7 @@ exports[`MasqueradeBar snapshot is masquerading with input 1`] = `
       >
         test
       </Chip>
+    </Fragment>
   </Form>
 </div>
 `;

src/containers/MasqueradeBar/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { formatMessage } from 'testUtils';
 
 import MasqueradeBar from '.';
@@ -26,21 +26,21 @@ describe('MasqueradeBar', () => {
   describe('snapshot', () => {
     test('can masquerade', () => {
       hooks.useMasqueradeBarData.mockReturnValueOnce(masqueradeMockData);
-      expect(shallow(<MasqueradeBar />)).toMatchSnapshot();
+      expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
     });
     test('can masquerade with input', () => {
       hooks.useMasqueradeBarData.mockReturnValueOnce({
         ...masqueradeMockData,
         masqueradeInput: 'test',
       });
-      expect(shallow(<MasqueradeBar />)).toMatchSnapshot();
+      expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
     });
     test('cannot masquerade', () => {
       hooks.useMasqueradeBarData.mockReturnValueOnce({
         ...masqueradeMockData,
         canMasquerade: false,
       });
-      expect(shallow(<MasqueradeBar />)).toMatchSnapshot();
+      expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
     });
     test('is masquerading with input', () => {
       hooks.useMasqueradeBarData.mockReturnValueOnce({
@@ -48,7 +48,7 @@ describe('MasqueradeBar', () => {
         isMasquerading: true,
         masqueradeInput: 'test',
       });
-      expect(shallow(<MasqueradeBar />)).toMatchSnapshot();
+      expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
     });
     test('is masquerading failed with error', () => {
       hooks.useMasqueradeBarData.mockReturnValueOnce({
@@ -56,14 +56,14 @@ describe('MasqueradeBar', () => {
         isMasqueradingFailed: true,
         masqueradeErrorMessage: 'test-error',
       });
-      expect(shallow(<MasqueradeBar />)).toMatchSnapshot();
+      expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
     });
     test('is masquerading pending', () => {
       hooks.useMasqueradeBarData.mockReturnValueOnce({
         ...masqueradeMockData,
         isMasqueradingPending: true,
       });
-      expect(shallow(<MasqueradeBar />)).toMatchSnapshot();
+      expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
     });
   });
 });

src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import ProgramCard from './ProgramCard';
 
@@ -18,6 +18,6 @@ const props = {
 
 describe('RelatedProgramsModal ProgramCard', () => {
   test('snapshot', () => {
-    expect(shallow(<ProgramCard {...props} />)).toMatchSnapshot();
+    expect(shallow(<ProgramCard {...props} />).snapshot).toMatchSnapshot();
   });
 });

src/containers/RelatedProgramsModal/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import RelatedProgramsModal from '.';
@@ -50,11 +50,11 @@ describe('RelatedProgramsModal', () => {
     expect(reduxHooks.useCardRelatedProgramsData).toHaveBeenCalledWith(cardId);
   });
   test('snapshot: open', () => {
-    expect(shallow(<RelatedProgramsModal {...props} />)).toMatchSnapshot();
+    expect(shallow(<RelatedProgramsModal {...props} />).snapshot).toMatchSnapshot();
   });
   test('snapshot: closed', () => {
     expect(
-      shallow(<RelatedProgramsModal {...props} isOpen={false} />),
+      shallow(<RelatedProgramsModal {...props} isOpen={false} />).snapshot,
     ).toMatchSnapshot();
   });
 });

src/containers/SelectSessionModal/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import hooks from './hooks';
 import SelectSessionModal from '.';
@@ -30,7 +30,7 @@ describe('SelectSessionModal', () => {
       hooks.mockReturnValueOnce({
         ...hookReturn,
       });
-      expect(shallow(<SelectSessionModal />)).toMatchSnapshot();
+      expect(shallow(<SelectSessionModal />).snapshot).toMatchSnapshot();
     });
 
     test('modal with leave option ', () => {
@@ -38,7 +38,7 @@ describe('SelectSessionModal', () => {
         ...hookReturn,
         availableSessions: [...availableSessions],
       });
-      expect(shallow(<SelectSessionModal />)).toMatchSnapshot();
+      expect(shallow(<SelectSessionModal />).snapshot).toMatchSnapshot();
     });
 
     test('modal without leave option ', () => {
@@ -47,7 +47,7 @@ describe('SelectSessionModal', () => {
         availableSessions,
         showLeaveOption: false,
       });
-      expect(shallow(<SelectSessionModal />)).toMatchSnapshot();
+      expect(shallow(<SelectSessionModal />).snapshot).toMatchSnapshot();
     });
   });
 });

src/containers/UnenrollConfirmModal/components/ConfirmPane.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { ConfirmPane } from './ConfirmPane';
 
@@ -9,6 +9,6 @@ describe('UnenrollConfirmModal ConfirmPane', () => {
       handleClose: jest.fn().mockName('props.handleClose'),
       handleConfirm: jest.fn().mockName('props.handleConfirm'),
     };
-    expect(shallow(<ConfirmPane {...props} />)).toMatchSnapshot();
+    expect(shallow(<ConfirmPane {...props} />).snapshot).toMatchSnapshot();
   });
 });

src/containers/UnenrollConfirmModal/components/FinishedPane.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { FinishedPane } from './FinishedPane';
 
@@ -9,13 +9,13 @@ describe('UnenrollConfirmModal FinishedPane', () => {
       gaveReason: true,
       handleClose: jest.fn().mockName('props.handleClose'),
     };
-    expect(shallow(<FinishedPane {...props} />)).toMatchSnapshot();
+    expect(shallow(<FinishedPane {...props} />).snapshot).toMatchSnapshot();
   });
   test('snapshot: did not give reason', () => {
     const props = {
       gaveReason: false,
       handleClose: jest.fn().mockName('props.handleClose'),
     };
-    expect(shallow(<FinishedPane {...props} />)).toMatchSnapshot();
+    expect(shallow(<FinishedPane {...props} />).snapshot).toMatchSnapshot();
   });
 });

src/containers/UnenrollConfirmModal/components/ReasonPane.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { ReasonPane } from './ReasonPane';
 
@@ -18,9 +18,9 @@ describe('UnenrollConfirmModal ReasonPane', () => {
     },
   };
   test('snapshot', () => {
-    expect(shallow(<ReasonPane {...props} />)).toMatchSnapshot();
+    expect(shallow(<ReasonPane {...props} />).snapshot).toMatchSnapshot();
   });
   test('snapshot: no reason provided', () => {
-    expect(shallow(<ReasonPane {...props} hasReason={false} />)).toMatchSnapshot();
+    expect(shallow(<ReasonPane {...props} hasReason={false} />).snapshot).toMatchSnapshot();
   });
 });

src/containers/UnenrollConfirmModal/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { UnenrollConfirmModal } from '.';
 
@@ -40,11 +40,11 @@ describe('UnenrollConfirmModal component', () => {
   });
   test('snapshot: modalStates.confirm', () => {
     hooks.useUnenrollData.mockReturnValueOnce(hookProps);
-    expect(shallow(<UnenrollConfirmModal {...props} />)).toMatchSnapshot();
+    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
   });
   test('snapshot: modalStates.finished, reason given', () => {
     hooks.useUnenrollData.mockReturnValueOnce({ ...hookProps, modalState: hooks.modalStates.finished });
-    expect(shallow(<UnenrollConfirmModal {...props} />)).toMatchSnapshot();
+    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
   });
   test('snapshot: modalStates.finished, reason skipped', () => {
     hooks.useUnenrollData.mockReturnValueOnce({
@@ -52,10 +52,10 @@ describe('UnenrollConfirmModal component', () => {
       modalState: hooks.modalStates.finished,
       isSkipped: true,
     });
-    expect(shallow(<UnenrollConfirmModal {...props} />)).toMatchSnapshot();
+    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
   });
   test('snapshot: modalStates.reason, should be fullscreen with no shadow', () => {
     hooks.useUnenrollData.mockReturnValueOnce({ ...hookProps, modalState: hooks.modalStates.reason });
-    expect(shallow(<UnenrollConfirmModal {...props} />)).toMatchSnapshot();
+    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
   });
 });

src/containers/WidgetContainers/LoadedSidebar/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import hooks from 'widgets/ProductRecommendations/hooks';
 import { mockFooterRecommendationsHook } from 'widgets/ProductRecommendations/testData';
@@ -23,7 +23,7 @@ describe('WidgetSidebar', () => {
       const wrapper = shallow(<WidgetSidebar {...props} />);
 
       expect(props.setSidebarShowing).toHaveBeenCalledWith(true);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 
@@ -34,7 +34,7 @@ describe('WidgetSidebar', () => {
     const wrapper = shallow(<WidgetSidebar {...props} />);
 
     expect(props.setSidebarShowing).not.toHaveBeenCalled();
-    expect(wrapper.type()).toBeNull();
+    expect(wrapper.shallowWrapper).toBeNull();
   });
 
   test('is hidden when the has the treatment values', () => {
@@ -44,6 +44,6 @@ describe('WidgetSidebar', () => {
     const wrapper = shallow(<WidgetSidebar {...props} />);
 
     expect(props.setSidebarShowing).not.toHaveBeenCalled();
-    expect(wrapper.type()).toBeNull();
+    expect(wrapper.shallowWrapper).toBeNull();
   });
 });

src/containers/WidgetContainers/NoCoursesSidebar/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import hooks from 'widgets/ProductRecommendations/hooks';
 import { mockFooterRecommendationsHook } from 'widgets/ProductRecommendations/testData';
@@ -23,7 +23,7 @@ describe('WidgetSidebar', () => {
       const wrapper = shallow(<WidgetSidebar {...props} />);
 
       expect(props.setSidebarShowing).toHaveBeenCalledWith(true);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 
@@ -34,7 +34,7 @@ describe('WidgetSidebar', () => {
     const wrapper = shallow(<WidgetSidebar {...props} />);
 
     expect(props.setSidebarShowing).not.toHaveBeenCalled();
-    expect(wrapper.type()).toBeNull();
+    expect(wrapper.shallowWrapper).toBeNull();
   });
 
   test('is hidden when the has the treatment values', () => {
@@ -44,6 +44,6 @@ describe('WidgetSidebar', () => {
     const wrapper = shallow(<WidgetSidebar {...props} />);
 
     expect(props.setSidebarShowing).not.toHaveBeenCalled();
-    expect(wrapper.type()).toBeNull();
+    expect(wrapper.shallowWrapper).toBeNull();
   });
 });

src/containers/WidgetContainers/WidgetFooter/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import hooks from 'widgets/ProductRecommendations/hooks';
 import { mockFooterRecommendationsHook } from 'widgets/ProductRecommendations/testData';
@@ -19,7 +19,7 @@ describe('WidgetFooter', () => {
       const wrapper = shallow(<WidgetFooter />);
 
       expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled();
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 
@@ -30,7 +30,7 @@ describe('WidgetFooter', () => {
     const wrapper = shallow(<WidgetFooter />);
 
     expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled();
-    expect(wrapper.type()).toBeNull();
+    expect(wrapper.shallowWrapper).toBeNull();
   });
 
   test('is hidden when the experiment has the control values', () => {
@@ -40,6 +40,6 @@ describe('WidgetFooter', () => {
     const wrapper = shallow(<WidgetFooter />);
 
     expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled();
-    expect(wrapper.type()).toBeNull();
+    expect(wrapper.shallowWrapper).toBeNull();
   });
 });

src/containers/WidgetContainers/WidgetNavbar/index.test.jsx

@@ -1,10 +1,9 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import {
   usePaintedDoorExperimentContext,
 } from '../../../widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
 import WidgetNavbar from './index';
 import { EXPANDED_NAVBAR } from '../../../widgets/RecommendationsPaintedDoorBtn/constants';
-import RecommendationsPaintedDoorBtn from '../../../widgets/RecommendationsPaintedDoorBtn';
 
 jest.mock('widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext', () => ({
   usePaintedDoorExperimentContext: jest.fn(),
@@ -26,7 +25,7 @@ describe('WidgetNavbar', () => {
       const wrapper = shallow(<WidgetNavbar {...props} />);
 
       expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 
@@ -35,7 +34,7 @@ describe('WidgetNavbar', () => {
     const wrapper = shallow(<WidgetNavbar {...props} />);
 
     expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
-    expect(wrapper.type()).toBe(RecommendationsPaintedDoorBtn);
+    expect(wrapper.instance.type).toBe('RecommendationsPaintedDoorBtn');
   });
 
   test('renders nothing if user in not in navbar variation', () => {
@@ -47,7 +46,7 @@ describe('WidgetNavbar', () => {
     const wrapper = shallow(<WidgetNavbar {...props} />);
 
     expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
-    expect(wrapper.type()).toBeNull();
+    expect(wrapper.shallowWrapper).toBeNull();
   });
 
   test('renders nothing if experiment is loading', () => {
@@ -60,6 +59,6 @@ describe('WidgetNavbar', () => {
     const wrapper = shallow(<WidgetNavbar {...props} />);
 
     expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
-    expect(wrapper.type()).toBeNull();
+    expect(wrapper.shallowWrapper).toBeNull();
   });
 });

src/data/services/lms/api.js

@@ -34,16 +34,16 @@ export const deleteEntitlementEnrollment = ({ uuid, isRefundable }) => client()
   );
 
 export const updateEmailSettings = ({ courseId, enable }) => post(
-  urls.updateEmailSettings,
+  urls.updateEmailSettings(),
   { [apiKeys.courseId]: courseId, ...(enable && enableEmailsAction) },
 );
 
 export const unenrollFromCourse = ({ courseId }) => post(
-  urls.courseUnenroll,
+  urls.courseUnenroll(),
   { [apiKeys.courseId]: courseId, ...unenrollmentAction },
 );
 
-export const logEvent = ({ eventName, data, courseId }) => post(urls.event, {
+export const logEvent = ({ eventName, data, courseId }) => post(urls.event(), {
   courserun_key: courseId,
   event_type: eventName,
   page: window.location.href,

src/data/services/lms/api.test.js

@@ -77,7 +77,7 @@ describe('lms api methods', () => {
         expect(
           api.updateEmailSettings({ courseId, enable: false }),
         ).toEqual(
-          utils.post(urls.updateEmailSettings, { [apiKeys.courseId]: courseId }),
+          utils.post(urls.updateEmailSettings(), { [apiKeys.courseId]: courseId }),
         );
       });
     });
@@ -87,7 +87,7 @@ describe('lms api methods', () => {
           api.updateEmailSettings({ courseId, enable: true }),
         ).toEqual(
           utils.post(
-            urls.updateEmailSettings,
+            urls.updateEmailSettings(),
             { [apiKeys.courseId]: courseId, ...enableEmailsAction },
           ),
         );
@@ -100,7 +100,7 @@ describe('lms api methods', () => {
         api.unenrollFromCourse({ courseId }),
       ).toEqual(
         utils.post(
-          urls.courseUnenroll,
+          urls.courseUnenroll(),
           { [apiKeys.courseId]: courseId, ...unenrollmentAction },
         ),
       );
@@ -116,7 +116,7 @@ describe('lms api methods', () => {
         expect(
           api.logEvent({ courseId, eventName, data }),
         ).toEqual(
-          utils.post(urls.event, {
+          utils.post(urls.event(), {
             courserun_key: courseId,
             event_type: eventName,
             page: href,

src/data/services/lms/urls.js

@@ -10,9 +10,9 @@ export const getApiUrl = () => (`${getConfig().LMS_BASE_URL}/api`);
 
 const getInitApiUrl = () => (`${getApiUrl()}/learner_home/init`);
 
-const event = `${getBaseUrl()}/event`;
+const event = () => `${getBaseUrl()}/event`;
-const courseUnenroll = `${getBaseUrl()}/change_enrollment`;
+const courseUnenroll = () => `${getBaseUrl()}/change_enrollment`;
-const updateEmailSettings = `${getApiUrl()}/change_email_settings`;
+const updateEmailSettings = () => `${getApiUrl()}/change_email_settings`;
 const entitlementEnrollment = (uuid) => `${getApiUrl()}/entitlements/v1/entitlements/${uuid}/enrollments`;
 
 // if url is null or absolute, return it as is
@@ -22,7 +22,7 @@ export const baseAppUrl = (url) => updateUrl(getBaseUrl(), url);
 export const learningMfeUrl = (url) => updateUrl(getConfig().LEARNING_BASE_URL, url);
 
 // static view url
-const programsUrl = baseAppUrl('/dashboard/programs');
+const programsUrl = () => baseAppUrl('/dashboard/programs');
 
 export const creditPurchaseUrl = (courseId) => `${getEcommerceUrl()}/credit/checkout/${courseId}/`;
 export const creditRequestUrl = (providerId) => `${getApiUrl()}/credit/v1/providers/${providerId}/request/`;

src/i18n/messages/pt_BR.json

@@ -12,7 +12,7 @@
   "leanerDashboard.confirmEmailTextReminderBanner": "Remember to confirm your email so that you can keep learning on edX! {confirmNowButton}.",
   "leanerDashboard.verifiedConfirmEmailButton": "I've confirmed my email",
   "leanerDashboard.confirmEmailModalHeader": "Confirm your email",
-  "leanerDashboard.confirmEmailModalBody": "We've sent you an email to verify your acccount. Please check your inbox and click on the big red button to confirm and keep learning.",
+  "leanerDashboard.confirmEmailModalBody": "We've sent you an email to verify your account. Please check your inbox and click on the big red button to confirm and keep learning.",
   "leanerDashboard.confirmEmailImageAlt": "confirm email background",
   "learnerVariantDashboard.menu.dashboard.label": "Painel de controle",
   "learnerVariantDashboard.help.label": "Ajuda",

src/i18n/messages/zh_CN.json

@@ -12,7 +12,7 @@
   "leanerDashboard.confirmEmailTextReminderBanner": "Remember to confirm your email so that you can keep learning on edX! {confirmNowButton}.",
   "leanerDashboard.verifiedConfirmEmailButton": "I've confirmed my email",
   "leanerDashboard.confirmEmailModalHeader": "Confirm your email",
-  "leanerDashboard.confirmEmailModalBody": "We've sent you an email to verify your acccount. Please check your inbox and click on the big red button to confirm and keep learning.",
+  "leanerDashboard.confirmEmailModalBody": "We've sent you an email to verify your account. Please check your inbox and click on the big red button to confirm and keep learning.",
   "leanerDashboard.confirmEmailImageAlt": "confirm email background",
   "learnerVariantDashboard.menu.dashboard.label": "Dashboard",
   "learnerVariantDashboard.help.label": "Help",

src/setupTest.jsx

@@ -2,11 +2,6 @@
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 
-import Enzyme from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-
-Enzyme.configure({ adapter: new Adapter() });
-
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
   useRef: jest.fn((val) => ({ current: val, useRef: true })),

src/widgets/LookingForChallengeWidget/index.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import LookingForChallengeWidget from '.';
 
@@ -18,7 +18,7 @@ describe('LookingForChallengeWidget', () => {
   describe('snapshots', () => {
     test('default', () => {
       const wrapper = shallow(<LookingForChallengeWidget />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 });

src/widgets/ProductRecommendations/components/LoadedView.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { mockCrossProductCourses, mockOpenCourses } from '../testData';
 import LoadedView from './LoadedView';
@@ -12,7 +12,7 @@ describe('ProductRecommendations LoadedView', () => {
           crossProductCourses={mockCrossProductCourses}
           openCourses={mockOpenCourses}
         />,
-      ),
+      ).snapshot,
     ).toMatchSnapshot();
   });
   describe('with less than 2 cross product courses', () => {
@@ -24,7 +24,7 @@ describe('ProductRecommendations LoadedView', () => {
         />,
       );
 
-      const productCardContainerProps = wrapper.find('ProductCardContainer').props();
+      const productCardContainerProps = wrapper.instance.findByType('ProductCardContainer')[0].props;
 
       expect(productCardContainerProps.courseTypes.length).toEqual(1);
       expect(productCardContainerProps.courseTypes[0]).toEqual('Course');

src/widgets/ProductRecommendations/components/LoadingView.test.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import LoadingView from './LoadingView';
 
 describe('ProductRecommendations LoadingView', () => {
   it('matches snapshot', () => {
-    expect(shallow(<LoadingView />)).toMatchSnapshot();
+    expect(shallow(<LoadingView />).snapshot).toMatchSnapshot();
   });
 });

src/widgets/ProductRecommendations/components/ProductCard.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { mockCrossProductCourses, mockOpenCourses, mockFallbackOpenCourse } from '../testData';
 import { trackProductCardClicked, trackCourseCardClicked } from '../optimizelyExperiment';
@@ -46,12 +46,12 @@ describe('ProductRecommendations ProductCard', () => {
   const fallbackOpenCourseProps = getProps(mockFallbackOpenCourse[0]);
 
   it('matches snapshot', () => {
-    expect(shallow(<ProductCard {...crossProductProps} />)).toMatchSnapshot();
+    expect(shallow(<ProductCard {...crossProductProps} />).snapshot).toMatchSnapshot();
   });
 
   it('has the query string parameter attached to a fallback recommendations url', () => {
     const wrapper = shallow(<ProductCard {...fallbackOpenCourseProps} />);
-    const cardUrl = wrapper.find('Card').props().destination;
+    const cardUrl = wrapper.instance.findByType('Card')[0].props.destination;
 
     expect(cardUrl).toEqual('https://www.edx.org/course/some-course?linked_from=recommender');
   });
@@ -60,7 +60,7 @@ describe('ProductRecommendations ProductCard', () => {
     const wrapper = shallow(<ProductCard {...openCourseProps} />);
     const { courseRunKey, title, url } = openCourseProps;
 
-    wrapper.simulate('click');
+    wrapper.instance.props.onClick();
 
     expect(trackCourseCardClicked).toHaveBeenCalledWith('1');
     expect(discoveryCardClicked).toHaveBeenCalledWith(courseRunKey, title, `${url}&linked_from=recommender`);
@@ -75,7 +75,7 @@ describe('ProductRecommendations ProductCard', () => {
       url,
     } = crossProductProps;
 
-    wrapper.simulate('click');
+    wrapper.instance.props.onClick();
 
     expect(trackProductCardClicked).toHaveBeenCalledWith('1');
     expect(productCardClicked).toHaveBeenCalledWith(courseRunKey, title, courseType, `${url}&linked_from=recommender`);