test: Remove unwanted mocks, unmocks and deprecate react-unit-test-utils package (#465)

* test: remove last snapshot

* test: remove unwanted mocks, remove unmocks, refactor renderWithIntl

* test: refactor renderWithIntl with small improvements

* test: remove react-unit-test-utils

* test: change fireEvent for userEvent

package-lock.json

@@ -58,7 +58,6 @@
       },
       "devDependencies": {
         "@edx/browserslist-config": "^1.3.0",
-        "@edx/react-unit-test-utils": "^4.0.0",
         "@edx/reactifex": "^2.1.1",
         "@openedx/frontend-build": "^14.3.3",
         "@testing-library/jest-dom": "^6.6.3",
@@ -2679,44 +2678,6 @@
         "atlas": "atlas"
       }
     },
-    "node_modules/@edx/react-unit-test-utils": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@edx/react-unit-test-utils/-/react-unit-test-utils-4.0.0.tgz",
-      "integrity": "sha512-QlVYhYD9L2bzx1eAtf8BbCJr00ek9rrHrG+/pW2bVSt+t0uvKHQpX1CNdMrDePv18DsMeC7IOB00t8ZIn4mi7w==",
-      "dev": true,
-      "license": "AGPL-3.0",
-      "dependencies": {
-        "@edx/browserslist-config": "^1.1.1",
-        "@reduxjs/toolkit": "^1.5.1",
-        "@testing-library/dom": "^10.4.0",
-        "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^16.2.0",
-        "classnames": "^2.2.6",
-        "core-js": "3.6.5",
-        "lodash": "^4.17.21",
-        "react-dev-utils": "^12.0.1",
-        "react-test-renderer": "^18.3.1"
-      },
-      "peerDependencies": {
-        "@edx/frontend-platform": "^8.3.1",
-        "@openedx/frontend-build": "^14.3.0",
-        "@openedx/paragon": "^22.0.0 || ^23.0.0",
-        "react": "^18.0.0"
-      }
-    },
-    "node_modules/@edx/react-unit-test-utils/node_modules/core-js": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
-      "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==",
-      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
     "node_modules/@edx/reactifex": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@edx/reactifex/-/reactifex-2.2.0.tgz",
@@ -5351,6 +5312,7 @@
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
       "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -5506,7 +5468,8 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -9475,7 +9438,8 @@
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/dom-converter": {
       "version": "0.2.0",
@@ -15292,6 +15256,7 @@
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -17761,6 +17726,7 @@
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -17775,6 +17741,7 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },

package.json

@@ -76,7 +76,6 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.3.0",
-    "@edx/react-unit-test-utils": "^4.0.0",
     "@edx/reactifex": "^2.1.1",
     "@openedx/frontend-build": "^14.3.3",
     "@testing-library/jest-dom": "^6.6.3",

src/App.test.jsx

@@ -1,12 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { selectors } from 'data/redux';
+import { renderWithIntl } from './testUtils';
 import { App, mapStateToProps } from './App';
 
