feat: import FooterSlot from component package instead of slot package (#450)

Co-authored-by: jansenk <1639231+jansenk@users.noreply.github.com>

.env.development

@@ -7,7 +7,6 @@ LOGOUT_URL='http://localhost:18000/login'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'

.eslintrc.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 const config = createConfig('eslint', {
   rules: {

.github/dependabot.yml

@@ -0,0 +1,7 @@
+version: 2
+updates:
+    # Adding new check for github-actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+        interval: "weekly"

.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"
+  }

.github/workflows/ci.yml

@@ -10,19 +10,16 @@ on:
 
 jobs:
   test:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     steps:
     - name: Checkout
-      uses: actions/checkout@v3
-
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+      uses: actions/checkout@v4
 
     - name: Setup Nodejs
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version-file: '.nvmrc'
 
     - name: Install dependencies
       run: npm ci
@@ -43,11 +40,14 @@ jobs:
       run: npm run build
 
     - name: Run Coverage
-      uses: codecov/codecov-action@v2
+      uses: codecov/codecov-action@v5
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true
 
     - name: Send failure notification
       if: ${{ failure() }}
-      uses: dawidd6/action-send-mail@v3
+      uses: dawidd6/action-send-mail@v4
       with:
         server_address: email-smtp.us-east-1.amazonaws.com
         server_port: 465

.github/workflows/npm-publish.yml

@@ -1,36 +0,0 @@
-name: Release CI
-on:
-  push:
-    tags:
-      - '*'
-
-jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-20.04
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-
-      - name: Setup Nodejs Env
-        run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ env.NODE_VER }}
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Create Build
-        run: npm run build
-
-      - name: Release Package
-        env:
-          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
-        run: npm semantic-release

.gitignore

@@ -23,3 +23,5 @@ temp/babel-plugin-react-intl
 ### transifex ###
 src/i18n/transifex_input.json
 temp
+
+src/i18n/messages/

.nvmrc

@@ -1 +1 @@
-18.15
+20

.releaserc

@@ -1,27 +0,0 @@
-{
-  "branch": "master",
-  "tagFormat": "v${version}",
-  "verifyConditions": [
-    "@semantic-release/npm",
-    {
-      "path": "@semantic-release/github",
-      "assets": {
-        "path": "dist/*"
-      }
-    }
-  ],
-  "analyzeCommits": "@semantic-release/commit-analyzer",
-  "generateNotes": "@semantic-release/release-notes-generator",
-  "prepare": "@semantic-release/npm",
-  "publish": [
-    "@semantic-release/npm",
-    {
-      "path": "@semantic-release/github",
-      "assets": {
-        "path": "dist/*"
-      }
-    }
-  ],
-  "success": [],
-  "fail": []
-}

.tx/config

@@ -1,9 +0,0 @@
-[main]
-host = https://www.transifex.com
-
-[o:open-edx:p:edx-platform:r:frontend-app-gradebook]
-file_filter = src/i18n/messages/<lang>.json
-source_file = src/i18n/transifex_input.json
-source_lang = en
-type        = KEYVALUEJSON
-

Makefile

@@ -1,18 +1,14 @@
 npm-install-%: ## install specified % npm package
-	npm install $* --save-dev
+	npm ci $* --save-dev
 	git add package.json
-export TRANSIFEX_RESOURCE = frontend-app-gradebook
-transifex_langs = "ar,de,es_419,fa_IR,fr,fr_CA,hi,it,pt,ru,uk,zh_CN"
 
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
-tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
-tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
 NPM_TESTS=build i18n_extract lint test is-es5
 
@@ -39,40 +35,20 @@ i18n.concat:
 
 extract_translations: | requirements i18n.extract i18n.concat
 
-# Despite the name, we actually need this target to detect changes in the incoming translated message files as well.
-detect_changed_source_translations:
-	# Checking for changed translations...
-	git diff --exit-code $(i18n)
 
-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
-
-ifeq ($(OPENEDX_ATLAS_PULL),)
-# Pulls translations from Transifex.
-pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
-else
 # Experimental: OEP-58 Pulls translations using atlas
 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-component-footer/src/i18n/messages:frontend-component-footer \
 	           translations/frontend-component-header/src/i18n/messages:frontend-component-header \
+	           translations/frontend-platform/src/i18n/messages:frontend-platform \
 	           translations/paragon/src/i18n/messages:paragon \
 	           translations/frontend-app-gradebook/src/i18n/messages:frontend-app-gradebook
 
-	$(intl_imports) paragon frontend-component-header frontend-component-footer frontend-app-gradebook
-endif
+	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-app-gradebook
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

README.md

@@ -1,3 +1,5 @@
+# frontend-app-gradebook
+
 [![Build Status](https://api.travis-ci.com/edx/frontend-app-gradebook.svg?branch=master)](https://travis-ci.com/edx/frontend-app-gradebook)
 [![Codecov](https://img.shields.io/codecov/c/gh/openedx/frontend-app-gradebook)](https://app.codecov.io/gh/openedx/frontend-app-gradebook)
 [![npm_version](https://img.shields.io/npm/v/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
@@ -5,7 +7,7 @@
 [![license](https://img.shields.io/npm/l/@edx/frontend-app-gradebook.svg)](@edx/frontend-app-gradebook)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
-# Gradebook
+# Purpose
 
 Gradebook allows course staff to view, filter, and override subsection grades for a course. Additionally for Masters courses, Gradebook enables bulk management of subsection grades.
 
@@ -16,8 +18,8 @@ Jump to:
 
 For existing documentation see:
 
-- Basic Usage: [Review Learner Grades (read-the-docs)](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/student_progress/course_grades.html#review-learner-grades-on-the-instructor-dashboard)
-- Bulk Grade Management: [Override Learner Subsection Scores in Bulk (read-the-docs)](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/student_progress/course_grades.html#override-learner-subsection-scores-in-bulk)
+- Basic Usage: [Review Learner Grades (read-the-docs)](https://docs.openedx.org/en/latest/educators/how-tos/data/view_learner_grades.html)
+- Bulk Grade Management: [Override Learner Subsection Scores in Bulk (read-the-docs)](https://docs.openedx.org/en/latest/educators/how-tos/data/manage_learner_grades.html#override-learner-subsection-scores-in-bulk)
 
 ## Should I use Gradebook in my course?
 
@@ -47,7 +49,8 @@ depending on their needs. Instructors that expect to review grades infrequently
 to the problem in question will have a worse UX than the legacy gradebook provides. Instructors that rely on the graphs
 generated by the current gradebook might find the lack of autogenerated graphs to be frustrating.
 
-## Quickstart
+## Getting Started
+
 
 ### Installation
 
@@ -56,47 +59,66 @@ To install gradebook into your project:
 npm i --save @edx/frontend-app-gradebook
 ```
 
+Cloning and Startup
+===================
+
+1. Clone your new repo:
+
+   ``git clone https://github.com/openedx/frontend-app-gradebook.git``
+
+2. Use the version of Node specified in ``.nvmrc``
+
+3. Stop the Tutor devstack, if it's running:
+
+   ``tutor dev stop``
+
+4. Next, we need to tell Tutor that we're going to be running this repo in development mode, and it should be excluded from the mfe container that otherwise runs every MFE. Run this:
+
+   ``tutor mounts add /path/to/frontend-app-gradebook``
+
+5. Start Tutor in development mode. This command will start the LMS and Studio,
+   and other required MFEs like ``authn`` and ``account``, but will not start the
+   Gradebook MFE, which we're going to run on the host instead of in a container
+   managed by Tutor. Run:
+
+   ``tutor dev start lms cms mfe``
+
+## Startup
+
+1. Install npm dependencies:
+
+   ``cd frontend-app-gradebook && npm install``
+
+2. Start the dev server:
+
+   ``npm run dev``
+
 ## Running the UI Standalone
 
-To install the project please refer to the [`edX Developer Stack`](https://github.com/openedx/devstack) instructions.
+To install the project please refer to the [`MFE Development on Tutor`](https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development) instructions.
 
-The web application runs on port **1994**, so when you go to `http://localhost:1994/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.
+When not mounted, gradebook will run in the shared MFE container at http://apps.local.openedx.io/gradebook/course-v1:edX+DemoX+Demo_Course.
 
-If you don't, you can see the log messages for the docker container by executing `make gradebook-logs` in the `devstack` directory.
+When mounted in the tutor ``gradebook`` container, or when running a local (host) webpack dev server, the web application runs on port **1994**, so when you go to `http://apps.local.openedx.io:1994/gradebook/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.
+
+(Note: This may not work in Tutor; these instructions are for the deprecated Devstack) You can see the log messages for the docker container by executing `make gradebook-logs` in the `devstack` directory.
 
 Note that starting the container executes the `npm run start` script which will hot-reload JavaScript and Sass files changes, so you should (:crossed_fingers:) not need to do anything (other than wait) when making changes.
 
-## Configuring for local use in edx-platform
+## Plugins
+This MFE can be customized using [Frontend Plugin Framework](https://github.com/openedx/frontend-plugin-framework).
 
-Assuming you've got the UI running at `http://localhost:1994`, you can configure the LMS in edx-platform
-to point to your local gradebook from the instructor dashboard by putting this setting in `lms/env/private.py`:
-```
-WRITABLE_GRADEBOOK_URL = 'http://localhost:1994'
-```
-
-There are also several edx-platform waffle and feature flags you'll have to enable from the Django admin:
-
-1. Grades > Persistent grades enabled flag.  Add this flag if it doesn't exist,
-check the ``enabled`` and ``enabled for all courses`` boxes.
-
-2. Waffle > Switches.  Add the ``grades.assume_zero_grade_if_absent`` switch and make it active.
-
-3. Waffle_utils > Waffle flag course overrides.  Activate waffle flags for courses where you want to enable Gradebook functionality:
-    - Enable Gradebook by adding the ``grades.writable_gradebook`` add checking the ``enabled`` box.
-    - Enable Bulk Grade Management by adding the ``grades.bulk_management`` flag and checking the ``enabled`` box.
-
-    Alternatively, you could add these as regular waffle flags to enable the functionality for all courses.
-
-**NOTE:** IF the above flags are not configured correctly, the gradebook may appear to work, but will return bogus
-numbers for grades. If your gradebook isn't accepting your changes, or the changes aren't resulting in sane, 
-recalculated grade values, verify you've set all flags correctly.
+The parts of this MFE that can be customized in that manner are documented [here](/src/plugin-slots).
 
 ## Running tests
 
-1. Assuming that you're operating in the context of the edX devstack,
-run `gradebook-shell` from your devstack directory.  This will start a bash shell inside your
-running gradebook container.
-2. Run `make test` (which executes `npm run test`).  This will run all of the gradebook tests.
+Run:
+
+``nvm use``
+
+``npm ci``
+
+``npm test``
 
 ## Directory Structure
 
@@ -119,3 +141,49 @@ running gradebook container.
 ## Authentication with backend API services
 
 See the [`@edx/frontend-auth`](https://github.com/edx-unsupported/frontend-auth) repo for information about securing routes in your application that require user authentication.
+
+License
+=======
+
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.
+
+Contributing
+============
+
+Contributions are very welcome.  Please read [How To Contribute](https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html) for details.
+
+This project is currently accepting all types of contributions, bug fixes,
+security fixes, maintenance work, or new features.  However, please make sure
+to have a discussion about your new feature idea with the maintainers prior to
+beginning development to maximize the chances of your change being accepted.
+You can start a conversation by creating a new issue on this repo summarizing
+your idea.
+
+Getting Help
+===========
+
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the community.
+
+Our real-time conversations are on Slack. You can request a [Slack
+invitation](https://openedx.org/slack), then join our 
+[community Slack workspace](https://openedx.slack.com/)  Because this is a
+frontend repository, the best place to discuss it would be in the 
+[#wg-frontend channel](https://openedx.slack.com/archives/C04BM6YC7A6).
+
+For anything non-trivial, the best path is to open an issue in this repository
+with as many details about the issue you are facing as you can provide.
+
+https://github.com/openedx/frontend-app-gradebook/issues
+
+For more information about these options, see the [Getting Help](https://openedx.org/community/connect) page.
+
+The Open edX Code of Conduct
+============================
+
+All community members are expected to follow the [Open edX Code of Conduct](https://openedx.org/code-of-conduct/).
+
+Reporting Security Issues
+=========================
+Please do not report security issues in public. Please email security@openedx.org.

babel.config.js

@@ -1,3 +1,3 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('babel');

catalog-info.yaml

@@ -0,0 +1,14 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "frontend-app-gradebook"
+  description: "The frontend (MFE) for Open edX Gradebook"
+  annotations:
+    openedx.org/arch-interest-groups: ""
+    openedx.org/release: "master"
+spec:
+  owner: user:farhaanbukhsh
+  type: 'website'
+  lifecycle: 'experimental'

documentation/testing/test-setup.md

@@ -4,15 +4,15 @@ Instructions for setting up environments and data for testing Gradebook.
 
 ## Set up a course with graded content
 
-A course with graded content is the first prerequisite to testing. Use an existing course (e.g. the DemoX Demonstration Course in Devstack) or see [Building and Running an edX Course > Developing Your Course](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/developing_course/index.html) for notes on how to develop a course from scratch.
+A course with graded content is the first prerequisite to testing. Use an existing course (e.g. the DemoX Demonstration Course in Devstack) or see [Building and Running an edX Course > Developing Your Course](https://docs.openedx.org/en/latest/educators/quickstarts/build_a_course.html) for notes on how to develop a course from scratch.
 
 Notably, the course needs a grading policy and subsections with scoreable content.
 After creating subsections with content, they need to be configured with an "Assignment Type" to be included in grading.
 
 Suggested resources:
-- [Establishing a Grading Policy For Your Course](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/grading/index.html)
-- [Adding Exercises and Tools](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/grading/index.html)
-- [Set the Assignment Type and Due Date for a Subsection](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/developing_course/course_subsections.html#set-the-assignment-type-and-due-date-for-a-subsection)
+- [Establishing a Grading Policy For Your Course](https://docs.openedx.org/en/latest/educators/how-tos/data/manage_learner_grades.html#review-how-grading-is-configured-for-your-course)
+- [Adding Exercises and Tools](https://docs.openedx.org/en/latest/educators/concepts/exercise_tools/about_problems_exercises_tools.html)
+- [Set the Assignment Type and Due Date for a Subsection](https://docs.openedx.org/en/latest/educators/how-tos/course_development/set_subsection_problem_date.html#set-the-assignment-type-and-due-date-for-a-subsection)
 
 ## Enable Gradebook for course
 
@@ -35,7 +35,7 @@ Bulk Management is an added feature to allow modifying grades in bulk via CSV up
 
 ## Create a Master's track for testing Master's-only features
 
-[source](https://openedx.atlassian.net/wiki/spaces/MS/pages/1453818012/Add+a+learner+into+a+master+s+track)
+[source - note: possibly outdated, edx.org-specific](https://openedx.atlassian.net/wiki/spaces/MS/pages/1453818012/Add+a+learner+into+a+master+s+track)
 
 Add a Master's track in your course:
 - As an admin user, go to Django Admin (`{lms-url}/admin`) > Course Modes and add a new course mode

jest.config.js

@@ -1,13 +1,10 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],
   modulePaths: ['<rootDir>/src/'],
-  snapshotSerializers: [
-    'enzyme-to-json/serializer',
-  ],
   coveragePathIgnorePatterns: [
     'src/segment.js',
     'src/postcss.config.js',

openedx.yaml

@@ -1,9 +0,0 @@
-# This file describes this Open edX repo, as described in OEP-2:
-# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
-
-tags:
-  - frontend-app
-  - masters
-oeps:
-  oep-2: true    # Repository metadata
-openedx-release: {ref: master}

package.json

@@ -9,12 +9,13 @@
   "scripts": {
     "build": "fedx-scripts webpack",
     "is-es5": "es-check es5 ./dist/*.js",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "prepush": "npm run lint",
     "semantic-release": "semantic-release",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/gradebook/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
     "watch-tests": "jest --watch"
   },
@@ -28,30 +29,30 @@
     "extends @edx/browserslist-config"
   ],
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@^1.2.0",
-    "@edx/frontend-component-footer": "12.2.0",
-    "@edx/frontend-component-header": "4.6.0",
-    "@edx/frontend-platform": "5.5.4",
-    "@edx/paragon": "20.45.0",
-    "@edx/react-unit-test-utils": "1.7.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^6.4.0",
+    "@edx/frontend-platform": "^8.3.1",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@edx/react-unit-test-utils": "^4.0.0",
     "@edx/reactifex": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.5",
+    "@openedx/frontend-plugin-framework": "^1.6.0",
+    "@openedx/paragon": "^22.16.0",
     "@redux-beacon/segment": "^1.0.0",
     "@reduxjs/toolkit": "^1.5.1",
     "classnames": "^2.2.6",
     "core-js": "3.6.5",
     "email-prop-type": "^1.1.7",
-    "enzyme": "^3.10.0",
-    "enzyme-to-json": "^3.6.2",
     "font-awesome": "4.7.0",
     "history": "4.10.1",
     "prop-types": "15.8.1",
     "query-string": "6.13.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-redux": "^7.2.9",
     "react-router": "6.15.0",
@@ -68,20 +69,15 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.9.3",
-    "@testing-library/react": "12.1.5",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
-    "axios": "0.21.2",
-    "axios-mock-adapter": "^1.17.0",
+    "@openedx/frontend-build": "^14.3.3",
+    "@testing-library/react": "^16.2.0",
     "es-check": "^2.3.0",
-    "fetch-mock": "^6.5.2",
-    "husky": "2.7.0",
+    "fetch-mock": "^12.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
+    "jest": "^29.7.0",
     "react-dev-utils": "^12.0.1",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "^18.3.1",
     "reactifex": "1.1.1",
-    "redux-mock-store": "^1.5.3",
-    "semantic-release": "^19.0.3"
+    "redux-mock-store": "^1.5.3"
   }
 }

src/App.jsx

@@ -3,7 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 
 import { AppProvider } from '@edx/frontend-platform/react';
 
-import Footer from '@edx/frontend-component-footer';
+import { FooterSlot } from '@edx/frontend-component-footer';
 import Header from '@edx/frontend-component-header';
 
 import store from 'data/store';
@@ -24,7 +24,7 @@ const App = () => (
           />
         </Routes>
       </main>
-      <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+      <FooterSlot />
     </div>
   </AppProvider>
 );

src/App.scss

@@ -1,7 +1,7 @@
 // frontend-app-*/src/index.scss
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
 $fa-font-path: "~font-awesome/fonts";

src/App.test.jsx

@@ -1,75 +1,63 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { Route, Routes } from 'react-router-dom';
-import { AppProvider } from '@edx/frontend-platform/react';
-
-import Footer from '@edx/frontend-component-footer';
-import Header from '@edx/frontend-component-header';
+import { Route } from 'react-router-dom';
 
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
 
 import App from './App';
-import Head from './head/Head';
 
 jest.mock('react-router-dom', () => ({
   BrowserRouter: () => 'BrowserRouter',
   Route: () => 'Route',
+  Routes: () => 'Routes',
 }));
 jest.mock('@edx/frontend-platform/react', () => ({
   AppProvider: () => 'AppProvider',
 }));
-jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'FooterSlot' }));
 jest.mock('data/store', () => 'testStore');
 jest.mock('containers/GradebookPage', () => 'GradebookPage');
 jest.mock('@edx/frontend-component-header', () => 'Header');
+jest.mock('./head/Head', () => 'Head');
 
-const logo = 'fakeLogo.png';
 let el;
 let secondChild;
 
 describe('App router component', () => {
   test('snapshot', () => {
-    expect(shallow(<App />)).toMatchSnapshot();
+    expect(shallow(<App />).snapshot).toMatchSnapshot();
   });
   describe('component', () => {
     beforeEach(() => {
-      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
       el = shallow(<App />);
-      secondChild = el.childAt(1);
+      secondChild = el.instance.children;
     });
     describe('AppProvider', () => {
       test('AppProvider is the parent component, passed the redux store props', () => {
-        expect(el.type()).toBe(AppProvider);
-        expect(el.props().store).toEqual(store);
+        expect(el.instance.type).toBe('AppProvider');
+        expect(el.instance.props.store).toEqual(store);
       });
     });
     describe('Head', () => {
       test('first child of AppProvider', () => {
-        expect(el.childAt(0).type()).toBe(Head);
+        expect(el.instance.children[0].type).toBe('Head');
       });
     });
     describe('Router', () => {
       test('second child of AppProvider', () => {
-        expect(secondChild.type()).toBe('div');
+        expect(secondChild[1].type).toBe('div');
       });
       test('Header is above/outside-of the routing', () => {
-        expect(secondChild.childAt(0).type()).toBe(Header);
-        expect(secondChild.childAt(1).type()).toBe('main');
+        expect(secondChild[1].children[0].type).toBe('Header');
+        expect(secondChild[1].children[1].type).toBe('main');
       });
       test('Routing - GradebookPage is only route', () => {
-        expect(secondChild.find('main')).toEqual(shallow(
-          <main>
-            <Routes>
-              <Route path="/:courseId" element={<GradebookPage />} />
-            </Routes>
-          </main>,
-        ));
+        expect(secondChild[1].findByType(Route)).toHaveLength(1);
+        expect(secondChild[1].findByType(Route)[0].props.path).toEqual('/:courseId');
+        expect(secondChild[1].findByType(Route)[0].props.element.type).toEqual(GradebookPage);
       });
     });
-    test('Footer logo drawn from env variable', () => {
-      expect(secondChild.find(Footer).props().logo).toEqual(logo);
-    });
   });
 });

src/__snapshots__/App.test.jsx.snap

@@ -8,14 +8,14 @@ exports[`App router component snapshot 1`] = `
   <div>
     <Header />
     <main>
-      <Component>
+      <Routes>
         <Route
           element={<GradebookPage />}
           path="/:courseId"
         />
-      </Component>
+      </Routes>
     </main>
-    <Footer />
+    <FooterSlot />
   </div>
 </AppProvider>
 `;

src/components/BulkManagementHistoryView/BulkManagementAlerts.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { connect } from 'react-redux';
 
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 
 import selectors from 'data/selectors';
 import messages from './messages';

src/components/BulkManagementHistoryView/BulkManagementAlerts.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { Alert } from '@edx/paragon';
+import { shallow } from '@edx/react-unit-test-utils';
+import { Alert } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
@@ -12,7 +12,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   defineMessages: m => m,
   FormattedMessage: () => 'FormattedMessage',
 }));
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Alert: () => 'Alert',
 }));
 jest.mock('data/selectors', () => ({
@@ -35,17 +35,17 @@ describe('BulkManagementAlerts', () => {
         el = shallow(<BulkManagementAlerts />);
       });
       test('snapshot - bulkImportError closed, success closed', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('closed danger alert', () => {
-        expect(el.childAt(0).is(Alert)).toEqual(true);
-        expect(el.childAt(0).props().show).toEqual(false);
-        expect(el.childAt(0).props().variant).toEqual('danger');
+        expect(el.instance.children[0].type).toBe('Alert');
+        expect(el.instance.findByType(Alert)[0].props.show).toEqual(false);
+        expect(el.instance.findByType(Alert)[0].props.variant).toEqual('danger');
       });
       test('closed success alert', () => {
-        expect(el.childAt(1).is(Alert)).toEqual(true);
-        expect(el.childAt(1).props().show).toEqual(false);
-        expect(el.childAt(1).props().variant).toEqual('success');
+        expect(el.instance.children[1].type).toBe('Alert');
+        expect(el.instance.findByType(Alert)[1].props.show).toEqual(false);
+        expect(el.instance.findByType(Alert)[1].props.variant).toEqual('success');
       });
     });
     describe('no errer, no upload success', () => {
@@ -57,19 +57,19 @@ describe('BulkManagementAlerts', () => {
         'success alert open with messages.successDialog',
       ];
       test(`snapshot - ${assertions.join(', ')}`, () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('open danger alert with bulkImportError content', () => {
-        expect(el.childAt(0).is(Alert)).toEqual(true);
-        expect(el.childAt(0).children().text()).toEqual(errorMessage);
-        expect(el.childAt(0).props().show).toEqual(true);
+        expect(el.instance.children[0].type).toBe('Alert');
+        expect(el.instance.findByType(Alert)[0].children[0].el).toEqual(errorMessage);
+        expect(el.instance.findByType(Alert)[0].props.show).toEqual(true);
       });
       test('open success alert with messages.successDialog content', () => {
-        expect(el.childAt(1).is(Alert)).toEqual(true);
-        expect(el.childAt(1).children().getElement()).toEqual(
+        expect(el.instance.children[1].type).toBe('Alert');
+        expect(el.shallowWrapper.props.children[1].props.children).toEqual(
           <FormattedMessage {...messages.successDialog} />,
         );
-        expect(el.childAt(1).props().show).toEqual(true);
+        expect(el.instance.children[1].props.show).toEqual(true);
       });
     });
   });

src/components/BulkManagementHistoryView/HistoryTable.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 
 import { bulkManagementColumns } from 'data/constants/app';
 import selectors from 'data/selectors';

src/components/BulkManagementHistoryView/HistoryTable.test.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-named-as-default */
 import React from 'react';
-import { shallow } from 'enzyme';
-import { DataTable } from '@edx/paragon';
+import { shallow } from '@edx/react-unit-test-utils';
+import { DataTable } from '@openedx/paragon';
 
 import selectors from 'data/selectors';
 import { bulkManagementColumns } from 'data/constants/app';
@@ -9,7 +9,7 @@ import { bulkManagementColumns } from 'data/constants/app';
 import ResultsSummary from './ResultsSummary';
 import { HistoryTable, mapStateToProps } from './HistoryTable';
 
-jest.mock('@edx/paragon', () => ({ DataTable: () => 'DataTable' }));
+jest.mock('@openedx/paragon', () => ({ DataTable: () => 'DataTable' }));
 
 jest.mock('@edx/frontend-platform/i18n', () => ({
   defineMessages: m => m,
@@ -56,12 +56,12 @@ describe('HistoryTable', () => {
         el = shallow(<HistoryTable {...props} />);
       });
       test('snapshot - loads formatted table', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       describe('history table', () => {
         let table;
         beforeEach(() => {
-          table = el.find(DataTable);
+          table = el.instance.findByType(DataTable);
         });
         describe('data (from bulkManagementHistory.map(this.formatHistoryRow)', () => {
           const fieldAssertions = [
@@ -70,10 +70,10 @@ describe('HistoryTable', () => {
             'forwards the rest',
           ];
           test(`snapshot: ${fieldAssertions.join(', ')}`, () => {
-            expect(table.props().data).toMatchSnapshot();
+            expect(table[0].props.data).toMatchSnapshot();
           });
           test(fieldAssertions.join(', '), () => {
-            const rows = table.props().data;
+            const rows = table[0].props.data;
             expect(rows[0].resultsSummary).toEqual(<ResultsSummary {...entry1.resultsSummary} />);
             expect(rows[0].user).toEqual(<span className="wrap-text-in-cell">{entry1.user}</span>);
             expect(
@@ -87,7 +87,7 @@ describe('HistoryTable', () => {
           });
         });
         test('columns from bulkManagementColumns', () => {
-          expect(table.props().columns).toEqual(bulkManagementColumns);
+          expect(table[0].props.columns).toEqual(bulkManagementColumns);
         });
       });
     });

src/components/BulkManagementHistoryView/ResultsSummary.jsx

@@ -2,8 +2,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Hyperlink, Icon } from '@edx/paragon';
-import { Download } from '@edx/paragon/icons';
+import { Hyperlink, Icon } from '@openedx/paragon';
+import { Download } from '@openedx/paragon/icons';
 
 import lms from 'data/services/lms';
 

src/components/BulkManagementHistoryView/ResultsSummary.test.jsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { Icon } from '@edx/paragon';
-import { Download } from '@edx/paragon/icons';
+import { Download } from '@openedx/paragon/icons';
 
 import lms from 'data/services/lms';
 import ResultsSummary from './ResultsSummary';
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Hyperlink: () => 'Hyperlink',
   Icon: () => 'Icon',
 }));
-jest.mock('@edx/paragon/icons', () => ({
+jest.mock('@openedx/paragon/icons', () => ({
   Download: 'DownloadIcon',
 }));
 jest.mock('data/services/lms', () => ({
@@ -35,19 +34,19 @@ describe('ResultsSummary component', () => {
     el = shallow(<ResultsSummary {...props} />);
   });
   test(`snapshot - ${assertions.join(', ')}`, () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   test('Hyperlink has target="_blank" and rel="noopener noreferrer"', () => {
-    expect(el.props().target).toEqual('_blank');
-    expect(el.props().rel).toEqual('noopener noreferrer');
+    expect(el.instance.props.target).toEqual('_blank');
+    expect(el.instance.props.rel).toEqual('noopener noreferrer');
   });
   test('Hyperlink has href to bulkGradesUrl', () => {
-    expect(el.props().href).toEqual(lms.urls.bulkGradesUrlByRow(props.rowId));
+    expect(el.instance.props.href).toEqual(lms.urls.bulkGradesUrlByRow(props.rowId));
   });
   test('displays Download Icon and text', () => {
-    const icon = el.childAt(0);
-    expect(icon.is(Icon)).toEqual(true);
-    expect(icon.props().src).toEqual(Download);
-    expect(el.childAt(1).text()).toEqual(props.text);
+    const icon = el.instance.children[0];
+    expect(icon.type).toEqual('Icon');
+    expect(icon.props.src).toEqual(Download);
+    expect(el.instance.children[1].el).toEqual(props.text);
   });
 });

src/components/BulkManagementHistoryView/__snapshots__/HistoryTable.test.jsx.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HistoryTable component snapshot history table data (from bulkManagementHistory.map(this.formatHistoryRow) snapshot: maps resultsSummay to ResultsSummary, wraps filename and user, forwards the rest 1`] = `
-Array [
-  Object {
+[
+  {
     "filename": <span
       className="wrap-text-in-cell"
     >
@@ -20,7 +20,7 @@ Array [
       Eifel
     </span>,
   },
-  Object {
+  {
     "filename": <span
       className="wrap-text-in-cell"
     >
@@ -45,26 +45,26 @@ exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] =
 <DataTable
   className="table-striped"
   columns={
-    Array [
-      Object {
+    [
+      {
         "Header": "Gradebook",
         "accessor": "filename",
         "columnSortable": false,
         "width": "col-5",
       },
-      Object {
+      {
         "Header": "Download Summary",
         "accessor": "resultsSummary",
         "columnSortable": false,
         "width": "col",
       },
-      Object {
+      {
         "Header": "Who",
         "accessor": "user",
         "columnSortable": false,
         "width": "col-1",
       },
-      Object {
+      {
         "Header": "When",
         "accessor": "timeUploaded",
         "columnSortable": false,
@@ -73,8 +73,8 @@ exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] =
     ]
   }
   data={
-    Array [
-      Object {
+    [
+      {
         "filename": <span
           className="wrap-text-in-cell"
         >
@@ -92,7 +92,7 @@ exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] =
           Eifel
         </span>,
       },
-      Object {
+      {
         "filename": <span
           className="wrap-text-in-cell"
         >

src/components/BulkManagementHistoryView/__snapshots__/ResultsSummary.test.jsx.snap

@@ -4,8 +4,8 @@ exports[`ResultsSummary component snapshot - safe hyperlink with bulkGradesUrl w
 <Hyperlink
   destination="www.edx.org"
   href={
-    Object {
-      "url": Object {
+    {
+      "url": {
         "rowId": 42,
       },
     }

src/components/BulkManagementHistoryView/index.test.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-named-as-default */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { BulkManagementHistoryView } from '.';
@@ -24,20 +24,23 @@ describe('BulkManagementHistoryView', () => {
         '<HistoryTable />',
       ];
       test(`snapshot - loads ${snapshotSegments.join(', ')}`, () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('heading - h4 loaded from messages', () => {
-        const heading = el.find('h4');
-        expect(heading.getElement()).toEqual((
+        const heading = el.instance.findByType('h4')[0];
+        const expectedHeading = shallow(
           <h4>
             <FormattedMessage {...messages.heading} />
-          </h4>
-        ));
+          </h4>,
+        );
+
+        expect(heading.el.type).toEqual(expectedHeading.type);
+        expect(heading.el.props).toEqual(expectedHeading.props);
       });
       test('heading, then alerts, then upload form, then table', () => {
-        expect(el.childAt(0).is('h4')).toEqual(true);
-        expect(el.childAt(2).is(BulkManagementAlerts)).toEqual(true);
-        expect(el.childAt(3).is(HistoryTable)).toEqual(true);
+        expect(el.instance.children[0].type).toEqual('h4');
+        expect(el.instance.children[2].type).toEqual(BulkManagementAlerts);
+        expect(el.instance.children[3].type).toEqual(HistoryTable);
       });
     });
   });

src/components/EdxHeader/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
 /**

src/components/EdxHeader/test.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { getConfig } from '@edx/frontend-platform';
 
 import Header from '.';
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Hyperlink: () => 'Hyperlink',
 }));
 jest.mock('@edx/frontend-platform', () => ({
@@ -16,6 +16,6 @@ describe('Header', () => {
   test('snapshot - has edx link with logo url', () => {
     const url = 'www.ourLogo.url';
     getConfig.mockReturnValue({ LOGO_URL: url });
-    expect(shallow(<Header />)).toMatchSnapshot();
+    expect(shallow(<Header />).snapshot).toMatchSnapshot();
   });
 });

src/components/GradebookFilters/AssignmentFilter/__snapshots__/index.test.jsx.snap

@@ -10,7 +10,7 @@ exports[`AssignmentFilter component render snapshot 1`] = `
     label="Assignment"
     onChange={[MockFunction]}
     options={
-      Array [
+      [
         <option
           value=""
         >

src/components/GradebookFilters/AssignmentFilter/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import SelectGroup from '../SelectGroup';
@@ -38,10 +38,10 @@ describe('AssignmentFilter component', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('filter options', () => {
-      const { options } = el.find(SelectGroup).props();
+      const { options } = el.instance.findByType(SelectGroup)[0].props;
       expect(options.length).toEqual(5);
       const testOption = assignmentFilterOptions[0];
       const optionProps = options[1].props;

src/components/GradebookFilters/AssignmentGradeFilter/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import useAssignmentGradeFilterData from './hooks';
 import messages from '../messages';

src/components/GradebookFilters/AssignmentGradeFilter/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import PercentGroup from '../PercentGroup';
 import useAssignmentGradeFilterData from './hooks';
@@ -37,20 +37,20 @@ describe('AssignmentFilter component', () => {
   describe('render', () => {
     describe('with selected assignment', () => {
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('renders a PercentGroup for both Max and Min filters', () => {
-        let props = el.find(PercentGroup).at(0).props();
+        let { props } = el.instance.findByType(PercentGroup)[0];
         expect(props.value).toEqual(hookData.assignmentGradeMin);
         expect(props.disabled).toEqual(false);
         expect(props.onChange).toEqual(hookData.handleSetMin);
-        props = el.find(PercentGroup).at(1).props();
+        props = el.instance.findByType(PercentGroup)[1].props;
         expect(props.value).toEqual(hookData.assignmentGradeMax);
         expect(props.disabled).toEqual(false);
         expect(props.onChange).toEqual(hookData.handleSetMax);
       });
       it('renders a submit button', () => {
-        const props = el.find(Button).props();
+        const { props } = el.instance.findByType(Button)[0];
         expect(props.disabled).toEqual(false);
         expect(props.onClick).toEqual(hookData.handleSubmit);
       });
@@ -64,12 +64,12 @@ describe('AssignmentFilter component', () => {
         el = shallow(<AssignmentFilter updateQueryParams={updateQueryParams} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('disables controls', () => {
-        let props = el.find(PercentGroup).at(0).props();
+        let { props } = el.instance.findByType(PercentGroup)[0];
         expect(props.disabled).toEqual(true);
-        props = el.find(PercentGroup).at(1).props();
+        props = el.instance.findByType(PercentGroup)[1].props;
         expect(props.disabled).toEqual(true);
       });
     });

src/components/GradebookFilters/AssignmentTypeFilter/__snapshots__/index.test.jsx.snap

@@ -10,7 +10,7 @@ exports[`AssignmentFilterType component render snapshot 1`] = `
     label="Assignment Types"
     onChange={[MockFunction]}
     options={
-      Array [
+      [
         <option
           value=""
         >

src/components/GradebookFilters/AssignmentTypeFilter/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import SelectGroup from '../SelectGroup';
@@ -34,10 +34,10 @@ describe('AssignmentFilterType component', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('filter options', () => {
-      const { options } = el.find(SelectGroup).props();
+      const { options } = el.instance.findByType(SelectGroup)[0].props;
       expect(options.length).toEqual(5);
       const optionProps = options[1].props;
       expect(optionProps.value).toEqual(assignmentTypes[0]);

src/components/GradebookFilters/CourseGradeFilter/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from '../messages';

src/components/GradebookFilters/CourseGradeFilter/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import PercentGroup from '../PercentGroup';
 import useCourseGradeFilterData from './hooks';
@@ -42,18 +42,18 @@ describe('CourseFilter component', () => {
   describe('render', () => {
     describe('with selected assignment', () => {
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('renders a PercentGroup for both Max and Min filters', () => {
-        let props = el.find(PercentGroup).at(0).props();
+        let { props } = el.instance.findByType(PercentGroup)[0];
         expect(props.value).toEqual(hookData.min.value);
         expect(props.onChange).toEqual(hookData.min.onChange);
-        props = el.find(PercentGroup).at(1).props();
+        props = el.instance.findByType(PercentGroup)[1].props;
         expect(props.value).toEqual(hookData.max.value);
         expect(props.onChange).toEqual(hookData.max.onChange);
       });
       it('renders a submit button', () => {
-        const props = el.find(Button).props();
+        const { props } = el.instance.findByType(Button)[0];
         expect(props.disabled).toEqual(false);
         expect(props.onClick).toEqual(hookData.handleApplyClick);
       });
@@ -64,10 +64,10 @@ describe('CourseFilter component', () => {
         el = shallow(<CourseFilter updateQueryParams={updateQueryParams} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('disables submit', () => {
-        const props = el.find(Button).props();
+        const { props } = el.instance.findByType(Button)[0];
         expect(props.disabled).toEqual(true);
       });
     });

src/components/GradebookFilters/PercentGroup.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 const PercentGroup = ({
   id,

src/components/GradebookFilters/PercentGroup.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import PercentGroup from './PercentGroup';
 
@@ -22,11 +22,11 @@ describe('PercentGroup', () => {
     describe('snapshots', () => {
       test('basic snapshot', () => {
         const el = shallow(<PercentGroup {...props} />);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('disabled', () => {
         const el = shallow(<PercentGroup {...props} disabled />);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
   });

src/components/GradebookFilters/SelectGroup.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 const SelectGroup = ({
   id,

src/components/GradebookFilters/SelectGroup.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import SelectGroup from './SelectGroup';
 
@@ -27,11 +27,11 @@ describe('SelectGroup', () => {
     describe('snapshots', () => {
       test('basic snapshot', () => {
         const el = shallow(<SelectGroup {...props} />);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('disabled', () => {
         const el = shallow(<SelectGroup {...props} disabled />);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
   });

src/components/GradebookFilters/StudentGroupsFilter/__snapshots__/index.test.jsx.snap

@@ -7,7 +7,7 @@ exports[`StudentGroupsFilter component render snapshot 1`] = `
     label="Tracks"
     onChange={[MockFunction]}
     options={
-      Array [
+      [
         <option
           value="Track-All"
         >
@@ -43,7 +43,7 @@ exports[`StudentGroupsFilter component render snapshot 1`] = `
     label="Cohorts"
     onChange={[MockFunction]}
     options={
-      Array [
+      [
         <option
           value="Cohort-All"
         >

src/components/GradebookFilters/StudentGroupsFilter/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import SelectGroup from '../SelectGroup';
@@ -48,14 +48,14 @@ describe('StudentGroupsFilter component', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('track options', () => {
       const {
         options,
         onChange,
         value,
-      } = el.find(SelectGroup).at(0).props();
+      } = el.instance.findByType(SelectGroup)[0].props;
       expect(value).toEqual(props.tracks.value);
       expect(onChange).toEqual(props.tracks.handleChange);
       expect(options.length).toEqual(5);
@@ -70,7 +70,7 @@ describe('StudentGroupsFilter component', () => {
         onChange,
         disabled,
         value,
-      } = el.find(SelectGroup).at(1).props();
+      } = el.instance.findByType(SelectGroup)[1].props;
       expect(value).toEqual(props.cohorts.value);
       expect(disabled).toEqual(false);
       expect(onChange).toEqual(props.cohorts.handleChange);

src/components/GradebookFilters/index.jsx

@@ -6,8 +6,8 @@ import {
   Icon,
   IconButton,
   Form,
-} from '@edx/paragon';
-import { Close } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';

src/components/GradebookFilters/index.test.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Collapsible } from '@edx/paragon';
+import { Collapsible } from '@openedx/paragon';
 
 import { formatMessage } from 'testUtils';
 
@@ -49,10 +49,10 @@ describe('GradebookFilters', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('Assignment filters', () => {
-      expect(el.find(Collapsible).at(0).children()).toMatchObject(shallow(
+      expect(el.instance.findByType(Collapsible)[0].children[0]).toMatchObject(shallow(
         <div>
           <AssignmentTypeFilter updateQueryParams={updateQueryParams} />
           <AssignmentFilter updateQueryParams={updateQueryParams} />
@@ -61,22 +61,22 @@ describe('GradebookFilters', () => {
       ));
     });
     test('CourseGrade filters', () => {
-      expect(el.find(Collapsible).at(1).children()).toMatchObject(shallow(
+      expect(el.instance.findByType(Collapsible)[1].children[0]).toMatchObject(shallow(
         <CourseGradeFilter updateQueryParams={updateQueryParams} />,
       ));
     });
     test('StudentGroups filters', () => {
-      expect(el.find(Collapsible).at(2).children()).toMatchObject(shallow(
+      expect(el.instance.findByType(Collapsible)[2].children[0]).toMatchObject(shallow(
         <StudentGroupsFilter updateQueryParams={updateQueryParams} />,
       ));
     });
     test('includeCourseTeamMembers', () => {
-      const checkbox = el.find(Collapsible).at(3).children();
-      expect(checkbox.props()).toEqual({
+      const checkbox = el.instance.findByType(Collapsible)[3].children[0];
+      expect(checkbox.props).toEqual({
         checked: true,
         onChange: hookProps.includeCourseTeamMembers.handleChange,
-        children: formatMessage(messages.includeCourseTeamMembers),
       });
+      expect(checkbox.children[0].el).toEqual(formatMessage(messages.includeCourseTeamMembers));
     });
   });
 });

src/components/GradebookHeader/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import { instructorDashboardUrl } from 'data/services/lms/urls';
 import useGradebookHeaderData from './hooks';

src/components/GradebookHeader/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import { formatMessage } from 'testUtils';
 import { instructorDashboardUrl } from 'data/services/lms/urls';
@@ -40,7 +40,7 @@ describe('GradebookHeader component', () => {
   describe('render', () => {
     describe('default view', () => {
       test('shapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
     describe('show bulk management', () => {
@@ -49,10 +49,10 @@ describe('GradebookHeader component', () => {
         el = shallow(<GradebookHeader />);
       });
       test('snapshot: show toggle view message button with handleToggleViewClick method', () => {
-        expect(el).toMatchSnapshot();
-        const { onClick, children } = el.find(Button).props();
+        expect(el.snapshot).toMatchSnapshot();
+        const { onClick } = el.instance.findByType(Button)[0].props;
         expect(onClick).toEqual(hookProps.handleToggleViewClick);
-        expect(children).toEqual(formatMessage(hookProps.toggleViewMessage));
+        expect(el.instance.findByType(Button)[0].children[0].el).toEqual(formatMessage(hookProps.toggleViewMessage));
       });
     });
     describe('frozen grades', () => {
@@ -61,7 +61,7 @@ describe('GradebookHeader component', () => {
         el = shallow(<GradebookHeader />);
       });
       test('snapshot: show frozen warning', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
     describe('user cannot view gradebook', () => {
@@ -70,7 +70,7 @@ describe('GradebookHeader component', () => {
         el = shallow(<GradebookHeader />);
       });
       test('snapshot: show unauthorized warning', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
   });

src/components/GradesView/BulkManagementControls/__snapshots__/index.test.jsx.snap

@@ -6,7 +6,7 @@ exports[`BulkManagementControls render snapshot - show - network and import butt
 >
   <NetworkButton
     label={
-      Object {
+      {
         "defaultMessage": "Download Grades",
         "description": "A labeled button that allows an admin user to download course grades all at once (in bulk).",
         "id": "gradebook.GradesView.BulkManagementControls.bulkManagementLabel",

src/components/GradesView/BulkManagementControls/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import useBulkManagementControlsData from './hooks';
 import BulkManagementControls from '.';
@@ -22,7 +22,7 @@ describe('BulkManagementControls', () => {
   });
   describe('render', () => {
     test('snapshot - show - network and import buttons', () => {
-      expect(shallow(<BulkManagementControls />)).toMatchSnapshot();
+      expect(shallow(<BulkManagementControls />).snapshot).toMatchSnapshot();
     });
     test('snapshot - empty if show is not truthy', () => {
       useBulkManagementControlsData.mockReturnValueOnce({ ...hookProps, show: false });

src/components/GradesView/EditModal/HistoryHeader.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import HistoryHeader from './HistoryHeader';
 
@@ -11,7 +11,7 @@ describe('HistoryHeader', () => {
   };
   describe('Component', () => {
     test('snapshot', () => {
-      expect(shallow(<HistoryHeader {...props} />)).toMatchSnapshot();
+      expect(shallow(<HistoryHeader {...props} />).snapshot).toMatchSnapshot();
     });
   });
 });

src/components/GradesView/EditModal/ModalHeaders.jsx

@@ -22,7 +22,7 @@ export const HistoryKeys = StrictDict({
  */
 export const ModalHeaders = () => {
   const { assignmentName, updateUserName } = selectors.app.useModalData();
-  const { currentGrade, originalGrade } = selectors.grades.useGradeData();
+  const { gradeOverrideCurrentEarnedGradedOverride, gradeOriginalEarnedGraded } = selectors.grades.useGradeData();
   const { formatMessage } = useIntl();
   return (
     <div>
@@ -39,12 +39,12 @@ export const ModalHeaders = () => {
       <HistoryHeader
         id={HistoryKeys.originalGrade}
         label={formatMessage(messages.originalGradeHeader)}
-        value={originalGrade}
+        value={gradeOriginalEarnedGraded}
       />
       <HistoryHeader
         id={HistoryKeys.currentGrade}
         label={formatMessage(messages.currentGradeHeader)}
-        value={currentGrade}
+        value={gradeOverrideCurrentEarnedGradedOverride}
       />
     </div>
   );

src/components/GradesView/EditModal/ModalHeaders.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { selectors } from 'data/redux/hooks';
@@ -25,8 +25,8 @@ const modalData = {
 };
 selectors.app.useModalData.mockReturnValue(modalData);
 const gradeData = {
-  currentGrade: 'test-current-grade',
-  originalGrade: 'test-original-grade',
+  gradeOverrideCurrentEarnedGradedOverride: 'test-current-grade',
+  gradeOriginalEarnedGraded: 'test-original-grade',
 };
 selectors.grades.useGradeData.mockReturnValue(gradeData);
 
@@ -47,10 +47,10 @@ describe('ModalHeaders', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('assignment header', () => {
-      const headerProps = el.find(HistoryHeader).at(0).props();
+      const headerProps = el.instance.findByType(HistoryHeader)[0].props;
       expect(headerProps).toMatchObject({
         id: HistoryKeys.assignment,
         label: formatMessage(messages.assignmentHeader),
@@ -58,7 +58,7 @@ describe('ModalHeaders', () => {
       });
     });
     test('student header', () => {
-      const headerProps = el.find(HistoryHeader).at(1).props();
+      const headerProps = el.instance.findByType(HistoryHeader)[1].props;
       expect(headerProps).toMatchObject({
         id: HistoryKeys.student,
         label: formatMessage(messages.studentHeader),
@@ -66,19 +66,19 @@ describe('ModalHeaders', () => {
       });
     });
     test('originalGrade header', () => {
-      const headerProps = el.find(HistoryHeader).at(2).props();
+      const headerProps = el.instance.findByType(HistoryHeader)[2].props;
       expect(headerProps).toMatchObject({
         id: HistoryKeys.originalGrade,
         label: formatMessage(messages.originalGradeHeader),
-        value: gradeData.originalGrade,
+        value: gradeData.gradeOriginalEarnedGraded,
       });
     });
     test('currentGrade header', () => {
-      const headerProps = el.find(HistoryHeader).at(3).props();
+      const headerProps = el.instance.findByType(HistoryHeader)[3].props;
       expect(headerProps).toMatchObject({
         id: HistoryKeys.currentGrade,
         label: formatMessage(messages.currentGradeHeader),
-        value: gradeData.currentGrade,
+        value: gradeData.gradeOverrideCurrentEarnedGradedOverride,
       });
     });
   });

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import useAdjustedGradeInputData from './hooks';
 

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import useAdjustedGradeInputData from './hooks';
 import AdjustedGradeInput from '.';
@@ -28,11 +28,11 @@ describe('AdjustedGradeInput component', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
-      const control = el.find(Form.Control);
-      expect(control.props().value).toEqual(hookProps.value);
-      expect(control.props().onChange).toEqual(hookProps.onChange);
-      expect(el.contains(hookProps.hintText)).toEqual(true);
+      expect(el.snapshot).toMatchSnapshot();
+      const control = el.instance.findByType(Form.Control)[0];
+      expect(control.props.value).toEqual(hookProps.value);
+      expect(control.props.onChange).toEqual(hookProps.onChange);
+      expect(el.instance.children[1].el).toContain(hookProps.hintText);
     });
   });
 });

src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import useReasonInputData from './hooks';
 

src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import useReasonInputData from './hooks';
 import ReasonInput from '.';
@@ -28,10 +28,10 @@ describe('ReasonInput component', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
-      const control = el.find(Form.Control);
-      expect(control.props().value).toEqual(hookProps.value);
-      expect(control.props().onChange).toEqual(hookProps.onChange);
+      expect(el.snapshot).toMatchSnapshot();
+      const control = el.instance.findByType(Form.Control)[0];
+      expect(control.props.value).toEqual(hookProps.value);
+      expect(control.props.onChange).toEqual(hookProps.onChange);
     });
   });
 });

src/components/GradesView/EditModal/OverrideTable/ReasonInput/ref.test.jsx

@@ -5,7 +5,7 @@ import useReasonInputData from './hooks';
 import ReasonInput, { controlTestId } from '.';
 
 jest.unmock('react');
-jest.unmock('@edx/paragon');
+jest.unmock('@openedx/paragon');
 jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
 
 const focus = jest.fn();

src/components/GradesView/EditModal/OverrideTable/__snapshots__/index.test.jsx.snap

@@ -4,16 +4,16 @@ exports[`OverrideTable component render snapshot 1`] = `
 <DataTable
   columns="test-columns"
   data={
-    Array [
-      Object {
+    [
+      {
         "test": "data",
       },
-      Object {
+      {
         "andOther": "test-data",
       },
-      Object {
+      {
         "adjustedGrade": <AdjustedGradeInput />,
-        "date": Object {
+        "date": {
           "formatted": 2000-01-01T00:00:00.000Z,
         },
         "reason": <ReasonInput />,

src/components/GradesView/EditModal/OverrideTable/index.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
 import React from 'react';
 
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 
 import { formatDateForDisplay } from 'utils';
 

src/components/GradesView/EditModal/OverrideTable/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 
 import { formatDateForDisplay } from 'utils';
 
@@ -48,10 +48,10 @@ describe('OverrideTable component', () => {
       expect(el.isEmptyRender()).toEqual(true);
     });
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
-      const table = el.find(DataTable);
-      expect(table.props().columns).toEqual(hookProps.columns);
-      const data = [...table.props().data];
+      expect(el.snapshot).toMatchSnapshot();
+      const table = el.instance.findByType(DataTable)[0];
+      expect(table.props.columns).toEqual(hookProps.columns);
+      const data = [...table.props.data];
       const inputRow = data.pop();
       const formattedDate = formatDateForDisplay(new Date());
       expect(data).toEqual(hookProps.data);

src/components/GradesView/EditModal/index.jsx

@@ -5,7 +5,7 @@ import {
   Alert,
   ModalDialog,
   ActionRow,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import OverrideTable from './OverrideTable';

src/components/GradesView/EditModal/index.test.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import {
   ActionRow,
   ModalDialog,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { formatMessage } from 'testUtils';
@@ -43,60 +43,56 @@ describe('EditModal component', () => {
   });
   describe('render', () => {
     test('modal props', () => {
-      const modalProps = el.find(ModalDialog).props();
+      const modalProps = el.instance.findByType(ModalDialog)[0].props;
       expect(modalProps.title).toEqual(formatMessage(messages.title));
       expect(modalProps.isOpen).toEqual(hookProps.isOpen);
       expect(modalProps.onClose).toEqual(hookProps.onClose);
     });
     const loadBody = () => {
-      const body = el.find(ModalDialog).children().at(0);
-      const children = body.find('div').children();
+      const body = el.instance.findByType(ModalDialog)[0].children[0];
+      const { children } = body.children[0];
       return { body, children };
     };
     const testBody = () => {
       test('type', () => {
         const { body } = loadBody();
-        expect(body.type()).toEqual('ModalDialog.Body');
+        expect(body.type).toEqual('ModalDialog.Body');
       });
       test('headers row', () => {
         const { children } = loadBody();
-        expect(children.at(0)).toMatchObject(shallow(<ModalHeaders />));
+        expect(children[0]).toMatchObject(shallow(<ModalHeaders />));
       });
       test('table row', () => {
         const { children } = loadBody();
-        expect(children.at(2)).toMatchObject(shallow(<OverrideTable />));
+        expect(children[2]).toMatchObject(shallow(<OverrideTable />));
       });
       test('messages', () => {
         const { children } = loadBody();
-        expect(
-          children.at(3).contains(formatMessage(messages.visibility)),
-        ).toEqual(true);
-        expect(
-          children.at(4).contains(formatMessage(messages.saveVisibility)),
-        ).toEqual(true);
+        expect(children[3].children[0].el).toEqual(formatMessage(messages.visibility));
+        expect(children[4].children[0].el).toEqual(formatMessage(messages.saveVisibility));
       });
     };
     const testFooter = () => {
       let footer;
       beforeEach(() => {
-        footer = el.find(ModalDialog).children().at(1);
+        footer = el.instance.findByType(ModalDialog)[0].children;
       });
       test('type', () => {
-        expect(footer.type()).toEqual('ModalDialog.Footer');
+        expect(footer[1].type).toEqual('ModalDialog.Footer');
       });
       test('contains action row', () => {
-        expect(footer.children().at(0).type()).toEqual('ActionRow');
+        expect(footer[1].children[0].type).toEqual('ActionRow');
       });
       test('close button', () => {
-        const button = footer.find(ActionRow).children().at(0);
-        expect(button.contains(formatMessage(messages.closeText))).toEqual(true);
-        expect(button.type()).toEqual('ModalDialog.CloseButton');
+        const button = footer[1].findByType(ActionRow)[0].children[0];
+        expect(button.children[0].el).toEqual(formatMessage(messages.closeText));
+        expect(button.type).toEqual('ModalDialog.CloseButton');
       });
       test('adjusted grade button', () => {
-        const button = footer.find(ActionRow).children().at(1);
-        expect(button.contains(formatMessage(messages.saveGrade))).toEqual(true);
-        expect(button.type()).toEqual('Button');
-        expect(button.props().onClick).toEqual(hookProps.handleAdjustedGradeClick);
+        const button = footer[1].findByType(ActionRow)[0].children[1];
+        expect(button.children[0].el).toEqual(formatMessage(messages.saveGrade));
+        expect(button.type).toEqual('Button');
+        expect(button.props.onClick).toEqual(hookProps.handleAdjustedGradeClick);
       });
     };
     describe('without error', () => {
@@ -105,26 +101,26 @@ describe('EditModal component', () => {
         el = shallow(<EditModal />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       testBody();
       testFooter();
       test('alert row', () => {
-        const alert = loadBody().children.at(1);
-        expect(alert.type()).toEqual('Alert');
-        expect(alert.props().show).toEqual(false);
+        const alert = loadBody().children[1];
+        expect(alert.type).toEqual('Alert');
+        expect(alert.props.show).toEqual(false);
       });
     });
     describe('with error', () => {
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       testBody();
       test('alert row', () => {
-        const alert = loadBody().children.at(1);
-        expect(alert.type()).toEqual('Alert');
-        expect(alert.props().show).toEqual(true);
-        expect(alert.contains(hookProps.error)).toEqual(true);
+        const alert = loadBody().children[1];
+        expect(alert.type).toEqual('Alert');
+        expect(alert.props.show).toEqual(true);
+        expect(alert.children[0].el).toEqual(hookProps.error);
       });
       testFooter();
     });

src/components/GradesView/FilterBadges/FilterBadge.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { selectors } from 'data/redux/hooks';
@@ -32,8 +32,8 @@ export const FilterBadge = ({
   return (
     <div>
       <span className="badge badge-info">
-        <span>{formatMessage(displayName)}</span>
-        <span>
+        <span data-testid="display-name">{formatMessage(displayName)}</span>
+        <span data-testid="filter-value">
           {!hideValue ? `: ${value}` : ''}
         </span>
         <Button

src/components/GradesView/FilterBadges/FilterBadge.test.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { formatMessage } from 'testUtils';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 import { selectors } from 'data/redux/hooks';
 import FilterBadge from './FilterBadge';
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Button: () => 'Button',
 }));
 jest.mock('data/redux/hooks', () => ({
@@ -48,12 +48,12 @@ describe('FilterBadge', () => {
   describe('render', () => {
     const testDisplayName = () => {
       test('formatted display name appears on badge', () => {
-        expect(el.contains(formatMessage(hookProps.displayName))).toEqual(true);
+        expect(el.instance.findByTestId('display-name')[0].children[0].el).toEqual(formatMessage(hookProps.displayName));
       });
     };
     const testCloseButton = () => {
       test('close button forwards close method', () => {
-        expect(el.find(Button).props().onClick).toEqual(handleClose(hookProps.connectedFilters));
+        expect(el.instance.findByType(Button)[0].props.onClick).toEqual(handleClose(hookProps.connectedFilters));
       });
     };
     test('empty render if isDefault', () => {
@@ -75,20 +75,20 @@ describe('FilterBadge', () => {
       testDisplayName();
       testCloseButton();
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('value is note present in the badge', () => {
-        expect(el.contains(hookProps.value)).toEqual(false);
+        expect(el.instance.findByTestId('filter-value')[0].children).toHaveLength(0);
       });
     });
     describe('do not hide value', () => {
       testDisplayName();
       testCloseButton();
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
-      test('value is note present in the badge', () => {
-        expect(el.text().includes(hookProps.value)).toEqual(true);
+      test('value is present in the badge', () => {
+        expect(el.instance.findByTestId('filter-value')[0].children[0].el).toBe(`: ${hookProps.value}`);
       });
     });
   });

src/components/GradesView/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap

@@ -5,18 +5,22 @@ exports[`FilterBadge render do not hide value snapshot 1`] = `
   <span
     className="badge badge-info"
   >
-    <span>
+    <span
+      data-testid="display-name"
+    >
       a common name
     </span>
-    <span>
+    <span
+      data-testid="filter-value"
+    >
       : a common value
     </span>
     <Button
       aria-label="close"
       className="btn-info"
       onClick={
-        Object {
-          "handleClose": Array [
+        {
+          "handleClose": [
             "some",
             "filters",
           ],
@@ -39,16 +43,20 @@ exports[`FilterBadge render hide Value snapshot 1`] = `
   <span
     className="badge badge-info"
   >
-    <span>
+    <span
+      data-testid="display-name"
+    >
       a common name
     </span>
-    <span />
+    <span
+      data-testid="filter-value"
+    />
     <Button
       aria-label="close"
       className="btn-info"
       onClick={
-        Object {
-          "handleClose": Array [
+        {
+          "handleClose": [
             "some",
             "filters",
           ],

src/components/GradesView/FilterBadges/test.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-named-as-default */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import FilterBadges from '.';
 import FilterBadge from './FilterBadge';
@@ -22,14 +22,14 @@ describe('FilterBadges', () => {
       el = shallow(<FilterBadges handleClose={handleClose} />);
     });
     test('snapshot - has a filterbadge with handleClose for each filter in badgeOrder', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('has a filterbadge with handleClose for each filter in badgeOrder', () => {
-      const badgeProps = el.find(FilterBadge).map(badgeEl => badgeEl.props());
+      const badgeProps = el.instance.findByType(FilterBadge).map(badgeEl => badgeEl.props);
       // key prop is not rendered by react
-      expect(badgeProps[0]).toEqual({ filterName: order[0], handleClose });
-      expect(badgeProps[1]).toEqual({ filterName: order[1], handleClose });
-      expect(badgeProps[2]).toEqual({ filterName: order[2], handleClose });
+      expect(badgeProps[0]).toMatchObject({ filterName: order[0], handleClose });
+      expect(badgeProps[1]).toMatchObject({ filterName: order[1], handleClose });
+      expect(badgeProps[2]).toMatchObject({ filterName: order[2], handleClose });
       expect(badgeProps.length).toEqual(3);
     });
   });

src/components/GradesView/FilterMenuToggle/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Button, Icon } from '@edx/paragon';
+import { Button, Icon } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { FilterAlt } from '@edx/paragon/icons';
+import { FilterAlt } from '@openedx/paragon/icons';
 
 import { thunkActions } from 'data/redux/hooks';
 

src/components/GradesView/FilterMenuToggle/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
@@ -38,10 +38,10 @@ describe('FilterMenuToggle component', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
-      expect(el.type()).toEqual('Button');
-      expect(el.props().onClick).toEqual(toggleFilterMenu);
-      expect(el.text().includes(formatMessage(messages.editFilters)));
+      expect(el.snapshot).toMatchSnapshot();
+      expect(el.instance.type).toEqual('Button');
+      expect(el.instance.props.onClick).toEqual(toggleFilterMenu);
+      expect(el.instance.children[2].el).toContain(formatMessage(messages.editFilters));
     });
   });
 });

src/components/GradesView/FilteredUsersLabel/__snapshots__/index.test.jsx.snap

@@ -3,14 +3,14 @@
 exports[`FilteredUsersLabel component render snapshot 1`] = `
 <format-message-function
   message={
-    Object {
+    {
       "defaultMessage": "Showing {filteredUsers} of {totalUsers} total learners",
       "description": "Users visibility label",
       "id": "gradebook.GradesTab.usersVisibilityLabel",
     }
   }
   values={
-    Object {
+    {
       "filteredUsers": <BoldText
         text={100}
       />,

src/components/GradesView/FilteredUsersLabel/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
@@ -46,8 +46,8 @@ describe('FilteredUsersLabel component', () => {
       expect(shallow(<FilteredUsersLabel />).isEmptyRender()).toEqual(true);
     });
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
-      expect(el).toMatchObject(shallow(formatMessage(messages.visibilityLabel, {
+      expect(el.snapshot).toMatchSnapshot();
+      expect(el.instance).toMatchObject(shallow(formatMessage(messages.visibilityLabel, {
         filteredUsers: <BoldText text={userCounts.filteredUsersCount} />,
         totalUsers: <BoldText text={userCounts.totalUsersCount} />,
       })));

src/components/GradesView/GradebookTable/Fields.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import Fields from './Fields';
 
@@ -16,14 +16,13 @@ describe('Gradebook Table Fields', () => {
         el = shallow(<Fields.Username {...props} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('wraps external user key and username', () => {
-        expect(el.find('span').childAt(0)).toMatchSnapshot();
-        expect(el.find('span').childAt(0)).toMatchSnapshot();
-        const content = el.find('span').childAt(0);
-        expect(content.childAt(0).text()).toEqual(username);
-        expect(content.childAt(1).text()).toEqual(props.userKey);
+        expect(el.instance.findByType('span')[0].el).toMatchSnapshot();
+        const content = el.instance.findByType('span')[0].children[0];
+        expect(content.children[0].children[0].el).toEqual(username);
+        expect(content.children[1].children[0].el).toEqual(props.userKey);
       });
     });
     describe('without external_user_key', () => {
@@ -31,12 +30,12 @@ describe('Gradebook Table Fields', () => {
         el = shallow(<Fields.Username username={username} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('wraps username only', () => {
-        const content = el.find('span').childAt(0);
-        expect(content.childAt(0).text()).toEqual(username);
-        expect(content.children()).toHaveLength(1);
+        const content = el.instance.findByType('span')[0].children[0];
+        expect(content.children[0].children[0].el).toEqual(username);
+        expect(content.children).toHaveLength(1);
       });
     });
   });
@@ -44,10 +43,10 @@ describe('Gradebook Table Fields', () => {
   describe('Text', () => {
     const value = 'myTag@place.com';
     test('snapshot', () => {
-      expect(shallow(<Fields.Text value={value} />)).toMatchSnapshot();
+      expect(shallow(<Fields.Text value={value} />).snapshot).toMatchSnapshot();
     });
     test('wraps entry value', () => {
-      expect(shallow(<Fields.Text value={value} />).text()).toEqual(value);
+      expect(shallow(<Fields.Text value={value} />).instance.children[0].el).toEqual(value);
     });
   });
 });

src/components/GradesView/GradebookTable/GradeButton.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import { selectors, thunkActions } from 'data/redux/hooks';
 import transforms from 'data/redux/transforms';

src/components/GradesView/GradebookTable/GradeButton.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { selectors, thunkActions } from 'data/redux/hooks';
 import transforms from 'data/redux/transforms';
@@ -101,8 +101,8 @@ describe('GradeButton', () => {
         el = shallow(<GradeButton {...props} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
-        expect(el.text()).toEqual(hookProps.label);
+        expect(el.snapshot).toMatchSnapshot();
+        expect(el.instance.el).toEqual(hookProps.label);
       });
     });
     describe('not frozen grades', () => {
@@ -111,10 +111,10 @@ describe('GradeButton', () => {
         el = shallow(<GradeButton {...props} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
-        expect(el.type()).toEqual('Button');
-        expect(el.props().onClick).toEqual(hookProps.onClick);
-        expect(el.contains(hookProps.label)).toEqual(true);
+        expect(el.snapshot).toMatchSnapshot();
+        expect(el.instance.type).toEqual('Button');
+        expect(el.instance.props.onClick).toEqual(hookProps.onClick);
+        expect(el.instance.children[0].el).toEqual(hookProps.label);
       });
     });
   });

src/components/GradesView/GradebookTable/LabelReplacements.jsx

@@ -5,7 +5,7 @@ import {
   Icon,
   OverlayTrigger,
   Tooltip,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import { StrictDict } from 'utils';
 

src/components/GradesView/GradebookTable/LabelReplacements.test.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { getLocale } from '@edx/frontend-platform/i18n';
 
-import { OverlayTrigger } from '@edx/paragon';
+import { OverlayTrigger } from '@openedx/paragon';
 
 import LabelReplacements from './LabelReplacements';
 
@@ -12,7 +12,7 @@ const {
   MastersOnlyLabelReplacement,
 } = LabelReplacements;
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Icon: () => 'Icon',
   OverlayTrigger: () => 'OverlayTrigger',
   Tooltip: () => 'Tooltip',
@@ -25,15 +25,15 @@ describe('LabelReplacements', () => {
       el = shallow(<TotalGradeLabelReplacement />);
     });
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('displays overlay tooltip', () => {
-      expect(el.find(OverlayTrigger).props().overlay).toMatchSnapshot();
+      expect(el.instance.findByType(OverlayTrigger)[0].props.overlay).toMatchSnapshot();
     });
   });
   describe('UsernameLabelReplacement', () => {
     test('snapshot', () => {
-      expect(shallow(<UsernameLabelReplacement />)).toMatchSnapshot();
+      expect(shallow(<UsernameLabelReplacement />).snapshot).toMatchSnapshot();
     });
   });
   describe('MastersOnlyLabelReplacement', () => {
@@ -43,7 +43,7 @@ describe('LabelReplacements', () => {
         defaultMessage: 'defaultMessAge',
         description: 'desCripTion',
       };
-      expect(shallow(<MastersOnlyLabelReplacement {...message} />)).toMatchSnapshot();
+      expect(shallow(<MastersOnlyLabelReplacement {...message} />).snapshot).toMatchSnapshot();
     });
   });
 });
@@ -53,11 +53,11 @@ describe('snapshot', () => {
   test('right to left overlay placement', () => {
     getLocale.mockImplementation(() => 'en');
     el = shallow(<TotalGradeLabelReplacement />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   test('left to right overlay placement', () => {
     getLocale.mockImplementation(() => 'ar');
     el = shallow(<TotalGradeLabelReplacement />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
 });

src/components/GradesView/GradebookTable/__snapshots__/Fields.test.jsx.snap

@@ -28,29 +28,36 @@ exports[`Gradebook Table Fields Username with external_user_key snapshot 1`] = `
 `;
 
 exports[`Gradebook Table Fields Username with external_user_key wraps external user key and username 1`] = `
-<div>
-  <div>
-    MyNameFromHere
-  </div>
-  <div
-    className="student-key"
-  >
-    My name from another land
-  </div>
-</div>
-`;
-
-exports[`Gradebook Table Fields Username with external_user_key wraps external user key and username 2`] = `
-<div>
-  <div>
-    MyNameFromHere
-  </div>
-  <div
-    className="student-key"
-  >
-    My name from another land
-  </div>
-</div>
+{
+  "children": [
+    {
+      "children": [
+        {
+          "children": [
+            "MyNameFromHere",
+          ],
+          "props": {},
+          "type": "div",
+        },
+        {
+          "children": [
+            "My name from another land",
+          ],
+          "props": {
+            "className": "student-key",
+          },
+          "type": "div",
+        },
+      ],
+      "props": {},
+      "type": "div",
+    },
+  ],
+  "props": {
+    "className": "wrap-text-in-cell",
+  },
+  "type": "span",
+}
 `;
 
 exports[`Gradebook Table Fields Username without external_user_key snapshot 1`] = `

src/components/GradesView/GradebookTable/__snapshots__/LabelReplacements.test.jsx.snap

@@ -32,7 +32,7 @@ exports[`LabelReplacements TotalGradeLabelReplacement snapshot 1`] = `
     }
     placement="left"
     trigger={
-      Array [
+      [
         "hover",
         "focus",
       ]
@@ -84,7 +84,7 @@ exports[`snapshot left to right overlay placement 1`] = `
     }
     placement="right"
     trigger={
-      Array [
+      [
         "hover",
         "focus",
       ]
@@ -118,7 +118,7 @@ exports[`snapshot right to left overlay placement 1`] = `
     }
     placement="left"
     trigger={
-      Array [
+      [
         "hover",
         "focus",
       ]

src/components/GradesView/GradebookTable/__snapshots__/index.test.jsx.snap

@@ -7,13 +7,13 @@ exports[`GradebookTable snapshot 1`] = `
   <DataTable
     RowStatusComponent={[MockFunction hooks.nullMethod]}
     columns={
-      Array [
+      [
         "some",
         "columns",
       ]
     }
     data={
-      Array [
+      [
         "some",
         "data",
       ]

src/components/GradesView/GradebookTable/hooks.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 

src/components/GradesView/GradebookTable/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 
 import useGradebookTableData from './hooks';
 

src/components/GradesView/GradebookTable/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { DataTable } from '@edx/paragon';
+import { DataTable } from '@openedx/paragon';
 
 import useGradebookTableData from './hooks';
 import GradebookTable from '.';
@@ -24,16 +24,16 @@ describe('GradebookTable', () => {
     el = shallow(<GradebookTable />);
   });
   test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   test('Datatable props', () => {
-    const datatable = el.find(DataTable);
-    const props = datatable.props();
+    const datatable = el.instance.findByType(DataTable)[0];
+    const { props } = datatable;
     expect(props.columns).toEqual(hookProps.columns);
     expect(props.data).toEqual(hookProps.data);
     expect(props.itemCount).toEqual(hookProps.grades.length);
     expect(props.RowStatusComponent).toEqual(hookProps.nullMethod);
-    expect(datatable.children().at(2).type()).toEqual('DataTable.EmptyTable');
-    expect(datatable.children().at(2).props().content).toEqual(hookProps.emptyContent);
+    expect(datatable.children[2].type).toEqual('DataTable.EmptyTable');
+    expect(datatable.children[2].props.content).toEqual(hookProps.emptyContent);
   });
 });

src/components/GradesView/ImportGradesButton/__snapshots__/index.test.jsx.snap

@@ -41,7 +41,7 @@ exports[`ImportGradesButton component render snapshot 1`] = `
     className="import-grades-btn"
     import={true}
     label={
-      Object {
+      {
         "defaultMessage": "Import Grades",
         "description": "A labeled button to import grades in the BulkManagement Tab File Upload Form",
         "id": "gradebook.GradesView.importGradesBtnText",

src/components/GradesView/ImportGradesButton/index.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import NetworkButton from 'components/NetworkButton';
 import messages from './messages';

src/components/GradesView/ImportGradesButton/index.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import NetworkButton from 'components/NetworkButton';
 import useImportGradesButtonData from './hooks';

src/components/GradesView/ImportGradesButton/ref.test.jsx

@@ -5,7 +5,7 @@ import useImportGradesButtonData from './hooks';
 import ImportGradesButton from '.';
 
 jest.unmock('react');
-jest.unmock('@edx/paragon');
+jest.unmock('@openedx/paragon');
 jest.mock('components/NetworkButton', () => 'network-button');
 jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
 

src/components/GradesView/ImportSuccessToast/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Toast } from '@edx/paragon';
+import { Toast } from '@openedx/paragon';
 
 import useImportSuccessToastData from './hooks';
 

src/components/GradesView/ImportSuccessToast/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import useImportSuccessToastData from './hooks';
 import ImportSuccessToast from '.';
@@ -26,14 +26,14 @@ describe('ImportSuccessToast component', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('Toast', () => {
-      expect(el.type()).toEqual('Toast');
-      expect(el.props().action).toEqual(hookProps.action);
-      expect(el.props().onClose).toEqual(hookProps.onClose);
-      expect(el.props().show).toEqual(hookProps.show);
-      expect(el.text()).toEqual(hookProps.description);
+      expect(el.instance.type).toEqual('Toast');
+      expect(el.instance.props.action).toEqual(hookProps.action);
+      expect(el.instance.props.onClose).toEqual(hookProps.onClose);
+      expect(el.instance.props.show).toEqual(hookProps.show);
+      expect(el.instance.children[0].el).toEqual(hookProps.description);
     });
   });
 });

src/components/GradesView/InterventionsReport/__snapshots__/index.test.jsx.snap

@@ -17,7 +17,7 @@ exports[`InterventionsReport component output snapshot 1`] = `
     </div>
     <NetworkButton
       label={
-        Object {
+        {
           "defaultMessage": "Download Interventions",
           "description": "The labeled button to download the Intervention report from the Grades View",
           "id": "gradebook.GradesView.InterventionsReport.downloadBtn",

src/components/GradesView/InterventionsReport/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
@@ -33,8 +33,8 @@ describe('InterventionsReport component', () => {
       expect(el.isEmptyRender()).toEqual(true);
     });
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
-      const btnProps = el.find(NetworkButton).props();
+      expect(el.snapshot).toMatchSnapshot();
+      const btnProps = el.instance.findByType(NetworkButton)[0].props;
       expect(btnProps.label).toEqual(messages.downloadBtn);
       expect(btnProps.onClick).toEqual(hookProps.handleClick);
     });

src/components/GradesView/PageButtons/__snapshots__/index.test.jsx.snap

@@ -4,7 +4,7 @@ exports[`PageButtons component render snapshot 1`] = `
 <div
   className="d-flex justify-content-center"
   style={
-    Object {
+    {
       "paddingBottom": "20px",
     }
   }
@@ -13,7 +13,7 @@ exports[`PageButtons component render snapshot 1`] = `
     disabled="prev-disabled"
     onClick={[MockFunction hooks.prev.onClick]}
     style={
-      Object {
+      {
         "margin": "20px",
       }
     }
@@ -25,7 +25,7 @@ exports[`PageButtons component render snapshot 1`] = `
     disabled="next-disabled"
     onClick={[MockFunction hooks.next.onClick]}
     style={
-      Object {
+      {
         "margin": "20px",
       }
     }

src/components/GradesView/PageButtons/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import usePageButtonsData from './hooks';
 

src/components/GradesView/PageButtons/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import usePageButtonsData from './hooks';
 import PageButtons from '.';
@@ -35,19 +35,19 @@ describe('PageButtons component', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('prev button', () => {
-      const button = el.find(Button).at(0);
-      expect(button.props().disabled).toEqual(hookProps.prev.disabled);
-      expect(button.props().onClick).toEqual(hookProps.prev.onClick);
-      expect(button.text()).toEqual(hookProps.prev.text);
+      const button = el.instance.findByType(Button)[0];
+      expect(button.props.disabled).toEqual(hookProps.prev.disabled);
+      expect(button.props.onClick).toEqual(hookProps.prev.onClick);
+      expect(button.children[0].el).toEqual(hookProps.prev.text);
     });
     test('next button', () => {
-      const button = el.find(Button).at(1);
-      expect(button.props().disabled).toEqual(hookProps.next.disabled);
-      expect(button.props().onClick).toEqual(hookProps.next.onClick);
-      expect(button.text()).toEqual(hookProps.next.text);
+      const button = el.instance.findByType(Button)[1];
+      expect(button.props.disabled).toEqual(hookProps.next.disabled);
+      expect(button.props.onClick).toEqual(hookProps.next.onClick);
+      expect(button.children[0].el).toEqual(hookProps.next.text);
     });
   });
 });

src/components/GradesView/ScoreViewInput/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { actions, selectors } from 'data/redux/hooks';

src/components/GradesView/ScoreViewInput/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { GradeFormats } from 'data/constants/grades';
@@ -40,27 +40,27 @@ describe('ScoreViewInput component', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('label', () => {
-      const label = el.children().at(0);
-      expect(label.text()).toEqual(`${formatMessage(messages.scoreView)}:`);
+      const label = el.instance.children[0];
+      expect(label.children[0].el).toEqual(`${formatMessage(messages.scoreView)}`);
     });
     describe('form control', () => {
       let control;
       beforeEach(() => {
-        control = el.children().at(1);
+        control = el.instance.children;
       });
       test('value and onChange from redux hooks', () => {
-        expect(control.props().value).toEqual(gradeFormat);
-        expect(control.props().onChange).toEqual(toggleGradeFormat);
+        expect(control[1].props.value).toEqual(gradeFormat);
+        expect(control[1].props.onChange).toEqual(toggleGradeFormat);
       });
       test('absolute and percent options', () => {
-        const children = control.children();
-        expect(children.at(0).props().value).toEqual(GradeFormats.percent);
-        expect(children.at(0).text()).toEqual(formatMessage(messages.percent));
-        expect(children.at(1).props().value).toEqual(GradeFormats.absolute);
-        expect(children.at(1).text()).toEqual(formatMessage(messages.absolute));
+        const { children } = control[1];
+        expect(children[0].props.value).toEqual(GradeFormats.percent);
+        expect(children[0].children[0].el).toEqual(formatMessage(messages.percent));
+        expect(children[1].props.value).toEqual(GradeFormats.absolute);
+        expect(children[1].children[0].el).toEqual(formatMessage(messages.absolute));
       });
     });
   });

src/components/GradesView/SearchControls/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { SearchField } from '@edx/paragon';
+import { SearchField } from '@openedx/paragon';
 import useSearchControlsData from './hooks';
 
 /**