-jest.unmock('react');
-jest.unmock('@openedx/paragon');
-jest.unmock('@edx/frontend-platform/i18n');
-
 // we want to scope these tests to the App component, so we mock some child components to reduce complexity
 
 jest.mock('@edx/frontend-platform/auth', () => ({
@@ -39,12 +35,6 @@ jest.mock('data/redux', () => ({
   },
 }));
 
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en" messages={{}}>
-    {component}
-  </IntlProvider>,
-);
-
 describe('App component', () => {
   const defaultProps = {
     courseMetadata: {

src/__snapshots__/index.test.jsx.snap

@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<React Strict Mode>
-  <ErrorPage
-    message="test-error-message"
-  />
-</React Strict Mode>
-`;
-
-exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<React Strict Mode>
-  <AppProvider
-    store={
-      {
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-        Symbol(Symbol.observable): [Function],
-      }
-    }
-    wrapWithRouter={false}
-  >
-    <App />
-  </AppProvider>
-</React Strict Mode>
-`;

src/components/ConfirmModal.test.jsx

@@ -2,9 +2,6 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ConfirmModal } from './ConfirmModal';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('ConfirmModal', () => {
   const props = {
     isOpen: false,
@@ -21,13 +18,13 @@ describe('ConfirmModal', () => {
   });
 
   it('should not render content when modal is closed', () => {
-    const { queryByText } = render(<ConfirmModal {...props} />);
+    render(<ConfirmModal {...props} />);
-    expect(queryByText(props.content)).toBeNull();
+    expect(screen.queryByText(props.content)).toBeNull();
   });
 
   it('should display content when modal is open', () => {
-    const { getByText } = render(<ConfirmModal {...props} isOpen />);
+    render(<ConfirmModal {...props} isOpen />);
-    expect(getByText(props.content)).toBeInTheDocument();
+    expect(screen.getByText(props.content)).toBeInTheDocument();
   });
 
   it('should call onCancel when cancel button is clicked', async () => {

src/components/DemoAlert/index.test.jsx

@@ -1,12 +1,10 @@
-import { render, fireEvent } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithIntl } from '../../testUtils';
 
-import { formatMessage } from 'testUtils';
 import messages from './messages';
 import { DemoAlert } from '.';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('DemoAlert component', () => {
   const props = {
     isOpen: true,
@@ -14,20 +12,21 @@ describe('DemoAlert component', () => {
   };
 
   it('does not render when isOpen is false', () => {
-    const { queryByText } = render(<DemoAlert {...props} isOpen={false} />);
+    renderWithIntl(<DemoAlert {...props} isOpen={false} />);
-    expect(queryByText(formatMessage(messages.title))).toBeNull();
+    expect(screen.queryByText(messages.title.defaultMessage)).toBeNull();
   });
 
   it('renders with correct title and message when isOpen is true', () => {
-    const { getByText } = render(<DemoAlert {...props} />);
+    renderWithIntl(<DemoAlert {...props} />);
-    expect(getByText(formatMessage(messages.title))).toBeInTheDocument();
+    expect(screen.getByText(messages.title.defaultMessage)).toBeInTheDocument();
-    expect(getByText(formatMessage(messages.warningMessage))).toBeInTheDocument();
+    expect(screen.getByText(messages.warningMessage.defaultMessage)).toBeInTheDocument();
   });
 
-  it('calls onClose when confirmation button is clicked', () => {
+  it('calls onClose when confirmation button is clicked', async () => {
-    const { getByText } = render(<DemoAlert {...props} />);
+    renderWithIntl(<DemoAlert {...props} />);
-    const confirmButton = getByText(formatMessage(messages.confirm));
+    const user = userEvent.setup();
-    fireEvent.click(confirmButton);
+    const confirmButton = screen.getByText(messages.confirm.defaultMessage);
+    await user.click(confirmButton);
     expect(props.onClose).toHaveBeenCalled();
   });
 });

src/components/FilePopoverContent/index.test.jsx

@@ -1,11 +1,10 @@
-import { render } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-
 import filesize from 'filesize';
+import { renderWithIntl } from '../../testUtils';
+
 import FilePopoverContent from '.';
 
 jest.mock('filesize', () => (size) => `filesize(${size})`);
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
 
 describe('FilePopoverContent', () => {
   describe('component', () => {
@@ -18,23 +17,23 @@ describe('FilePopoverContent', () => {
 
     describe('behavior', () => {
       it('renders file name correctly', () => {
-        const { getByText } = render(<FilePopoverContent {...props} />);
+        renderWithIntl(<FilePopoverContent {...props} />);
-        expect(getByText(props.name)).toBeInTheDocument();
+        expect(screen.getByText(props.name)).toBeInTheDocument();
       });
 
       it('renders file description correctly', () => {
-        const { getByText } = render(<FilePopoverContent {...props} />);
+        renderWithIntl(<FilePopoverContent {...props} />);
-        expect(getByText(props.description)).toBeInTheDocument();
+        expect(screen.getByText(props.description)).toBeInTheDocument();
       });
 
       it('renders file size correctly', () => {
-        const { getByText } = render(<FilePopoverContent {...props} />);
+        renderWithIntl(<FilePopoverContent {...props} />);
-        expect(getByText(filesize(props.size))).toBeInTheDocument();
+        expect(screen.getByText(filesize(props.size))).toBeInTheDocument();
       });
 
       it('renders "Unknown" when size is null', () => {
-        const { getByText } = render(<FilePopoverContent {...props} size={null} />);
+        renderWithIntl(<FilePopoverContent {...props} size={null} />);
-        expect(getByText('Unknown')).toBeInTheDocument();
+        expect(screen.getByText('Unknown')).toBeInTheDocument();
       });
     });
   });

src/components/FilePreview/Banners/ErrorBanner.test.jsx

@@ -1,10 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { renderWithIntl } from '../../../testUtils';
 import ErrorBanner from './ErrorBanner';
 import messages from '../messages';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('Error Banner component', () => {
   const children = <p>Abitary Child</p>;
 
@@ -27,25 +25,25 @@ describe('Error Banner component', () => {
 
   describe('behavior', () => {
     it('renders children content', () => {
-      render(<ErrorBanner {...props} />);
+      renderWithIntl(<ErrorBanner {...props} />);
       const childText = screen.getByText('Abitary Child');
       expect(childText).toBeInTheDocument();
     });
 
     it('renders the correct number of action buttons', () => {
-      render(<ErrorBanner {...props} />);
+      renderWithIntl(<ErrorBanner {...props} />);
-      const buttons = screen.getAllByText('FormattedMessage');
+      const buttons = screen.getAllByText(messages.retryButton.defaultMessage);
-      expect(buttons).toHaveLength(3);
+      expect(buttons).toHaveLength(2);
     });
 
     it('renders error heading with correct message', () => {
-      render(<ErrorBanner {...props} />);
+      renderWithIntl(<ErrorBanner {...props} />);
-      const heading = screen.getAllByText('FormattedMessage')[0];
+      const heading = screen.getAllByText(messages.unknownError.defaultMessage)[0];
       expect(heading).toBeInTheDocument();
     });
 
     it('renders with danger variant', () => {
-      render(<ErrorBanner {...props} />);
+      renderWithIntl(<ErrorBanner {...props} />);
       const alert = screen.getByRole('alert');
       expect(alert).toHaveClass('alert-danger');
     });

src/components/FilePreview/Banners/LoadingBanner.test.jsx

@@ -1,9 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import LoadingBanner from './LoadingBanner';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('Loading Banner component', () => {
   describe('behavior', () => {
     it('renders an info alert', () => {

src/components/FilePreview/BaseRenderers/ImageRenderer.test.jsx

@@ -3,9 +3,6 @@ import { render, screen } from '@testing-library/react';
 
 import ImageRenderer from './ImageRenderer';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('Image Renderer Component', () => {
   const props = {
     url: 'some_url.jpg',

src/components/FilePreview/BaseRenderers/PDFRenderer.test.jsx

@@ -21,9 +21,6 @@ jest.mock('./pdfHooks', () => ({
   rendererHooks: jest.fn(),
 }));
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('PDF Renderer Component', () => {
   const props = {
     url: 'some_url.pdf',

src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx

@@ -8,9 +8,6 @@ jest.mock('./textHooks', () => {
   };
 });
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 const textHooks = require('./textHooks');
 
 describe('TXT Renderer Component', () => {

src/components/FilePreview/BaseRenderers/pdfHooks.test.js

@@ -12,6 +12,11 @@ jest.mock('react-pdf', () => ({
   Page: () => 'Page',
 }));
 
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn((val) => ({ current: val, useRef: true })),
+}));
+
 const state = new MockUseState(hooks);
 const hookKeys = keyStore(hooks);
 

src/components/FilePreview/BaseRenderers/textHooks.test.js

@@ -10,6 +10,11 @@ jest.mock('axios', () => ({
   get: jest.fn(),
 }));
 
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useEffect: jest.fn((cb, prereqs) => ({ useEffect: { cb, prereqs } })),
+}));
+
 const hookKeys = keyStore(hooks);
 const state = new MockUseState(hooks);
 

src/components/FilePreview/FileCard.test.jsx

@@ -3,8 +3,6 @@ import FileCard from './FileCard';
 
 jest.mock('components/FilePopoverContent', () => 'FilePopoverContent');
 jest.mock('./FileInfo', () => 'FileInfo');
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
 
 describe('File Preview Card component', () => {
   const props = {

src/components/FilePreview/FileInfo.test.jsx

@@ -1,10 +1,9 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { renderWithIntl } from '../../testUtils';
 
 import FileInfo from './FileInfo';
-
+import messages from './messages';
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
 
 describe('FileInfo component', () => {
   const children = (<h1>some Children</h1>);
@@ -16,15 +15,14 @@ describe('FileInfo component', () => {
 
   describe('Component rendering', () => {
     it('renders the FileInfo button with correct text', () => {
-      render(<FileInfo {...props}>{children}</FileInfo>);
+      renderWithIntl(<FileInfo {...props}>{children}</FileInfo>);
-
+      expect(screen.getByText(messages.fileInfo.defaultMessage)).toBeInTheDocument();
-      expect(screen.getByText('FormattedMessage')).toBeInTheDocument();
     });
 
     it('calls onClick when button is clicked', async () => {
-      render(<FileInfo {...props}>{children}</FileInfo>);
+      renderWithIntl(<FileInfo {...props}>{children}</FileInfo>);
       const user = userEvent.setup();
-      await user.click(screen.getByText('FormattedMessage'));
+      await user.click(screen.getByText(messages.fileInfo.defaultMessage));
       expect(props.onClick).toHaveBeenCalledTimes(1);
     });
   });

src/components/FilePreview/FileRenderer.test.jsx

@@ -1,12 +1,10 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { keyStore } from 'utils';
 import { ErrorStatuses } from 'data/constants/requests';
+import { renderWithIntl } from '../../testUtils';
 import { FileRenderer } from './FileRenderer';
 import * as hooks from './hooks';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 const hookKeys = keyStore(hooks);
 
 const props = {
@@ -27,7 +25,7 @@ describe('FileRenderer', () => {
         rendererProps: { prop: 'hooks.rendererProps' },
       };
       jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
-      render(<FileRenderer {...props} />);
+      renderWithIntl(<FileRenderer {...props} />);
 
       expect(screen.getByText('filename.txt')).toBeInTheDocument();
       expect(screen.getByTestId('mock-renderer')).toBeInTheDocument();
@@ -50,7 +48,7 @@ describe('FileRenderer', () => {
       };
       jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
 
-      render(<FileRenderer {...props} />);
+      renderWithIntl(<FileRenderer {...props} />);
 
       expect(screen.getByText('filename.txt')).toBeInTheDocument();
       expect(screen.getByText('Error Message')).toBeInTheDocument();
@@ -68,7 +66,7 @@ describe('FileRenderer', () => {
       };
       jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
 
-      render(<FileRenderer {...props} />);
+      renderWithIntl(<FileRenderer {...props} />);
 
       expect(screen.getByText('filename.txt')).toBeInTheDocument();
       expect(screen.getByTestId('mock-renderer')).toBeInTheDocument();

src/components/Head/index.test.jsx

@@ -27,9 +27,6 @@ jest.mock('@edx/frontend-platform', () => ({
   }),
 }));
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('Head', () => {
   it('should render page title with site name from config', () => {
     const { container } = render(<Head />);

src/components/InfoPopover/index.test.jsx

@@ -1,26 +1,24 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { renderWithIntl } from '../../testUtils';
 import { InfoPopover } from '.';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('Info Popover Component', () => {
   const child = <div>Children component</div>;
   const onClick = jest.fn().mockName('this.props.onClick');
 
   describe('Component', () => {
     it('renders the help icon button', () => {
-      const { getByTestId } = render(
+      renderWithIntl(
         <InfoPopover onClick={onClick}>
           {child}
         </InfoPopover>,
       );
-      expect(getByTestId('esg-help-icon')).toBeInTheDocument();
+      expect(screen.getByTestId('esg-help-icon')).toBeInTheDocument();
     });
 
     it('calls onClick when the help icon is clicked', async () => {
-      render(
+      renderWithIntl(
         <InfoPopover onClick={onClick}>
           {child}
         </InfoPopover>,

src/components/StatusBadge.test.jsx

@@ -1,36 +1,35 @@
-import { render } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { gradingStatuses } from 'data/services/lms/constants';
+import messages from '../data/services/lms/messages';
+import { renderWithIntl } from '../testUtils';
 import { StatusBadge } from './StatusBadge';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 const className = 'test-className';
 describe('StatusBadge component', () => {
   describe('behavior', () => {
     it('does not render if status does not have configured variant', () => {
-      const { container } = render(<StatusBadge className={className} status="arbitrary" />);
+      const { container } = renderWithIntl(<StatusBadge className={className} status="arbitrary" />);
       expect(container.firstChild).toBeNull();
     });
     describe('status rendering: loads badge with configured variant and message', () => {
       it('`ungraded` shows primary button variant and message', () => {
-        const { getByText } = render(<StatusBadge className={className} status={gradingStatuses.ungraded} />);
+        renderWithIntl(<StatusBadge className={className} status={gradingStatuses.ungraded} />);
-        const badge = getByText('FormattedMessage');
+        const badge = screen.getByText(messages.ungraded.defaultMessage);
         expect(badge).toHaveClass('badge-primary');
       });
       it('`locked` shows light button variant and message', () => {
-        const { getByText } = render(<StatusBadge className={className} status={gradingStatuses.locked} />);
+        renderWithIntl(<StatusBadge className={className} status={gradingStatuses.locked} />);
-        const badge = getByText('FormattedMessage');
+        const badge = screen.getByText(messages.locked.defaultMessage);
         expect(badge).toHaveClass('badge-light');
       });
       it('`graded` shows success button variant and message', () => {
-        const { getByText } = render(<StatusBadge className={className} status={gradingStatuses.graded} />);
+        renderWithIntl(<StatusBadge className={className} status={gradingStatuses.graded} />);
-        const badge = getByText('FormattedMessage');
+        const badge = screen.getByText(messages.graded.defaultMessage);
         expect(badge).toHaveClass('badge-success');
       });
       it('`inProgress` shows warning button variant and message', () => {
-        const { getByText } = render(<StatusBadge className={className} status={gradingStatuses.inProgress} />);
+        renderWithIntl(<StatusBadge className={className} status={gradingStatuses.inProgress} />);
-        const badge = getByText('FormattedMessage');
+        const badge = screen.getByText(messages['in-progress'].defaultMessage);
         expect(badge).toHaveClass('badge-warning');
       });
     });

src/containers/CriterionContainer/CriterionFeedback.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { actions, selectors } from 'data/redux';
@@ -12,6 +12,7 @@ import {
   mapStateToProps,
   mapDispatchToProps,
 } from './CriterionFeedback';
+import { renderWithIntl } from '../../testUtils';
 
 jest.mock('data/redux/app/selectors', () => ({
   rubric: {
@@ -33,9 +34,6 @@ jest.mock('data/redux/grading/selectors', () => ({
   },
 }));
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('Criterion Feedback', () => {
   const props = {
     orderNum: 1,
@@ -50,7 +48,7 @@ describe('Criterion Feedback', () => {
   describe('component', () => {
     describe('render', () => {
       it('shows a non-disabled input when grading', () => {
-        render(<CriterionFeedback {...props} />);
+        renderWithIntl(<CriterionFeedback {...props} />);
         const input = screen.getByTestId('criterion-feedback-input');
         expect(input).toBeInTheDocument();
         expect(input).not.toBeDisabled();
@@ -58,7 +56,7 @@ describe('Criterion Feedback', () => {
       });
 
       it('shows a disabled input when not grading', () => {
-        render(
+        renderWithIntl(
           <CriterionFeedback {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />,
         );
         const input = screen.getByTestId('criterion-feedback-input');
@@ -68,12 +66,12 @@ describe('Criterion Feedback', () => {
       });
 
       it('displays an error message when feedback is invalid', () => {
-        render(<CriterionFeedback {...props} isInvalid />);
+        renderWithIntl(<CriterionFeedback {...props} isInvalid />);
         expect(screen.getByTestId('criterion-feedback-error-msg')).toBeInTheDocument();
       });
 
       it('does not render anything when config is set to disabled', () => {
-        const { container } = render(
+        const { container } = renderWithIntl(
           <CriterionFeedback {...props} config={feedbackRequirement.disabled} />,
         );
         expect(container.firstChild).toBeNull();
@@ -82,7 +80,7 @@ describe('Criterion Feedback', () => {
 
     describe('behavior', () => {
       it('calls setValue when input value changes', async () => {
-        render(<CriterionFeedback {...props} />);
+        renderWithIntl(<CriterionFeedback {...props} />);
         const user = userEvent.setup();
         const input = screen.getByTestId('criterion-feedback-input');
         await user.clear(input);

src/containers/CriterionContainer/RadioCriterion.test.jsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 
 import { actions, selectors } from 'data/redux';
 import {
@@ -6,6 +6,7 @@ import {
   mapDispatchToProps,
   mapStateToProps,
 } from './RadioCriterion';
+import { renderWithIntl } from '../../testUtils';
 
 jest.mock('data/redux/app/selectors', () => ({
   rubric: {
@@ -27,9 +28,6 @@ jest.mock('data/redux/grading/selectors', () => ({
   },
 }));
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('Radio Criterion Container', () => {
   const props = {
     orderNum: 1,
@@ -62,7 +60,7 @@ describe('Radio Criterion Container', () => {
 
   describe('component rendering', () => {
     it('should render radio buttons that are enabled when in grading mode', () => {
-      const { container } = render(<RadioCriterion {...props} />);
+      const { container } = renderWithIntl(<RadioCriterion {...props} />);
 
       const radioButtons = container.querySelectorAll('input[type="radio"]');
       expect(radioButtons.length).toEqual(props.config.options.length);
@@ -73,9 +71,9 @@ describe('Radio Criterion Container', () => {
     });
 
     it('should render radio buttons that are disabled when not in grading mode', () => {
-      const { container } = render(<RadioCriterion {...props} isGrading={false} />);
+      renderWithIntl(<RadioCriterion {...props} isGrading={false} />);
 
-      const radioButtons = container.querySelectorAll('input[type="radio"]');
+      const radioButtons = screen.queryAllByRole('radio');
       expect(radioButtons.length).toEqual(props.config.options.length);
 
       radioButtons.forEach(button => {
@@ -84,14 +82,14 @@ describe('Radio Criterion Container', () => {
     });
 
     it('should render an error message when the criterion is invalid', () => {
-      const { container } = render(<RadioCriterion {...props} isInvalid />);
+      const { container } = renderWithIntl(<RadioCriterion {...props} isInvalid />);
 
       const errorMessage = container.querySelector('.feedback-error-msg');
       expect(errorMessage).toBeInTheDocument();
     });
 
     it('should not render an error message when the criterion is valid', () => {
-      const { container } = render(<RadioCriterion {...props} />);
+      const { container } = renderWithIntl(<RadioCriterion {...props} />);
 
       const errorMessage = container.querySelector('.feedback-error-msg');
       expect(errorMessage).not.toBeInTheDocument();

src/containers/CriterionContainer/ReviewCriterion.test.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 
 import { selectors } from 'data/redux';
+import { renderWithIntl } from '../../testUtils';
 import { ReviewCriterion, mapStateToProps } from './ReviewCriterion';
 
 jest.mock('data/redux/app/selectors', () => ({
@@ -19,9 +20,6 @@ jest.mock('data/redux/grading/selectors', () => ({
   },
 }));
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('Review Criterion Container', () => {
   const props = {
     orderNum: 1,
@@ -54,9 +52,9 @@ describe('Review Criterion Container', () => {
 
   describe('component', () => {
     it('renders all criteria options with correct labels and points', () => {
-      const { getAllByTestId } = render(<ReviewCriterion {...props} />);
+      renderWithIntl(<ReviewCriterion {...props} />);
 
-      const optionsElements = getAllByTestId('criteria-option');
+      const optionsElements = screen.getAllByTestId('criteria-option');
       expect(optionsElements.length).toEqual(props.config.options.length);
 
       props.config.options.forEach((option, index) => {
@@ -65,7 +63,7 @@ describe('Review Criterion Container', () => {
         const pointsElement = optionElement.querySelector('[data-testid="option-points"]');
 
         expect(labelElement.textContent).toEqual(option.label);
-        expect(pointsElement.textContent).toEqual('FormattedMessage');
+        expect(pointsElement.textContent).toEqual(`${props.config.options[index].points} points`);
       });
     });
   });

src/containers/CriterionContainer/index.test.jsx

@@ -6,9 +6,6 @@ import { gradeStatuses } from 'data/services/lms/constants';
 
 import { CriterionContainer, mapStateToProps } from '.';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 const MockRadioCriterion = ({ orderNum, isGrading }) => (
   <div data-testid="radio-criterion-component">
     RadioCriterion Component (orderNum={orderNum}, isGrading={String(isGrading)})

src/containers/DemoWarning/DemoWarning.test.jsx

@@ -4,10 +4,6 @@ import { selectors } from 'data/redux';
 import { DemoWarning, mapStateToProps } from '.';
 import messages from './messages';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('data/redux', () => ({
   selectors: {
     app: { isEnabled: (args) => ({ isEnabled: args }) },

src/containers/ListView/EmptySubmission.test.jsx

@@ -1,12 +1,8 @@
-import { render } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import urls from 'data/services/lms/urls';
+import { renderWithIntl } from '../../testUtils';
 import EmptySubmission from './EmptySubmission';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('data/services/lms/urls', () => ({
   openResponse: (courseId) => `openResponseUrl(${courseId})`,
 }));
@@ -16,25 +12,19 @@ jest.mock('./assets/empty-state.svg', () => './assets/empty-state.svg');
 describe('EmptySubmission component', () => {
   const props = { courseId: 'test-course-id' };
 
-  const renderWithIntl = (component) => render(
-    <IntlProvider locale="en" messages={{}}>
-      {component}
-    </IntlProvider>,
-  );
-
   it('renders the empty state image with correct alt text', () => {
-    const { getByAltText } = renderWithIntl(<EmptySubmission {...props} />);
+    renderWithIntl(<EmptySubmission {...props} />);
-    expect(getByAltText('empty state')).toBeInTheDocument();
+    expect(screen.getByAltText('empty state')).toBeInTheDocument();
   });
 
   it('renders the no results found title message', () => {
-    const { getByText } = renderWithIntl(<EmptySubmission {...props} />);
+    renderWithIntl(<EmptySubmission {...props} />);
-    expect(getByText('Nothing here yet')).toBeInTheDocument();
+    expect(screen.getByText('Nothing here yet')).toBeInTheDocument();
   });
 
   it('renders hyperlink with correct destination URL', () => {
-    const { container } = renderWithIntl(<EmptySubmission {...props} />);
+    renderWithIntl(<EmptySubmission {...props} />);
-    const hyperlink = container.querySelector('a');
+    const hyperlink = screen.getByRole('link');
     expect(hyperlink).toHaveAttribute(
       'href',
       urls.openResponse(props.courseId),
@@ -42,7 +32,7 @@ describe('EmptySubmission component', () => {
   });
 
   it('renders the back to responses button', () => {
-    const { getByText } = renderWithIntl(<EmptySubmission {...props} />);
+    renderWithIntl(<EmptySubmission {...props} />);
-    expect(getByText('Back to all open responses')).toBeInTheDocument();
+    expect(screen.getByText('Back to all open responses')).toBeInTheDocument();
   });
 });

src/containers/ListView/FilterStatusComponent.test.jsx

@@ -5,9 +5,6 @@ import { DataTableContext } from '@openedx/paragon';
 
 import * as module from './FilterStatusComponent';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 const fieldIds = ['field-id-0', 'field-id-1', 'field-id-2', 'field-id-3'];
 const filterOrder = [1, 0, 3, 2];
 const filters = filterOrder.map((v) => ({ id: fieldIds[v] }));

src/containers/ListView/ListError.test.jsx

@@ -1,14 +1,10 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { selectors, thunkActions } from 'data/redux';
+import { renderWithIntl } from '../../testUtils';
 import { ListError, mapDispatchToProps, mapStateToProps } from './ListError';
 import messages from './messages';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('data/redux', () => ({
   selectors: {
     app: {
@@ -38,28 +34,28 @@ describe('ListError component', () => {
 
   describe('behavior', () => {
     it('renders error alert with proper styling', () => {
-      render(<IntlProvider locale="en" messages={{}}><ListError {...props} /></IntlProvider>);
+      renderWithIntl(<ListError {...props} />);
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
       expect(alert).toHaveClass('alert-danger');
     });
 
     it('displays error heading and message', () => {
-      render(<IntlProvider locale="en" messages={{}}><ListError {...props} /></IntlProvider>);
+      renderWithIntl(<ListError {...props} />);
       const heading = screen.getByRole('alert').querySelector('.alert-heading');
       expect(heading).toBeInTheDocument();
       expect(heading).toHaveTextContent(messages.loadErrorHeading.defaultMessage);
     });
 
     it('displays try again button', () => {
-      render(<IntlProvider locale="en" messages={{}}><ListError {...props} /></IntlProvider>);
+      renderWithIntl(<ListError {...props} />);
       const button = screen.getByRole('button');
       expect(button).toBeInTheDocument();
       expect(button).toHaveClass('btn-primary');
     });
 
     it('calls initializeApp when try again button is clicked', async () => {
-      render(<IntlProvider locale="en" messages={{}}><ListError {...props} /></IntlProvider>);
+      renderWithIntl(<ListError {...props} />);
       const user = userEvent.setup();
       const button = screen.getByRole('button');
       await user.click(button);

src/containers/ListView/ListViewBreadcrumb.test.jsx

@@ -1,15 +1,11 @@
-import { render } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { selectors } from 'data/redux';
+import { renderWithIntl } from '../../testUtils';
 import {
   ListViewBreadcrumb,
   mapStateToProps,
 } from './ListViewBreadcrumb';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('data/redux', () => ({
   selectors: {
     app: {
@@ -36,41 +32,37 @@ describe('ListViewBreadcrumb component', () => {
     oraName: 'fake-ora-name',
   };
 
-  const renderWithIntl = (component) => render(
-    <IntlProvider locale="en" messages={{}}>
-      {component}
-    </IntlProvider>,
-  );
-
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   describe('behavior', () => {
     it('renders back to responses link with correct destination', () => {
-      const { container } = renderWithIntl(<ListViewBreadcrumb {...props} />);
+      renderWithIntl(<ListViewBreadcrumb {...props} />);
-      const backLink = container.querySelector('a[href*="openResponseUrl"]');
+      const backLink = screen.getAllByRole('link').find(
+        link => link.getAttribute('href') === `openResponseUrl(${props.courseId})`,
+      );
       expect(backLink).toBeInTheDocument();
-      expect(backLink).toHaveAttribute('href', `openResponseUrl(${props.courseId})`);
     });
 
     it('displays ORA name in heading', () => {
-      const { getByText } = renderWithIntl(<ListViewBreadcrumb {...props} />);
+      renderWithIntl(<ListViewBreadcrumb {...props} />);
-      const heading = getByText(props.oraName);
+      const heading = screen.getByText(props.oraName);
       expect(heading).toBeInTheDocument();
       expect(heading).toHaveClass('h3');
     });
 
     it('renders ORA link with correct destination', () => {
-      const { container } = renderWithIntl(<ListViewBreadcrumb {...props} />);
+      renderWithIntl(<ListViewBreadcrumb {...props} />);
-      const oraLink = container.querySelector('a[href*="oraUrl"]');
+      const oraLink = screen.getAllByRole('link').find(
+        link => link.getAttribute('href') === `oraUrl(${props.courseId}, test-location-id)`,
+      );
       expect(oraLink).toBeInTheDocument();
-      expect(oraLink).toHaveAttribute('href', `oraUrl(${props.courseId}, test-location-id)`);
     });
 
     it('displays back to responses text', () => {
-      const { getByText } = renderWithIntl(<ListViewBreadcrumb {...props} />);
+      renderWithIntl(<ListViewBreadcrumb {...props} />);
-      expect(getByText('Back to all open responses')).toBeInTheDocument();
+      expect(screen.getByText('Back to all open responses')).toBeInTheDocument();
     });
   });
 

src/containers/ListView/SelectedBulkAction.test.jsx

@@ -1,11 +1,7 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { renderWithIntl } from '../../testUtils';
 import { SelectedBulkAction } from './SelectedBulkAction';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 describe('SelectedBulkAction component', () => {
   const props = {
     selectedFlatRows: [{ id: 1 }, { id: 2 }],
@@ -17,21 +13,21 @@ describe('SelectedBulkAction component', () => {
   });
 
   it('renders button with correct text and selected count', () => {
-    render(<IntlProvider locale="en" messages={{}}><SelectedBulkAction {...props} /></IntlProvider>);
+    renderWithIntl(<SelectedBulkAction {...props} />);
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent(`View selected responses (${props.selectedFlatRows.length})`);
   });
 
   it('applies correct CSS class to button', () => {
-    render(<IntlProvider locale="en" messages={{}}><SelectedBulkAction {...props} /></IntlProvider>);
+    renderWithIntl(<SelectedBulkAction {...props} />);
     const button = screen.getByRole('button');
     expect(button).toHaveClass('view-selected-responses-btn');
     expect(button).toHaveClass('btn-primary');
   });
 
   it('calls handleClick with selectedFlatRows on render', () => {
-    render(<IntlProvider locale="en" messages={{}}><SelectedBulkAction {...props} /></IntlProvider>);
+    renderWithIntl(<SelectedBulkAction {...props} />);
     expect(props.handleClick).toHaveBeenCalledWith(props.selectedFlatRows);
   });
 });

src/containers/ListView/SubmissionsTable.test.jsx

@@ -1,17 +1,13 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { selectors, thunkActions } from 'data/redux';
 import { gradingStatuses as statuses } from 'data/services/lms/constants';
+import { renderWithIntl } from '../../testUtils';
 import {
   SubmissionsTable,
   mapStateToProps,
   mapDispatchToProps,
 } from './SubmissionsTable';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('data/redux', () => ({
   selectors: {
     app: {
@@ -91,20 +87,14 @@ describe('SubmissionsTable component', () => {
     loadSelectionForReview: jest.fn(),
   };
 
-  const renderWithIntl = (component) => render(
-    <IntlProvider locale="en" messages={{}}>
-      {component}
-    </IntlProvider>,
-  );
-
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   describe('behavior', () => {
     it('renders DataTable component', () => {
-      const { container } = renderWithIntl(<SubmissionsTable {...defaultProps} />);
+      renderWithIntl(<SubmissionsTable {...defaultProps} />);
-      const submissionsTable = container.querySelector('.submissions-table');
+      const submissionsTable = screen.getByRole('table');
       expect(submissionsTable).toBeInTheDocument();
     });
 

src/containers/ListView/TableAction.test.jsx

@@ -1,12 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { renderWithIntl } from '../../testUtils';
 import { TableAction } from './TableAction';
 import messages from './messages';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 describe('TableAction component', () => {
   const props = {
     tableInstance: { rows: [{ id: 1 }, { id: 2 }] },
@@ -18,21 +14,21 @@ describe('TableAction component', () => {
   });
 
   it('renders button with correct text', () => {
-    render(<IntlProvider locale="en" messages={{}}><TableAction {...props} /></IntlProvider>);
+    renderWithIntl(<TableAction {...props} />);
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent(messages.viewAllResponses.defaultMessage);
   });
 
   it('applies correct CSS class to button', () => {
-    render(<IntlProvider locale="en" messages={{}}><TableAction {...props} /></IntlProvider>);
+    renderWithIntl(<TableAction {...props} />);
     const button = screen.getByRole('button');
     expect(button).toHaveClass('view-all-responses-btn');
     expect(button).toHaveClass('btn-primary');
   });
 
   it('enables button when rows are present', () => {
-    render(<IntlProvider locale="en" messages={{}}><TableAction {...props} /></IntlProvider>);
+    renderWithIntl(<TableAction {...props} />);
     const button = screen.getByRole('button');
     expect(button).not.toBeDisabled();
   });
@@ -42,13 +38,13 @@ describe('TableAction component', () => {
       tableInstance: { rows: [] },
       handleClick: jest.fn(() => () => {}),
     };
-    render(<IntlProvider locale="en" messages={{}}><TableAction {...emptyProps} /></IntlProvider>);
+    renderWithIntl(<TableAction {...emptyProps} />);
     const button = screen.getByRole('button');
     expect(button).toBeDisabled();
   });
 
   it('calls handleClick with table rows on render', () => {
-    render(<IntlProvider locale="en" messages={{}}><TableAction {...props} /></IntlProvider>);
+    renderWithIntl(<TableAction {...props} />);
     expect(props.handleClick).toHaveBeenCalledWith(props.tableInstance.rows);
   });
 });

src/containers/ListView/index.test.jsx

@@ -1,18 +1,14 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { selectors, thunkActions } from 'data/redux';
 import { RequestKeys } from 'data/constants/requests';
 
 import { formatMessage } from 'testUtils';
+import { renderWithIntl } from '../../testUtils';
 import { ListView, mapStateToProps, mapDispatchToProps } from '.';
 import messages from './messages';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('containers/ReviewModal', () => {
   const ReviewModal = () => <div data-testid="review-modal">ReviewModal</div>;
   return ReviewModal;
@@ -108,7 +104,7 @@ describe('ListView component', () => {
     });
 
     it('displays loading spinner and message when not loaded and no error', () => {
-      render(<IntlProvider locale="en" messages={{}}><ListView {...props} /></IntlProvider>);
+      renderWithIntl(<ListView {...props} />);
 
       // Check for loading message
       expect(screen.getByText(messages.loadingResponses.defaultMessage)).toBeInTheDocument();
@@ -119,7 +115,7 @@ describe('ListView component', () => {
     });
 
     it('displays ListViewBreadcrumb and SubmissionsTable when loaded with data', () => {
-      render(<IntlProvider locale="en" messages={{}}><ListView {...props} isLoaded /></IntlProvider>);
+      renderWithIntl(<ListView {...props} isLoaded />);
 
       expect(
         screen.getByText('Back to all open responses'),
@@ -129,7 +125,7 @@ describe('ListView component', () => {
     });
 
     it('displays EmptySubmission component when loaded but has no submission data', () => {
-      render(<IntlProvider locale="en" messages={{}}><ListView {...props} isLoaded isEmptySubmissionData /></IntlProvider>);
+      renderWithIntl(<ListView {...props} isLoaded isEmptySubmissionData />);
 
       expect(
         screen.getByRole('heading', { name: 'Nothing here yet' }),
@@ -146,7 +142,7 @@ describe('ListView component', () => {
     });
 
     it('displays ListError component when there is an error', () => {
-      render(<IntlProvider locale="en" messages={{}}><ListView {...props} hasError /></IntlProvider>);
+      renderWithIntl(<ListView {...props} hasError />);
 
       expect(
         screen.getByRole('button', { name: 'Reload submissions' }),
@@ -155,18 +151,18 @@ describe('ListView component', () => {
     });
 
     it('always displays ReviewModal component regardless of state', () => {
-      const { rerender } = render(<IntlProvider locale="en" messages={{}}><ListView {...props} /></IntlProvider>);
+      const { rerender } = renderWithIntl(<ListView {...props} />);
       expect(screen.getByText('ReviewModal')).toBeInTheDocument();
 
-      rerender(<IntlProvider locale="en" messages={{}}><ListView {...props} isLoaded /></IntlProvider>);
+      rerender(<ListView {...props} isLoaded />);
       expect(screen.getByText('ReviewModal')).toBeInTheDocument();
 
-      rerender(<IntlProvider locale="en" messages={{}}><ListView {...props} hasError /></IntlProvider>);
+      rerender(<ListView {...props} hasError />);
       expect(screen.getByText('ReviewModal')).toBeInTheDocument();
     });
 
     it('calls initializeApp on component mount', () => {
-      render(<IntlProvider locale="en" messages={{}}><ListView {...props} /></IntlProvider>);
+      renderWithIntl(<ListView {...props} />);
       expect(props.initializeApp).toHaveBeenCalledTimes(1);
     });
   });

src/containers/ResponseDisplay/FileDownload.test.jsx

@@ -1,6 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { RequestKeys, RequestStates } from 'data/constants/requests';
 import { selectors, thunkActions } from 'data/redux';
 import {
@@ -10,10 +9,7 @@ import {
   statusMapping,
 } from './FileDownload';
 import messages from './messages';
-
+import { renderWithIntl } from '../../testUtils';
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
 
 jest.mock('data/redux', () => ({
   selectors: {
@@ -36,7 +32,7 @@ describe('FileDownload', () => {
 
   describe('behavior', () => {
     it('renders StatefulButton with default state when inactive', () => {
-      render(<IntlProvider locale="en" messages={{}}><FileDownload {...defaultProps} /></IntlProvider>);
+      renderWithIntl(<FileDownload {...defaultProps} />);
       const button = screen.getByRole('button');
       expect(button).toBeInTheDocument();
       expect(button).toHaveTextContent(messages.downloadFiles.defaultMessage);
@@ -44,9 +40,8 @@ describe('FileDownload', () => {
 
     it('renders with pending state when download is pending', () => {
       const props = { ...defaultProps, requestStatus: { status: RequestStates.pending } };
-      render(<IntlProvider locale="en" messages={{}}><FileDownload {...props} /></IntlProvider>);
+      renderWithIntl(<FileDownload {...props} />);
       const button = screen.getByRole('button');
-      screen.debug();
       expect(button).toHaveClass('pgn__stateful-btn-state-pending');
       expect(button).toHaveAttribute('aria-disabled', 'true');
       expect(button).toHaveTextContent(messages.downloading.defaultMessage);
@@ -54,14 +49,14 @@ describe('FileDownload', () => {
 
     it('renders with completed state when download is completed', () => {
       const props = { ...defaultProps, requestStatus: { status: RequestStates.completed } };
-      render(<IntlProvider locale="en" messages={{}}><FileDownload {...props} /></IntlProvider>);
+      renderWithIntl(<FileDownload {...props} />);
       const button = screen.getByRole('button');
       expect(button).toHaveClass('pgn__stateful-btn-state-completed');
     });
 
     it('renders with failed state when download fails', () => {
       const props = { ...defaultProps, requestStatus: { status: RequestStates.failed } };
-      render(<IntlProvider locale="en" messages={{}}><FileDownload {...props} /></IntlProvider>);
+      renderWithIntl(<FileDownload {...props} />);
       const button = screen.getByRole('button');
       expect(button).toBeInTheDocument();
       expect(button).toHaveClass('pgn__stateful-btn-state-failed');
@@ -69,7 +64,7 @@ describe('FileDownload', () => {
     });
 
     it('calls downloadFiles when button is clicked', async () => {
-      render(<IntlProvider locale="en" messages={{}}><FileDownload {...defaultProps} /></IntlProvider>);
+      renderWithIntl(<FileDownload {...defaultProps} />);
       const user = userEvent.setup();
       const button = screen.getByRole('button');
       await user.click(button);

src/containers/ResponseDisplay/PreviewDisplay.test.jsx

@@ -1,12 +1,8 @@
-import { render } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { FileTypes } from 'data/constants/files';
+import { renderWithIntl } from '../../testUtils';
 import { PreviewDisplay } from './PreviewDisplay';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 describe('PreviewDisplay', () => {
   const supportedTypes = Object.values(FileTypes);
   const props = {
@@ -24,32 +20,26 @@ describe('PreviewDisplay', () => {
     ],
   };
 
-  const renderWithIntl = (component) => render(
-    <IntlProvider locale="en" messages={{}}>
-      {component}
-    </IntlProvider>,
-  );
-
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders preview display container', () => {
-    const { container } = renderWithIntl(<PreviewDisplay {...props} />);
+    renderWithIntl(<PreviewDisplay {...props} />);
-    const previewDisplay = container.querySelector('.preview-display');
+    const previewDisplay = screen.getByRole('button', { name: 'fake_file_0.pdf' });
     expect(previewDisplay).toBeInTheDocument();
   });
 
   it('renders empty container when no files provided', () => {
-    const { container } = renderWithIntl(<PreviewDisplay files={[]} />);
+    renderWithIntl(<PreviewDisplay files={[]} />);
-    const previewDisplay = container.querySelector('.preview-display');
+    const previewDisplay = document.querySelector('.preview-display');
     expect(previewDisplay).toBeInTheDocument();
     expect(previewDisplay.children.length).toBe(0);
   });
 
   it('only renders supported file types', () => {
-    const { container } = renderWithIntl(<PreviewDisplay {...props} />);
+    renderWithIntl(<PreviewDisplay {...props} />);
-    const previewDisplay = container.querySelector('.preview-display');
+    const previewDisplay = document.querySelector('.preview-display');
     expect(previewDisplay.children.length).toBe(supportedTypes.length);
   });
 
@@ -59,8 +49,8 @@ describe('PreviewDisplay', () => {
       description: 'unsupported file',
       downloadUrl: '/unsupported.xyz',
     };
-    const { container } = renderWithIntl(<PreviewDisplay files={[unsupportedFile]} />);
+    renderWithIntl(<PreviewDisplay files={[unsupportedFile]} />);
-    const previewDisplay = container.querySelector('.preview-display');
+    const previewDisplay = document.querySelector('.preview-display');
     expect(previewDisplay.children.length).toBe(0);
   });
 });

src/containers/ResponseDisplay/SubmissionFiles.test.jsx

@@ -1,12 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { downloadAllLimit, downloadSingleLimit } from 'data/constants/files';
+import { renderWithIntl } from '../../testUtils';
 import { SubmissionFiles } from './SubmissionFiles';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('./components/FileNameCell', () => jest.fn(({ value }) => <div>Name: {value}</div>));
 jest.mock('./components/FileExtensionCell', () => jest.fn(({ value }) => <div>Extension: {value}</div>));
 jest.mock('./components/FilePopoverCell', () => jest.fn(() => <div>Popover</div>));
@@ -30,12 +26,6 @@ describe('SubmissionFiles', () => {
     ],
   };
 
-  const renderWithIntl = (component) => render(
-    <IntlProvider locale="en" messages={{}}>
-      {component}
-    </IntlProvider>,
-  );
-
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -88,8 +78,8 @@ describe('SubmissionFiles', () => {
     });
 
     it('displays title only when no files are provided', () => {
-      const { container } = renderWithIntl(<SubmissionFiles {...defaultProps} files={[]} />);
+      renderWithIntl(<SubmissionFiles {...defaultProps} files={[]} />);
-      const title = container.querySelector('.submission-files-title h3');
+      const title = screen.getByRole('heading', { level: 3 });
       expect(title).toBeInTheDocument();
       expect(title).toHaveTextContent('Submission Files (0)');
       expect(screen.queryByTestId('file-download')).not.toBeInTheDocument();

src/containers/ResponseDisplay/components/FileExtensionCell.test.jsx

@@ -1,9 +1,6 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import FileExtensionCell from './FileExtensionCell';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('FileExtensionCell', () => {
   const props = {
     value: 'file_name.with_extension.pdf',
@@ -14,8 +11,8 @@ describe('FileExtensionCell', () => {
   });
 
   it('renders file extension in uppercase', () => {
-    const { getByText } = render(<FileExtensionCell {...props} />);
+    render(<FileExtensionCell {...props} />);
-    expect(getByText('PDF')).toBeInTheDocument();
+    expect(screen.getByText('PDF')).toBeInTheDocument();
   });
 
   it('applies correct CSS class', () => {
@@ -25,13 +22,13 @@ describe('FileExtensionCell', () => {
   });
 
   it('extracts extension from file with multiple dots', () => {
-    const { getByText } = render(<FileExtensionCell value="my.file.name.docx" />);
+    render(<FileExtensionCell value="my.file.name.docx" />);
-    expect(getByText('DOCX')).toBeInTheDocument();
+    expect(screen.getByText('DOCX')).toBeInTheDocument();
   });
 
   it('handles file without extension', () => {
-    const { getByText } = render(<FileExtensionCell value="filename" />);
+    render(<FileExtensionCell value="filename" />);
-    expect(getByText('FILENAME')).toBeInTheDocument();
+    expect(screen.getByText('FILENAME')).toBeInTheDocument();
   });
 
   it('handles empty file extension', () => {

src/containers/ResponseDisplay/components/FilePopoverCell.test.jsx

@@ -1,18 +1,8 @@
-import { render } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { renderWithIntl } from '../../../testUtils';
 
 import FilePopoverCell from './FilePopoverCell';
 
-const mockMessages = {
-  en: {},
-};
-
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en" messages={mockMessages}>
-    {component}
-  </IntlProvider>,
-);
-
 describe('FilePopoverCell', () => {
   const props = {
     row: {
@@ -25,20 +15,10 @@ describe('FilePopoverCell', () => {
     },
   };
 
-  it('renders the component without errors', () => {
+  it('renders info button has correct alt text', () => {
-    const { container } = renderWithIntl(<FilePopoverCell {...props} />);
+    renderWithIntl(<FilePopoverCell {...props} />);
-    expect(container.firstChild).toBeInTheDocument();
+    const button = screen.getByRole('button', { name: /display more info/i });
-  });
+    expect(button).toBeInTheDocument();
-
-  it('renders the info icon button', () => {
-    const { getByTestId } = renderWithIntl(<FilePopoverCell {...props} />);
-    expect(getByTestId('esg-help-icon')).toBeInTheDocument();
-  });
-
-  it('info button has correct alt text', () => {
-    const { getByTestId } = renderWithIntl(<FilePopoverCell {...props} />);
-    const button = getByTestId('esg-help-icon');
-    expect(button).toHaveAttribute('alt', 'Display more info');
   });
 
   it('handles empty row.original object', () => {

src/containers/ResponseDisplay/index.test.jsx

@@ -3,9 +3,6 @@ import { fileUploadResponseOptions } from 'data/services/lms/constants';
 import { selectors } from 'data/redux';
 import { ResponseDisplay, mapStateToProps } from '.';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 jest.mock('data/redux', () => ({
   selectors: {
     grading: {

src/containers/ReviewActions/components/OverrideGradeConfirmModal.test.jsx

@@ -1,17 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { renderWithIntl } from '../../../testUtils';
 import OverrideGradeConfirmModal from './OverrideGradeConfirmModal';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en">
-    {component}
-  </IntlProvider>,
-);
-
 describe('OverrideGradeConfirmModal', () => {
   const props = {
     isOpen: false,
@@ -24,14 +15,14 @@ describe('OverrideGradeConfirmModal', () => {
   });
 
   it('should not render content when modal is closed', () => {
-    const { queryByText } = renderWithIntl(<OverrideGradeConfirmModal {...props} />);
+    renderWithIntl(<OverrideGradeConfirmModal {...props} />);
-    expect(queryByText('This cannot be undone')).toBeNull();
+    expect(screen.queryByText('This cannot be undone')).toBeNull();
   });
 
   it('should display content when modal is open', () => {
-    const { getByText } = renderWithIntl(<OverrideGradeConfirmModal {...props} isOpen />);
+    renderWithIntl(<OverrideGradeConfirmModal {...props} isOpen />);
-    expect(getByText('Are you sure you want to override this grade?')).toBeInTheDocument();
+    expect(screen.getByText('Are you sure you want to override this grade?')).toBeInTheDocument();
-    expect(getByText(/This cannot be undone.*The learner may have already received their grade/)).toBeInTheDocument();
+    expect(screen.getByText(/This cannot be undone.*The learner may have already received their grade/)).toBeInTheDocument();
   });
 
   it('should call onCancel when cancel button is clicked', async () => {

src/containers/ReviewActions/components/StartGradingButton/index.test.jsx

@@ -1,14 +1,10 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { useDispatch } from 'react-redux';
+import { renderWithIntl } from '../../../../testUtils';
 import * as hooks from './hooks';
 import { StartGradingButton } from '.';
 import messages from '../messages';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('react-redux', () => ({
   useDispatch: jest.fn(),
 }));
@@ -20,12 +16,6 @@ jest.mock('./hooks', () => ({
 describe('StartGradingButton', () => {
   const mockDispatch = jest.fn();
 
-  const renderWithIntl = (component) => render(
-    <IntlProvider locale="en" messages={{}}>
-      {component}
-    </IntlProvider>,
-  );
-
   beforeEach(() => {
     jest.clearAllMocks();
     useDispatch.mockReturnValue(mockDispatch);

src/containers/ReviewActions/components/StopGradingConfirmModal.test.jsx

@@ -1,17 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { renderWithIntl } from '../../../testUtils';
 import StopGradingConfirmModal from './StopGradingConfirmModal';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en">
-    {component}
-  </IntlProvider>,
-);
-
 describe('StopGradingConfirmModal', () => {
   const props = {
     isOpen: false,

src/containers/ReviewActions/components/SubmissionNavigation.test.jsx

@@ -1,30 +1,15 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { thunkActions } from 'data/redux';
+import { renderWithIntl } from '../../../testUtils';
 
 import {
   SubmissionNavigation,
   mapDispatchToProps,
 } from './SubmissionNavigation';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
-const mockMessages = {
-  'ora-grading.ReviewActions.loadPrevious': 'Load previous submission',
-  'ora-grading.ReviewActions.loadNext': 'Load next submission',
-  'ora-grading.ReviewActions.navigationLabel': '{current} of {total}',
-};
-
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en" messages={mockMessages}>
-    {component}
-  </IntlProvider>,
-);
-
 describe('SubmissionNavigation component', () => {
   describe('component', () => {
     const defaultProps = {
@@ -44,7 +29,7 @@ describe('SubmissionNavigation component', () => {
 
     it('renders navigation with current position and total submissions', () => {
       renderWithIntl(<SubmissionNavigation {...defaultProps} />);
-      expect(screen.getByText('FormattedMessage')).toBeInTheDocument();
+      expect(screen.getByText(`${defaultProps.activeIndex + 1} of ${defaultProps.selectionLength}`)).toBeInTheDocument();
     });
 
     it('disables previous button when no previous submission exists', () => {
@@ -90,10 +75,10 @@ describe('SubmissionNavigation component', () => {
     });
 
     it('shows correct position when at first submission', () => {
-      render(
+      renderWithIntl(
         <SubmissionNavigation {...defaultProps} activeIndex={0} hasPrevSubmission={false} />,
       );
-      expect(screen.getByText('FormattedMessage')).toBeInTheDocument();
+      expect(screen.getByText(`${1} of ${defaultProps.selectionLength}`)).toBeInTheDocument();
     });
   });
 

src/containers/ReviewActions/index.test.jsx

@@ -1,14 +1,10 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { actions, selectors } from 'data/redux';
 import { RequestKeys } from 'data/constants/requests';
+import { renderWithIntl } from '../../testUtils';
 import { ReviewActions, mapStateToProps, mapDispatchToProps } from '.';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('data/redux', () => ({
   actions: {
     app: {
@@ -65,12 +61,6 @@ jest.mock('./components/SubmissionNavigation', () => {
 });
 
 describe('ReviewActions component', () => {
-  const renderWithIntl = (component) => render(
-    <IntlProvider locale="en" messages={{}}>
-      {component}
-    </IntlProvider>,
-  );
-
   describe('component', () => {
     const props = {
       gradingStatus: 'ungraded',

src/containers/ReviewModal/ReviewContent.test.jsx

@@ -1,13 +1,9 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { renderWithIntl } from '../../testUtils';
 import {
   ReviewContent,
 } from './ReviewContent';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 // Since we are only testing the ReviewContent component,
 // we can mock the child components to avoid unnecessary complexity on mocking the redux store.
 jest.mock('containers/ReviewModal/ReviewErrors/FetchErrors', () => {
@@ -50,12 +46,6 @@ jest.mock('data/redux', () => ({
 }));
 
 describe('ReviewContent component', () => {
-  const renderWithIntl = (component) => render(
-    <IntlProvider locale="en" messages={{}}>
-      {component}
-    </IntlProvider>,
-  );
-
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -80,10 +70,10 @@ describe('ReviewContent component', () => {
     });
 
     it('renders with rubric when showRubric is true and loaded', () => {
-      const { container, getByText } = renderWithIntl(<ReviewContent isLoaded showRubric />);
+      const { container } = renderWithIntl(<ReviewContent isLoaded showRubric />);
       expect(container.querySelector('.content-block')).toBeInTheDocument();
       expect(container.querySelector('.flex-nowrap')).toBeInTheDocument();
-      expect(getByText('Rubric')).toBeInTheDocument();
+      expect(screen.getByText('Rubric')).toBeInTheDocument();
     });
   });
 });

src/containers/ReviewModal/ReviewErrors/DownloadErrors.test.jsx

@@ -1,14 +1,10 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { selectors, actions, thunkActions } from 'data/redux';
 import { RequestKeys } from 'data/constants/requests';
+import { renderWithIntl } from '../../../testUtils';
 import { DownloadErrors, mapStateToProps, mapDispatchToProps } from './DownloadErrors';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('data/redux', () => ({
   selectors: {
     requests: {
@@ -24,12 +20,6 @@ jest.mock('data/redux', () => ({
   },
 }));
 
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en" messages={{}}>
-    {component}
-  </IntlProvider>,
-);
-
 describe('DownloadErrors component', () => {
   const defaultProps = {
     isFailed: false,

src/containers/ReviewModal/ReviewErrors/FetchErrors.test.jsx

@@ -1,20 +1,15 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { selectors, thunkActions } from 'data/redux';
 import { RequestKeys } from 'data/constants/requests';
-
+import { renderWithIntl } from '../../../testUtils';
 import {
   FetchErrors,
   mapStateToProps,
   mapDispatchToProps,
 } from './FetchErrors';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('data/redux', () => ({
   selectors: {
     requests: {
@@ -30,12 +25,6 @@ jest.mock('data/redux', () => ({
 
 const requestKey = RequestKeys.fetchSubmission;
 
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en" messages={{}}>
-    {component}
-  </IntlProvider>,
-);
-
 describe('FetchErrors component', () => {
   const props = {
     isFailed: false,

src/containers/ReviewModal/ReviewErrors/LockErrors.test.jsx

@@ -1,20 +1,15 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { selectors } from 'data/redux';
 import { ErrorStatuses, RequestKeys } from 'data/constants/requests';
 
+import { renderWithIntl } from '../../../testUtils';
 import {
   LockErrors,
   mapStateToProps,
 } from './LockErrors';
 
-jest.unmock('react');
-jest.unmock('@openedx/paragon');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('data/redux', () => ({
   selectors: {
     requests: {
@@ -24,12 +19,6 @@ jest.mock('data/redux', () => ({
   },
 }));
 
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en">
-    {component}
-  </IntlProvider>,
-);
-
 describe('LockErrors component', () => {
   describe('when not failed', () => {
     it('renders nothing when isFailed is false', () => {

src/containers/ReviewModal/ReviewErrors/ReviewError.test.jsx

@@ -1,18 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { renderWithIntl } from '../../../testUtils';
 import ReviewError from './ReviewError';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en" messages={{}}>
-    {component}
-  </IntlProvider>,
-);
-
 describe('ReviewError component', () => {
   const messages = {
     heading: {

src/containers/ReviewModal/ReviewErrors/SubmitErrors/index.test.jsx

@@ -1,14 +1,10 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 
+import { renderWithIntl } from '../../../../testUtils';
 import * as hooks from './hooks';
 import { SubmitErrors } from '.';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('react-redux', () => ({
   useDispatch: jest.fn(() => jest.fn()),
 }));
@@ -17,12 +13,6 @@ jest.mock('./hooks', () => ({
   rendererHooks: jest.fn(() => ({ show: false })),
 }));
 
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en" messages={{}}>
-    {component}
-  </IntlProvider>,
-);
-
 describe('SubmitErrors component', () => {
   beforeEach(() => {
     jest.clearAllMocks();

src/containers/ReviewModal/ReviewErrors/index.test.jsx

@@ -1,11 +1,6 @@
-import { render } from '@testing-library/react';
+import { renderWithIntl } from '../../../testUtils';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { ReviewErrors } from '.';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('react-redux', () => ({
   useDispatch: jest.fn(() => jest.fn()),
   useSelector: jest.fn((selector) => selector({
@@ -63,12 +58,6 @@ jest.mock('data/redux', () => ({
   },
 }));
 
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en" messages={{}}>
-    {component}
-  </IntlProvider>,
-);
-
 describe('ReviewErrors component', () => {
   it('renders without errors', () => {
     const { container } = renderWithIntl(<ReviewErrors />);

src/containers/ReviewModal/components/CloseReviewConfirmModal.test.jsx

@@ -1,18 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { renderWithIntl } from '../../../testUtils';
 import CloseReviewConfirmModal from './CloseReviewConfirmModal';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en" messages={{}}>
-    {component}
-  </IntlProvider>,
-);
-
 describe('CloseReviewConfirmModal', () => {
   const props = {
     isOpen: false,
@@ -25,14 +15,14 @@ describe('CloseReviewConfirmModal', () => {
   });
 
   it('should not render content when modal is closed', () => {
-    const { queryByText } = renderWithIntl(<CloseReviewConfirmModal {...props} />);
+    renderWithIntl(<CloseReviewConfirmModal {...props} />);
-    expect(queryByText('This cannot be undone')).toBeNull();
+    expect(screen.queryByText('This cannot be undone')).toBeNull();
   });
 
   it('should display content when modal is open', () => {
-    const { getByText } = renderWithIntl(<CloseReviewConfirmModal {...props} isOpen />);
+    renderWithIntl(<CloseReviewConfirmModal {...props} isOpen />);
-    expect(getByText('Are you sure you want to close this modal?')).toBeInTheDocument();
+    expect(screen.getByText('Are you sure you want to close this modal?')).toBeInTheDocument();
-    expect(getByText(/This cannot be undone.*This will discard unsaved work/)).toBeInTheDocument();
+    expect(screen.getByText(/This cannot be undone.*This will discard unsaved work/)).toBeInTheDocument();
   });
 
   it('should call onCancel when cancel button is clicked', async () => {

src/containers/ReviewModal/index.test.jsx

@@ -1,14 +1,10 @@
 import { useDispatch } from 'react-redux';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import * as hooks from './hooks';
 import { ReviewModal } from '.';
 import messages from './messages';
-
+import { renderWithIntl } from '../../testUtils';
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
 
 jest.mock('react-redux', () => ({
   useDispatch: jest.fn(),
@@ -59,7 +55,7 @@ describe('ReviewModal', () => {
       },
     });
 
-    render(<IntlProvider locale="en" messages={{}}><ReviewModal /></IntlProvider>);
+    renderWithIntl(<ReviewModal />);
 
     expect(hooks.rendererHooks).toHaveBeenCalledWith({
       dispatch: mockDispatch,
@@ -80,7 +76,7 @@ describe('ReviewModal', () => {
       },
     });
 
-    render(<IntlProvider locale="en" messages={{}}><ReviewModal /></IntlProvider>);
+    renderWithIntl(<ReviewModal />);
     expect(useDispatch).toHaveBeenCalled();
   });
 
@@ -97,7 +93,7 @@ describe('ReviewModal', () => {
       },
     });
 
-    render(<IntlProvider locale="en" messages={{}}><ReviewModal /></IntlProvider>);
+    renderWithIntl(<ReviewModal />);
     const reviewActions = screen.getByText('ReviewActions');
     expect(reviewActions).toBeInTheDocument();
 
@@ -124,7 +120,7 @@ describe('ReviewModal', () => {
       },
     });
 
-    render(<IntlProvider locale="en" messages={{}}><ReviewModal /></IntlProvider>);
+    renderWithIntl(<ReviewModal />);
     const loadingMessage = screen.getByText(messages.loadingResponse.defaultMessage);
     expect(loadingMessage).toBeInTheDocument();
   });

src/containers/Rubric/RubricFeedback.test.jsx

@@ -1,14 +1,10 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { actions, selectors } from 'data/redux';
 import { feedbackRequirement, gradeStatuses } from 'data/services/lms/constants';
+import { renderWithIntl } from '../../testUtils';
 import { RubricFeedback, mapDispatchToProps, mapStateToProps } from './RubricFeedback';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('data/redux', () => ({
   actions: {
     grading: { setRubricFeedback: jest.fn() },
@@ -32,12 +28,6 @@ jest.mock('data/redux', () => ({
   },
 }));
 
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en" messages={{}}>
-    {component}
-  </IntlProvider>,
-);
-
 describe('Rubric Feedback component', () => {
   const defaultProps = {
     config: 'config string',

src/containers/Rubric/index.test.jsx

@@ -1,12 +1,8 @@
-import { render } from '@testing-library/react';
+import { screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { renderWithIntl } from '../../testUtils';
 import { Rubric } from '.';
 import * as hooks from './hooks';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-jest.unmock('@edx/frontend-platform/i18n');
-
 jest.mock('react-redux', () => ({
   useDispatch: jest.fn(() => jest.fn()),
   connect: jest.fn((mapStateToProps, mapDispatchToProps) => (Component) => {
@@ -93,12 +89,6 @@ jest.mock('./hooks', () => ({
   ButtonStates: jest.requireActual('./hooks').ButtonStates,
 }));
 
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en" messages={{}}>
-    {component}
-  </IntlProvider>,
-);
-
 describe('Rubric Container', () => {
   const hookProps = {
     criteria: [
@@ -115,20 +105,20 @@ describe('Rubric Container', () => {
     hooks.rendererHooks.mockReturnValue(hookProps);
   });
 
-  it('renders rubric with footer when showFooter is true', () => {
+  it('renders rubric with submit button in footer when showFooter is true', () => {
     hooks.rendererHooks.mockReturnValueOnce({ ...hookProps, showFooter: true });
-    const { container } = renderWithIntl(<Rubric />);
+    renderWithIntl(<Rubric />);
-    const rubricCard = container.querySelector('.grading-rubric-card');
+    const rubricCardTitle = screen.getByRole('heading', { name: /rubric/i });
-    const footer = container.querySelector('.grading-rubric-footer');
+    const submitButton = screen.queryByRole('button', { name: /submit grade/i });
-    expect(rubricCard).toBeInTheDocument();
+    expect(rubricCardTitle).toBeInTheDocument();
-    expect(footer).toBeInTheDocument();
+    expect(submitButton).toBeInTheDocument();
   });
 
-  it('renders rubric without footer when showFooter is false', () => {
+  it('renders rubric without submit button on footer when showFooter is false', () => {
-    const { container } = renderWithIntl(<Rubric />);
+    renderWithIntl(<Rubric />);
-    const rubricCard = container.querySelector('.grading-rubric-card');
+    const rubricCardTitle = screen.getByRole('heading', { name: /rubric/i });
-    const footer = container.querySelector('.grading-rubric-footer');
+    const submitButton = screen.queryByRole('button', { name: /submit grade/i });
-    expect(rubricCard).toBeInTheDocument();
+    expect(rubricCardTitle).toBeInTheDocument();
-    expect(footer).not.toBeInTheDocument();
+    expect(submitButton).not.toBeInTheDocument();
   });
 });

src/index.test.jsx

@@ -65,16 +65,12 @@ describe('app registry', () => {
     const callArgs = subscribe.mock.calls[0];
     expect(callArgs[0]).toEqual(APP_READY);
     callArgs[1]();
-    const [rendered] = mockRender.mock.calls[0];
-    expect(rendered).toMatchSnapshot();
   });
   test('subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element', () => {
     const callArgs = subscribe.mock.calls[1];
     expect(callArgs[0]).toEqual(APP_INIT_ERROR);
     const error = { message: 'test-error-message' };
     callArgs[1](error);
-    const [rendered] = mockRender.mock.calls[0];
-    expect(rendered).toMatchSnapshot();
   });
   test('initialize is called with footerMessages and requireAuthenticatedUser', () => {
     expect(initialize).toHaveBeenCalledTimes(1);

src/setupTest.js

@@ -1,111 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import '@testing-library/jest-dom';
-// breaking change here: https://github.com/testing-library/jest-dom/releases/tag/v6.0.0
-
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useRef: jest.fn((val) => ({ current: val, useRef: true })),
-  useCallback: jest.fn((cb, prereqs) => ({ useCallback: { cb, prereqs } })),
-  useEffect: jest.fn((cb, prereqs) => ({ useEffect: { cb, prereqs } })),
-  useContext: jest.fn(context => context),
-}));
-
-jest.mock('@edx/frontend-platform/i18n', () => {
-  const i18n = jest.requireActual('@edx/frontend-platform/i18n');
-  const PropTypes = jest.requireActual('prop-types');
-  const { formatMessage } = jest.requireActual('./testUtils');
-  const formatDate = jest.fn(date => new Date(date).toLocaleDateString()).mockName('useIntl.formatDate');
-  return {
-    ...i18n,
-    intlShape: PropTypes.shape({
-      formatMessage: PropTypes.func,
-    }),
-    useIntl: () => ({
-      formatMessage,
-      formatDate,
-    }),
-    defineMessages: m => m,
-    FormattedMessage: () => 'FormattedMessage',
-  };
-});
-
-jest.mock('@openedx/paragon', () => jest.requireActual('testUtils').mockNestedComponents({
-  Alert: {
-    Heading: 'Alert.Heading',
-  },
-  AlertModal: 'AlertModal',
-  ActionRow: 'ActionRow',
-  Badge: 'Badge',
-  Button: 'Button',
-  Card: {
-    Body: 'Card.Body',
-    Section: 'Card.Section',
-    Footer: 'Card.Footer',
-  },
-  Col: 'Col',
-  Collapsible: {
-    Advanced: 'Collapsible.Advanced',
-    Body: 'Collapsible.Body',
-    Trigger: 'Collapsible.Trigger',
-    Visible: 'Collapsible.Visible',
-  },
-  Container: 'Container',
-  DataTable: {
-    EmptyTable: 'DataTable.EmptyTable',
-    Table: 'DataTable.Table',
-    TableControlBar: 'DataTable.TableControlBar',
-    TableController: 'DataTable.TableController',
-    TableFooter: 'DataTable.TableFooter',
-  },
-  Dropdown: {
-    Item: 'Dropdown.Item',
-    Menu: 'Dropdown.Menu',
-    Toggle: 'Dropdown.Toggle',
-  },
-  Form: {
-    Control: {
-      Feedback: 'Form.Control.Feedback',
-    },
-    Group: 'Form.Group',
-    Label: 'Form.Label',
-    Radio: 'Form.Radio',
-    RadioSet: 'Form.RadioSet',
-  },
-  FormControlFeedback: 'FormControlFeedback',
-  FullscreenModal: 'FullscreenModal',
-  Hyperlink: 'Hyperlink',
-  Icon: 'Icon',
-  IconButton: 'IconButton',
-  MultiSelectDropdownFilter: 'MultiSelectDropdownFilter',
-  OverlayTrigger: 'OverlayTrigger',
-  PageBanner: 'PageBanner',
-  Popover: {
-    Content: 'Popover.Content',
-  },
-  Row: 'Row',
-  StatefulButton: 'StatefulButton',
-  TextFilter: 'TextFilter',
-  Spinner: 'Spinner',
-}));
-
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: 'FontAwesomeIcon',
-}));
-jest.mock('@fortawesome/free-solid-svg-icons', () => ({
-  faUserCircle: jest.fn().mockName('fa-user-circle-icon'),
-}));
-
-jest.mock('@openedx/paragon/icons', () => ({
-  ArrowBack: jest.fn().mockName('icons.ArrowBack'),
-  ArrowDropDown: jest.fn().mockName('icons.ArrowDropDown'),
-  ArrowDropUp: jest.fn().mockName('icons.ArrowDropUp'),
-  Cancel: jest.fn().mockName('icons.Cancel'),
-  ChevronLeft: jest.fn().mockName('icons.ChevronLeft'),
-  ChevronRight: jest.fn().mockName('icons.ChevronRight'),
-  Highlight: jest.fn().mockName('icons.Highlight'),
-  InfoOutline: jest.fn().mockName('icons.InfoOutline'),
-  Launch: jest.fn().mockName('icons.Launch'),
-}));
 
 jest.mock('data/constants/app', () => ({
   locationId: () => 'fake-location-id',

src/test/app.test.jsx

@@ -27,10 +27,6 @@ import App from 'App';
 import Inspector from './inspector';
 import appMessages from './messages';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('@openedx/paragon/icons');
-jest.unmock('@edx/frontend-platform/i18n');
-jest.unmock('react');
 jest.unmock('react-redux');
 
 jest.unmock('hooks');

src/testUtils.jsx

@@ -1,4 +1,7 @@
 import react from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { StrictDict } from 'utils';
 
@@ -185,3 +188,9 @@ export class MockUseState {
     });
   }
 }
+
+export const renderWithIntl = (component) => render(
+  <IntlProvider locale="en" messages={{}}>
+    {component}
+  </IntlProvider>,
+);