From 2bd48e6a0c1745fa1e58e480fc31ecafeeb86d03 Mon Sep 17 00:00:00 2001
From: Victor Navarro <vm.navarro94@gmail.com>
Date: Wed, 9 Jul 2025 21:16:23 -0600
Subject: [PATCH 1/2] test: deprecate react-unit-test-utils 9/14

---
 .../AssessmentActions.test.jsx                | 115 ++++--
 .../AssessmentActions.test.jsx.snap           |  40 --
 .../GradedCriterion.test.jsx                  |  62 +++-
 .../GradedCriterion.test.jsx.snap             |  72 ----
 .../__snapshots__/index.test.jsx.snap         | 351 ------------------
 src/components/FileUpload/index.test.jsx      | 189 +++++-----
 .../__snapshots__/index.test.jsx.snap         |  86 -----
 src/views/AssessmentView/index.test.jsx       | 104 ++++--
 .../__snapshots__/index.test.jsx.snap         | 112 ------
 src/views/SubmissionView/index.test.jsx       |  56 ++-
 10 files changed, 343 insertions(+), 844 deletions(-)
 delete mode 100644 src/components/Assessment/EditableAssessment/__snapshots__/AssessmentActions.test.jsx.snap
 delete mode 100644 src/components/CriterionContainer/__snapshots__/GradedCriterion.test.jsx.snap
 delete mode 100644 src/components/FileUpload/__snapshots__/index.test.jsx.snap
 delete mode 100644 src/views/AssessmentView/__snapshots__/index.test.jsx.snap
 delete mode 100644 src/views/SubmissionView/__snapshots__/index.test.jsx.snap

diff --git a/src/components/Assessment/EditableAssessment/AssessmentActions.test.jsx b/src/components/Assessment/EditableAssessment/AssessmentActions.test.jsx
index a66ca733..6d68c126 100644
--- a/src/components/Assessment/EditableAssessment/AssessmentActions.test.jsx
+++ b/src/components/Assessment/EditableAssessment/AssessmentActions.test.jsx
@@ -1,72 +1,137 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
-import { useExitWithoutSavingAction, useSubmitAssessmentAction } from 'hooks/actions';
+import {
+  useExitWithoutSavingAction,
+  useSubmitAssessmentAction,
+} from 'hooks/actions';
 import AssessmentActions from './AssessmentActions';
 
+/* eslint-disable react/prop-types */
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/actions', () => ({
   useExitWithoutSavingAction: jest.fn(),
   useSubmitAssessmentAction: jest.fn(),
 }));
 
-jest.mock('components/ActionButton', () => 'ActionButton');
-jest.mock('components/ConfirmDialog', () => 'ConfirmDialog');
+jest.mock(
+  'components/ActionButton',
+  () => ({
+    children, variant, onClick, ...props
+  }) => (
+    <button
+      type="button"
+      data-testid={`action-button-${variant}`}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  ),
+);
+
+jest.mock(
+  'components/ConfirmDialog',
+  () => ({ title, onConfirm, ...props }) => (
+    <button
+      type="button"
+      data-testid={`confirm-dialog-${title}`}
+      onClick={onConfirm}
+      onKeyDown={(e) => e.key === 'Enter' && onConfirm()}
+      {...props}
+    />
+  ),
+);
 
-describe('<AssessmentActions />', () => {
+describe('AssessmentActions', () => {
   const mockExitWithoutSavingAction = {
     action: {
       onClick: jest.fn().mockName('useExitWithoutSavingAction.onClick'),
+      children: 'Exit without saving',
     },
     confirmProps: {
       onConfirm: jest.fn().mockName('useExitWithoutSavingAction.onConfirm'),
+      title: 'Exit without saving',
     },
   };
   const mockSubmitAssessmentAction = {
     action: {
       onClick: jest.fn().mockName('useSubmitAssessmentAction.onClick'),
+      children: 'Submit assessment',
     },
     confirmProps: {
       onConfirm: jest.fn().mockName('useSubmitAssessmentAction.onConfirm'),
+      title: 'Submit assessment',
     },
   };
 
   beforeEach(() => {
+    jest.clearAllMocks();
     useExitWithoutSavingAction.mockReturnValue(mockExitWithoutSavingAction);
     useSubmitAssessmentAction.mockReturnValue(mockSubmitAssessmentAction);
   });
 
-  it('render default', () => {
-    const wrapper = shallow(<AssessmentActions />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders both action buttons and confirm dialogs', () => {
+    render(<AssessmentActions />);
 
-    expect(wrapper.instance.findByType('ActionButton')).toHaveLength(2);
-    expect(wrapper.instance.findByType('ConfirmDialog')).toHaveLength(2);
+    expect(
+      screen.getByTestId('action-button-outline-primary'),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('action-button-primary')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('confirm-dialog-Exit without saving'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('confirm-dialog-Submit assessment'),
+    ).toBeInTheDocument();
   });
 
-  it('render without submitConfirmDialog', () => {
+  it('renders without submit confirm dialog when confirmProps is null', () => {
     useSubmitAssessmentAction.mockReturnValueOnce({
       action: mockSubmitAssessmentAction.action,
       confirmProps: null,
     });
-    const wrapper = shallow(<AssessmentActions />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<AssessmentActions />);
 
-    expect(wrapper.instance.findByType('ActionButton')).toHaveLength(2);
-    expect(wrapper.instance.findByType('ConfirmDialog')).toHaveLength(1);
+    expect(
+      screen.getByTestId('action-button-outline-primary'),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('action-button-primary')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('confirm-dialog-Exit without saving'),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByTestId('confirm-dialog-Submit assessment'),
+    ).not.toBeInTheDocument();
   });
 
-  it('has correct mock value', () => {
-    const wrapper = shallow(<AssessmentActions />);
+  it('calls the correct handlers when buttons and dialogs are clicked', () => {
+    render(<AssessmentActions />);
 
-    const exitButton = wrapper.instance.findByType('ActionButton')[0];
-    expect(exitButton.props).toMatchObject(mockExitWithoutSavingAction.action);
+    const exitButton = screen.getByTestId('action-button-outline-primary');
+    expect(exitButton).toHaveTextContent('Exit without saving');
+    fireEvent.click(exitButton);
+    expect(mockExitWithoutSavingAction.action.onClick).toHaveBeenCalled();
 
-    const exitConfirmDialog = wrapper.instance.findByType('ConfirmDialog')[0];
-    expect(exitConfirmDialog.props).toMatchObject(mockExitWithoutSavingAction.confirmProps);
+    const submitButton = screen.getByTestId('action-button-primary');
+    expect(submitButton).toHaveTextContent('Submit assessment');
+    fireEvent.click(submitButton);
+    expect(mockSubmitAssessmentAction.action.onClick).toHaveBeenCalled();
 
-    const submitButton = wrapper.instance.findByType('ActionButton')[1];
-    expect(submitButton.props).toMatchObject(mockSubmitAssessmentAction.action);
+    const exitDialog = screen.getByTestId('confirm-dialog-Exit without saving');
+    fireEvent.click(exitDialog);
+    expect(
+      mockExitWithoutSavingAction.confirmProps.onConfirm,
+    ).toHaveBeenCalled();
 
-    const submitConfirmDialog = wrapper.instance.findByType('ConfirmDialog')[1];
-    expect(submitConfirmDialog.props).toMatchObject(mockSubmitAssessmentAction.confirmProps);
+    const submitDialog = screen.getByTestId('confirm-dialog-Submit assessment');
+    fireEvent.click(submitDialog);
+    expect(
+      mockSubmitAssessmentAction.confirmProps.onConfirm,
+    ).toHaveBeenCalled();
   });
 });
diff --git a/src/components/Assessment/EditableAssessment/__snapshots__/AssessmentActions.test.jsx.snap b/src/components/Assessment/EditableAssessment/__snapshots__/AssessmentActions.test.jsx.snap
deleted file mode 100644
index 13e71f46..00000000
--- a/src/components/Assessment/EditableAssessment/__snapshots__/AssessmentActions.test.jsx.snap
+++ /dev/null
@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<AssessmentActions /> render default 1`] = `
-<div
-  className="assessment-footer"
->
-  <ActionButton
-    onClick={[MockFunction useExitWithoutSavingAction.onClick]}
-    variant="outline-primary"
-  />
-  <ConfirmDialog
-    onConfirm={[MockFunction useExitWithoutSavingAction.onConfirm]}
-  />
-  <ActionButton
-    onClick={[MockFunction useSubmitAssessmentAction.onClick]}
-    variant="primary"
-  />
-  <ConfirmDialog
-    onConfirm={[MockFunction useSubmitAssessmentAction.onConfirm]}
-  />
-</div>
-`;
-
-exports[`<AssessmentActions /> render without submitConfirmDialog 1`] = `
-<div
-  className="assessment-footer"
->
-  <ActionButton
-    onClick={[MockFunction useExitWithoutSavingAction.onClick]}
-    variant="outline-primary"
-  />
-  <ConfirmDialog
-    onConfirm={[MockFunction useExitWithoutSavingAction.onConfirm]}
-  />
-  <ActionButton
-    onClick={[MockFunction useSubmitAssessmentAction.onClick]}
-    variant="primary"
-  />
-</div>
-`;
diff --git a/src/components/CriterionContainer/GradedCriterion.test.jsx b/src/components/CriterionContainer/GradedCriterion.test.jsx
index df044fff..1c4aaba5 100644
--- a/src/components/CriterionContainer/GradedCriterion.test.jsx
+++ b/src/components/CriterionContainer/GradedCriterion.test.jsx
@@ -1,24 +1,64 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import GradedCriterion from './GradedCriterion';
 
-describe('<GradedCriterion />', () => {
-  const props = {
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+const renderComponent = (props = {}) => render(
+  <IntlProvider
+    messages={{
+      'frontend-app-ora.RadioCriterion.optionPoints': '{points} points',
+    }}
+    locale="en"
+  >
+    <GradedCriterion {...props} />
+  </IntlProvider>,
+);
+
+describe('GradedCriterion', () => {
+  const defaultProps = {
     selectedOption: {
       name: 'option1',
       label: 'Option 1',
-      points: 1,
+      points: 5,
     },
-    feedbackValue: 'Feedback',
+    feedbackValue: 'Feedback text',
   };
 
-  it('renders correctly', () => {
-    const wrapper = shallow(<GradedCriterion {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('displays the option label and points', () => {
+    renderComponent(defaultProps);
+
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+    expect(screen.getByText('5 points')).toBeInTheDocument();
+  });
+
+  it('displays the option name if label is not provided', () => {
+    const props = {
+      selectedOption: {
+        name: 'option1',
+        points: 5,
+      },
+    };
+    renderComponent(props);
+
+    expect(screen.getByText('option1')).toBeInTheDocument();
+    expect(screen.getByText('5 points')).toBeInTheDocument();
+  });
+
+  it('displays feedback when provided', () => {
+    renderComponent(defaultProps);
+    expect(screen.getByText('Feedback text')).toBeInTheDocument();
   });
 
-  it('renders correctly with no feedback', () => {
-    const wrapper = shallow(<GradedCriterion selectedOption={props.selectedOption} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('does not display feedback when not provided', () => {
+    const props = {
+      selectedOption: defaultProps.selectedOption,
+    };
+    renderComponent(props);
+    expect(screen.queryByText('Feedback text')).not.toBeInTheDocument();
   });
 });
diff --git a/src/components/CriterionContainer/__snapshots__/GradedCriterion.test.jsx.snap b/src/components/CriterionContainer/__snapshots__/GradedCriterion.test.jsx.snap
deleted file mode 100644
index 8daf77a0..00000000
--- a/src/components/CriterionContainer/__snapshots__/GradedCriterion.test.jsx.snap
+++ /dev/null
@@ -1,72 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<GradedCriterion /> renders correctly 1`] = `
-<div
-  className="review-criterion"
->
-  <Form.Label
-    className="option-label"
-  >
-    Option 1
-  </Form.Label>
-  <div
-    className="criteria-option"
-    key="option1"
-  >
-    <div>
-      <FormControlFeedback
-        className="option-points"
-      >
-        <FormattedMessage
-          defaultMessage="{points} points"
-          description="criterion option point value display"
-          id="frontend-app-ora.RadioCriterion.optionPoints"
-          values={
-            {
-              "points": 1,
-            }
-          }
-        />
-      </FormControlFeedback>
-      <div
-        className="rubric-feedback"
-      >
-        Feedback
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<GradedCriterion /> renders correctly with no feedback 1`] = `
-<div
-  className="review-criterion"
->
-  <Form.Label
-    className="option-label"
-  >
-    Option 1
-  </Form.Label>
-  <div
-    className="criteria-option"
-    key="option1"
-  >
-    <div>
-      <FormControlFeedback
-        className="option-points"
-      >
-        <FormattedMessage
-          defaultMessage="{points} points"
-          description="criterion option point value display"
-          id="frontend-app-ora.RadioCriterion.optionPoints"
-          values={
-            {
-              "points": 1,
-            }
-          }
-        />
-      </FormControlFeedback>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/FileUpload/__snapshots__/index.test.jsx.snap b/src/components/FileUpload/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index 9790302f..00000000
--- a/src/components/FileUpload/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,351 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<FileUpload /> render default 1`] = `
-<div>
-  <h3>
-    File upload
-     
-  </h3>
-  <b>
-    Uploaded files
-  </b>
-  <DataTable
-    columns={
-      [
-        {
-          "Header": "File name",
-          "accessor": "fileName",
-        },
-        {
-          "Header": "File description",
-          "accessor": "fileDescription",
-        },
-        {
-          "Header": "File size",
-          "accessor": "fileSize",
-        },
-      ]
-    }
-    data={
-      [
-        {
-          "abc": 123,
-          "fileSize": "123 B",
-        },
-        {
-          "def": 456,
-          "fileSize": "Unknown",
-        },
-      ]
-    }
-    itemCount={2}
-    tableActions={
-      [
-        <FileDownload
-          files={
-            [
-              {
-                "abc": 123,
-                "fileSize": 123,
-              },
-              {
-                "def": 456,
-                "fileSize": "will be unknown",
-              },
-            ]
-          }
-        />,
-      ]
-    }
-  />
-  <Form.Group
-    isInValid={true}
-  >
-    <Dropzone
-      accept={
-        {
-          "*": [
-            ".pdf",
-            ".jpg",
-          ],
-        }
-      }
-      maxSize={123456}
-      onProcessUpload={[MockFunction onProcessUpload]}
-      progressVariant="bar"
-    />
-  </Form.Group>
-</div>
-`;
-
-exports[`<FileUpload /> render empty on studentTraining 1`] = `null`;
-
-exports[`<FileUpload /> render empty when file upload is not enabled 1`] = `null`;
-
-exports[`<FileUpload /> render extra columns when activeStepName is submission 1`] = `
-<div>
-  <h3>
-    File upload
-     
-  </h3>
-  <b>
-    Uploaded files
-  </b>
-  <DataTable
-    columns={
-      [
-        {
-          "Header": "File name",
-          "accessor": "fileName",
-        },
-        {
-          "Header": "File description",
-          "accessor": "fileDescription",
-        },
-        {
-          "Header": "File size",
-          "accessor": "fileSize",
-        },
-        {
-          "Cell": [Function],
-          "Header": "Actions",
-          "accessor": "actions",
-        },
-      ]
-    }
-    data={
-      [
-        {
-          "abc": 123,
-          "fileSize": "123 B",
-        },
-        {
-          "def": 456,
-          "fileSize": "Unknown",
-        },
-      ]
-    }
-    itemCount={2}
-    tableActions={
-      [
-        <FileDownload
-          files={
-            [
-              {
-                "abc": 123,
-                "fileSize": 123,
-              },
-              {
-                "def": 456,
-                "fileSize": "will be unknown",
-              },
-            ]
-          }
-        />,
-      ]
-    }
-  />
-  <Form.Group
-    isInValid={true}
-  >
-    <Dropzone
-      accept={
-        {
-          "*": [
-            ".pdf",
-            ".jpg",
-          ],
-        }
-      }
-      maxSize={123456}
-      onProcessUpload={[MockFunction onProcessUpload]}
-      progressVariant="bar"
-    />
-  </Form.Group>
-</div>
-`;
-
-exports[`<FileUpload /> render without dropzone and confirm modal when isReadOnly 1`] = `
-<div>
-  <h3>
-    File upload
-     
-  </h3>
-  <FilePreview
-    defaultCollapsePreview={false}
-  />
-  <b>
-    Uploaded files
-  </b>
-  <DataTable
-    columns={
-      [
-        {
-          "Header": "File name",
-          "accessor": "fileName",
-        },
-        {
-          "Header": "File description",
-          "accessor": "fileDescription",
-        },
-        {
-          "Header": "File size",
-          "accessor": "fileSize",
-        },
-      ]
-    }
-    data={
-      [
-        {
-          "abc": 123,
-          "fileSize": "123 B",
-        },
-        {
-          "def": 456,
-          "fileSize": "Unknown",
-        },
-      ]
-    }
-    itemCount={2}
-    tableActions={
-      [
-        <FileDownload
-          files={
-            [
-              {
-                "abc": 123,
-                "fileSize": 123,
-              },
-              {
-                "def": 456,
-                "fileSize": "will be unknown",
-              },
-            ]
-          }
-        />,
-      ]
-    }
-  />
-</div>
-`;
-
-exports[`<FileUpload /> render without file preview if uploadedFiles are empty and isReadOnly 1`] = `
-<div>
-  <h3>
-    File upload
-     
-  </h3>
-  <b>
-    Uploaded files
-  </b>
-  <DataTable
-    columns={
-      [
-        {
-          "Header": "File name",
-          "accessor": "fileName",
-        },
-        {
-          "Header": "File description",
-          "accessor": "fileDescription",
-        },
-        {
-          "Header": "File size",
-          "accessor": "fileSize",
-        },
-      ]
-    }
-    data={[]}
-    itemCount={0}
-    tableActions={
-      [
-        <FileDownload
-          files={[]}
-        />,
-      ]
-    }
-  />
-</div>
-`;
-
-exports[`<FileUpload /> render without header 1`] = `
-<div>
-  <b>
-    Uploaded files
-  </b>
-  <DataTable
-    columns={
-      [
-        {
-          "Header": "File name",
-          "accessor": "fileName",
-        },
-        {
-          "Header": "File description",
-          "accessor": "fileDescription",
-        },
-        {
-          "Header": "File size",
-          "accessor": "fileSize",
-        },
-      ]
-    }
-    data={
-      [
-        {
-          "abc": 123,
-          "fileSize": "123 B",
-        },
-        {
-          "def": 456,
-          "fileSize": "Unknown",
-        },
-      ]
-    }
-    itemCount={2}
-    tableActions={
-      [
-        <FileDownload
-          files={
-            [
-              {
-                "abc": 123,
-                "fileSize": 123,
-              },
-              {
-                "def": 456,
-                "fileSize": "will be unknown",
-              },
-            ]
-          }
-        />,
-      ]
-    }
-  />
-  <Form.Group
-    isInValid={true}
-  >
-    <Dropzone
-      accept={
-        {
-          "*": [
-            ".pdf",
-            ".jpg",
-          ],
-        }
-      }
-      maxSize={123456}
-      onProcessUpload={[MockFunction onProcessUpload]}
-      progressVariant="bar"
-    />
-  </Form.Group>
-</div>
-`;
-
-exports[`createFileActionCell should return a function that is an action cell 1`] = `
-<ActionCell
-  abc={123}
-  disabled={false}
-  onDeletedFile={[MockFunction]}
-/>
-`;
diff --git a/src/components/FileUpload/index.test.jsx b/src/components/FileUpload/index.test.jsx
index b8ac4bc9..f668f579 100644
--- a/src/components/FileUpload/index.test.jsx
+++ b/src/components/FileUpload/index.test.jsx
@@ -1,127 +1,130 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { MemoryRouter } from 'react-router-dom';
 
-import { useActiveStepName, useFileUploadConfig } from 'hooks/app';
+import { useFileUploadConfig, useActiveStepName } from 'hooks/app';
 import { useViewStep } from 'hooks/routing';
-import { stepNames } from 'constants/index';
-
 import { useFileUploadHooks } from './hooks';
+import FileUpload from './index';
+import messages from './messages';
 
-import FileUpload, { createFileActionCell } from './index';
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
 
 jest.mock('hooks/app', () => ({
-  useActiveStepName: jest.fn(),
   useFileUploadConfig: jest.fn(),
+  useActiveStepName: jest.fn(),
 }));
+
 jest.mock('hooks/routing', () => ({
   useViewStep: jest.fn(),
 }));
+
 jest.mock('./hooks', () => ({
   useFileUploadHooks: jest.fn(),
 }));
-jest.mock('./UploadConfirmModal', () => 'UploadConfirmModal');
-jest.mock('./ActionCell', () => 'ActionCell');
-jest.mock('./FileDownload', () => 'FileDownload');
-jest.mock('components/FilePreview', () => 'FilePreview');
 
-describe('<FileUpload />', () => {
-  const props = {
+jest.mock('./UploadConfirmModal', () => () => (
+  <div data-testid="upload-confirm-modal" />
+));
+jest.mock('./ActionCell', () => () => <div data-testid="action-cell" />);
+jest.mock('./FileDownload', () => () => <div data-testid="file-download" />);
+jest.mock('components/FilePreview', () => () => (
+  <div data-testid="file-preview" />
+));
+
+const renderComponent = (props = {}) => render(
+  <MemoryRouter>
+    <IntlProvider messages={messages} locale="en">
+      <FileUpload {...props} />
+    </IntlProvider>
+  </MemoryRouter>,
+);
+
+describe('FileUpload', () => {
+  const defaultProps = {
     isReadOnly: false,
-    uploadedFiles: [
-      {
-        abc: 123,
-        fileSize: 123,
-      },
-      {
-        def: 456,
-        fileSize: 'will be unknown',
-      },
-    ],
+    uploadedFiles: [],
     onFileUploaded: jest.fn(),
     onDeletedFile: jest.fn(),
     defaultCollapsePreview: false,
     hideHeader: false,
-  };
-
-  const defaultFileUploadHooks = {
-    confirmUpload: jest.fn().mockName('confirmUpload'),
-    closeUploadModal: jest.fn().mockName('closeUploadModal'),
-    isModalOpen: false,
-    onProcessUpload: jest.fn().mockName('onProcessUpload'),
-    uploadArgs: {
-      abc: 123,
-    },
-  };
-
-  const defaultUploadConfig = {
-    enabled: true,
-    fileUploadLimit: 10,
-    allowedExtensions: ['pdf', 'jpg'],
-    maxFileSize: 123456,
+    isInValid: false,
   };
 
   beforeEach(() => {
-    useActiveStepName.mockReturnValue('someActiveStep');
-    useViewStep.mockReturnValue('someStep');
-    useFileUploadHooks.mockReturnValue(defaultFileUploadHooks);
-    useFileUploadConfig.mockReturnValue(defaultUploadConfig);
-  });
-
-  it('render default', () => {
-    const wrapper = shallow(<FileUpload {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    jest.clearAllMocks();
+    useActiveStepName.mockReturnValue('submission');
+    useViewStep.mockReturnValue('submission');
+    useFileUploadHooks.mockReturnValue({
+      confirmUpload: jest.fn(),
+      closeUploadModal: jest.fn(),
+      isModalOpen: false,
+      onProcessUpload: jest.fn(),
+      uploadArgs: {},
+    });
   });
 
-  it('render without header', () => {
-    const wrapper = shallow(<FileUpload {...props} hideHeader />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders empty state when no files are uploaded', () => {
+    useFileUploadConfig.mockReturnValue({
+      enabled: true,
+      fileUploadLimit: 3,
+      allowedExtensions: ['pdf', 'txt'],
+      maxFileSize: 10,
+    });
+
+    renderComponent(defaultProps);
+
+    expect(screen.getByText('File upload')).toBeInTheDocument();
+    expect(screen.getByText('Uploaded files')).toBeInTheDocument();
+    expect(screen.getByText('File name')).toBeInTheDocument();
+    expect(screen.getByText('File description')).toBeInTheDocument();
+    expect(screen.getByText('File size')).toBeInTheDocument();
+    expect(screen.getByText('Actions')).toBeInTheDocument();
   });
 
-  it('render without file preview if uploadedFiles are empty and isReadOnly', () => {
-    const wrapper = shallow(<FileUpload {...props} uploadedFiles={[]} isReadOnly />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-
-    expect(wrapper.instance.findByType('FilePreview')).toHaveLength(0);
-  });
-
-  it('render without dropzone and confirm modal when isReadOnly', () => {
-    const wrapper = shallow(<FileUpload {...props} isReadOnly />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-
-    expect(wrapper.instance.findByType('UploadConfirmModal')).toHaveLength(0);
-    expect(wrapper.instance.findByType('Dropzone')).toHaveLength(0);
-  });
-
-  it('render empty on studentTraining', () => {
-    useViewStep.mockReturnValueOnce(stepNames.studentTraining);
-    const wrapper = shallow(<FileUpload {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders file table when files are uploaded', () => {
+    useFileUploadConfig.mockReturnValue({
+      enabled: true,
+      fileUploadLimit: 3,
+      allowedExtensions: ['pdf', 'txt'],
+      maxFileSize: 10,
+    });
+
+    const props = {
+      ...defaultProps,
+      uploadedFiles: [
+        {
+          fileName: 'test.pdf',
+          fileDescription: 'Test file',
+          fileSize: 1024,
+        },
+      ],
+    };
+
+    renderComponent(props);
+
+    expect(screen.getByText('test.pdf')).toBeInTheDocument();
+    expect(screen.getByText('Test file')).toBeInTheDocument();
   });
 
-  it('render empty when file upload is not enabled', () => {
-    useFileUploadConfig.mockReturnValueOnce({ enabled: false });
-    const wrapper = shallow(<FileUpload {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-  });
-
-  it('render extra columns when activeStepName is submission', () => {
-    useActiveStepName.mockReturnValueOnce(stepNames.submission);
-    const wrapper = shallow(<FileUpload {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-
-    expect(wrapper.instance.findByType('DataTable')[0].props.columns).toHaveLength(4);
-  });
-});
+  it('shows required validation message when isInValid is true', () => {
+    useFileUploadConfig.mockReturnValue({
+      enabled: true,
+      fileUploadLimit: 3,
+      allowedExtensions: ['pdf', 'txt'],
+      maxFileSize: 10,
+    });
 
-describe('createFileActionCell', () => {
-  it('should return a function that is an action cell', () => {
-    const onDeletedFile = jest.fn();
-    const isReadOnly = false;
-    const FileActionCell = createFileActionCell({ onDeletedFile, isReadOnly });
-    expect(typeof FileActionCell).toBe('function');
+    const props = {
+      ...defaultProps,
+      isInValid: true,
+    };
 
-    const wrapper = shallow(<FileActionCell abc={123} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderComponent(props);
 
-    expect(wrapper.instance.findByType('ActionCell')).toHaveLength(1);
+    expect(screen.getByText('File Upload is required')).toBeInTheDocument();
   });
 });
diff --git a/src/views/AssessmentView/__snapshots__/index.test.jsx.snap b/src/views/AssessmentView/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index cf874b90..00000000
--- a/src/views/AssessmentView/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<AssessmentView /> render empty on not loaded 1`] = `null`;
-
-exports[`<AssessmentView /> render with files 1`] = `
-<BaseAssessmentView
-  submitAssessment={[Function]}
->
-  <div>
-    <FileUpload
-      isReadOnly={true}
-      uploadedFiles={
-        [
-          {
-            "id": 1,
-            "name": "file",
-          },
-        ]
-      }
-    />
-  </div>
-</BaseAssessmentView>
-`;
-
-exports[`<AssessmentView /> render with prompts and text responses 1`] = `
-<BaseAssessmentView
-  submitAssessment={[Function]}
->
-  <div>
-    <div
-      key=".0"
-    >
-      <Prompt
-        prompt={
-          {
-            "id": 1,
-            "prompt": "prompt",
-          }
-        }
-      />
-      <Fragment>
-        <h3
-          className="m-1 py-2"
-        >
-          Your response
-        </h3>
-        <TextResponse
-          response={
-            {
-              "id": 1,
-              "response": "response",
-            }
-          }
-        />
-      </Fragment>
-    </div>
-    <div
-      key=".1"
-    >
-      <Prompt
-        prompt={
-          {
-            "id": 2,
-            "prompt": "prompt",
-          }
-        }
-      />
-      <Fragment>
-        <h3
-          className="m-1 py-2"
-        >
-          Your response
-        </h3>
-        <TextResponse
-          response={
-            {
-              "id": 2,
-              "response": "response",
-            }
-          }
-        />
-      </Fragment>
-    </div>
-  </div>
-</BaseAssessmentView>
-`;
diff --git a/src/views/AssessmentView/index.test.jsx b/src/views/AssessmentView/index.test.jsx
index ea28ee67..b6542e06 100644
--- a/src/views/AssessmentView/index.test.jsx
+++ b/src/views/AssessmentView/index.test.jsx
@@ -1,67 +1,97 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { useViewStep } from 'hooks/routing';
-
 import { stepNames } from 'constants/index';
 import useAssessmentData from './useAssessmentData';
 import AssessmentView from './index';
 
+/* eslint-disable react/prop-types */
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/routing', () => ({
   useViewStep: jest.fn(),
 }));
-jest.mock('components/Prompt', () => 'Prompt');
-jest.mock('components/TextResponse', () => 'TextResponse');
-jest.mock('components/FileUpload', () => 'FileUpload');
+
 jest.mock('./useAssessmentData', () => jest.fn());
 
-describe('<AssessmentView />', () => {
-  useViewStep.mockReturnValue(stepNames.self);
-  it('render empty on not loaded', () => {
+jest.mock('components/Prompt', () => () => <div data-testid="prompt" />);
+jest.mock('components/TextResponse', () => () => (
+  <div data-testid="text-response" />
+));
+jest.mock('components/FileUpload', () => () => (
+  <div data-testid="file-upload" />
+));
+jest.mock('./BaseAssessmentView', () => ({ children }) => (
+  <div data-testid="base-view">{children}</div>
+));
+
+const renderComponent = (component) => render(
+  <IntlProvider messages={{}} locale="en">
+    {component}
+  </IntlProvider>,
+);
+
+describe('AssessmentView', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders nothing when data is not loaded', () => {
+    useAssessmentData.mockReturnValue({ isLoaded: false });
+    const { container } = renderComponent(<AssessmentView />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders prompts without responses when text responses are empty', () => {
     useAssessmentData.mockReturnValue({
-      prompts: [],
-      response: {},
-      isLoaded: false,
+      isLoaded: true,
+      prompts: [{ id: 1 }, { id: 2 }],
+      response: {
+        textResponses: [],
+        uploadedFiles: [],
+      },
     });
-    const wrapper = shallow(<AssessmentView />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.isEmptyRender()).toBe(true);
+    useViewStep.mockReturnValue(stepNames.submission);
+
+    renderComponent(<AssessmentView />);
+
+    const prompts = screen.getAllByTestId('prompt');
+    expect(prompts).toHaveLength(2);
+    expect(screen.queryByTestId('text-response')).not.toBeInTheDocument();
   });
 
-  it('render with prompts and text responses', () => {
+  it('renders file upload when there are uploaded files', () => {
     useAssessmentData.mockReturnValue({
-      prompts: [
-        { id: 1, prompt: 'prompt' },
-        { id: 2, prompt: 'prompt' },
-      ],
+      isLoaded: true,
+      prompts: [],
       response: {
-        textResponses: [
-          { id: 1, response: 'response' },
-          { id: 2, response: 'response' },
-        ],
+        textResponses: [],
+        uploadedFiles: [{ id: 1 }],
       },
-      isLoaded: true,
     });
-    const wrapper = shallow(<AssessmentView />);
-    expect(wrapper.snapshot).toMatchSnapshot();
 
-    expect(wrapper.instance.findByType('Prompt').length).toBe(2);
-    expect(wrapper.instance.findByType('TextResponse').length).toBe(2);
-    expect(wrapper.instance.findByType('FileUpload').length).toBe(0);
+    renderComponent(<AssessmentView />);
+
+    expect(screen.getByTestId('file-upload')).toBeInTheDocument();
   });
 
-  it('render with files', () => {
+  it('does not render file upload when there are no files', () => {
     useAssessmentData.mockReturnValue({
+      isLoaded: true,
       prompts: [],
       response: {
-        uploadedFiles: [{ id: 1, name: 'file' }],
+        textResponses: [],
+        uploadedFiles: [],
       },
-      isLoaded: true,
     });
-    const wrapper = shallow(<AssessmentView />);
-    expect(wrapper.snapshot).toMatchSnapshot();
 
-    expect(wrapper.instance.findByType('Prompt').length).toBe(0);
-    expect(wrapper.instance.findByType('TextResponse').length).toBe(0);
-    expect(wrapper.instance.findByType('FileUpload').length).toBe(1);
+    renderComponent(<AssessmentView />);
+
+    expect(screen.queryByTestId('file-upload')).not.toBeInTheDocument();
   });
 });
diff --git a/src/views/SubmissionView/__snapshots__/index.test.jsx.snap b/src/views/SubmissionView/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index 494064e7..00000000
--- a/src/views/SubmissionView/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,112 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SubmissionView /> renders disable show rubric 1`] = `
-<div
-  className="assessment-content-layout mr-auto ml-auto"
->
-  <div
-    className="content-wrapper"
-  >
-    <Row
-      className="flex-nowrap m-0"
-    >
-      <Col
-        className="p-0"
-      >
-        <div>
-          <div
-            className="d-flex justify-content-between"
-          >
-            <h1>
-              Your response
-            </h1>
-          </div>
-          <StatusAlert
-            hasSubmitted={false}
-          />
-          <Instructions />
-          <SubmissionPrompts
-            isReadOnly={false}
-            onUpdateTextResponse={[MockFunction]}
-            textResponses={
-              [
-                "response1",
-                "response2",
-              ]
-            }
-          />
-          <FileUpload
-            isReadOnly={false}
-            onDeletedFile={[MockFunction]}
-            onFileUploaded={[MockFunction]}
-            uploadedFiles={[]}
-          />
-        </div>
-        <ModalActions
-          options={
-            {
-              "hasSubmitted": false,
-            }
-          }
-        />
-      </Col>
-    </Row>
-  </div>
-</div>
-`;
-
-exports[`<SubmissionView /> renders enable show rubric 1`] = `
-<div
-  className="assessment-content-layout mr-auto ml-auto"
->
-  <div
-    className="content-wrapper"
-  >
-    <Row
-      className="flex-nowrap m-0"
-    >
-      <Col
-        className="p-0"
-      >
-        <div>
-          <div
-            className="d-flex justify-content-between"
-          >
-            <h1>
-              Your response
-            </h1>
-          </div>
-          <StatusAlert
-            hasSubmitted={false}
-          />
-          <Instructions />
-          <SubmissionPrompts
-            isReadOnly={false}
-            onUpdateTextResponse={[MockFunction]}
-            textResponses={
-              [
-                "response1",
-                "response2",
-              ]
-            }
-          />
-          <FileUpload
-            isReadOnly={false}
-            onDeletedFile={[MockFunction]}
-            onFileUploaded={[MockFunction]}
-            uploadedFiles={[]}
-          />
-        </div>
-        <ModalActions
-          options={
-            {
-              "hasSubmitted": false,
-            }
-          }
-        />
-      </Col>
-      <Rubric />
-    </Row>
-  </div>
-</div>
-`;
diff --git a/src/views/SubmissionView/index.test.jsx b/src/views/SubmissionView/index.test.jsx
index 427fcf18..dbde9773 100644
--- a/src/views/SubmissionView/index.test.jsx
+++ b/src/views/SubmissionView/index.test.jsx
@@ -1,17 +1,34 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import useSubmissionViewData from './hooks';
-
 import SubmissionView from './index';
 
-jest.mock('components/Rubric', () => 'Rubric');
-jest.mock('components/ModalActions', () => 'ModalActions');
-jest.mock('components/FileUpload', () => 'FileUpload');
-jest.mock('components/Instructions', () => 'Instructions');
-jest.mock('components/StatusAlert', () => 'StatusAlert');
-jest.mock('./SubmissionPrompts', () => 'SubmissionPrompts');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+jest.mock('components/Rubric', () => () => <div data-testid="rubric" />);
+jest.mock('components/ModalActions', () => () => (
+  <div data-testid="modal-actions" />
+));
+jest.mock('components/FileUpload', () => () => (
+  <div data-testid="file-upload" />
+));
+jest.mock('components/Instructions', () => () => (
+  <div data-testid="instructions" />
+));
+jest.mock('components/StatusAlert', () => () => (
+  <div data-testid="status-alert" />
+));
+jest.mock('./SubmissionPrompts', () => () => (
+  <div data-testid="submission-prompts" />
+));
 jest.mock('./hooks', () => jest.fn());
 
+const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
+
 describe('<SubmissionView />', () => {
   const mockUseSubmissionViewData = {
     actionOptions: {
@@ -30,18 +47,23 @@ describe('<SubmissionView />', () => {
   };
   useSubmissionViewData.mockReturnValue(mockUseSubmissionViewData);
 
-  it('renders disable show rubric', () => {
-    const wrapper = shallow(<SubmissionView />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('does not render rubric when showRubric is false', () => {
+    renderWithIntl(<SubmissionView />);
 
-    expect(wrapper.instance.findByType('Rubric').length).toBe(0);
+    expect(screen.queryByTestId('rubric')).not.toBeInTheDocument();
+    expect(screen.getByTestId('modal-actions')).toBeInTheDocument();
+    expect(screen.getByTestId('submission-prompts')).toBeInTheDocument();
   });
 
-  it('renders enable show rubric', () => {
-    mockUseSubmissionViewData.showRubric = true;
-    const wrapper = shallow(<SubmissionView />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders rubric when showRubric is true', () => {
+    useSubmissionViewData.mockReturnValue({
+      ...mockUseSubmissionViewData,
+      showRubric: true,
+    });
+    renderWithIntl(<SubmissionView />);
 
-    expect(wrapper.instance.findByType('Rubric').length).toBe(1);
+    expect(screen.getByTestId('rubric')).toBeInTheDocument();
+    expect(screen.getByTestId('modal-actions')).toBeInTheDocument();
+    expect(screen.getByTestId('submission-prompts')).toBeInTheDocument();
   });
 });

From cf73300875276cec49d91b5c2daa6e4c617562fe Mon Sep 17 00:00:00 2001
From: Victor Navarro <vm.navarro94@gmail.com>
Date: Mon, 14 Jul 2025 17:03:11 -0600
Subject: [PATCH 2/2] fix: improve accessible queries

---
 .../AssessmentActions.test.jsx                | 32 +++++++++--------
 src/components/FileUpload/index.test.jsx      | 12 +++----
 src/views/AssessmentView/index.test.jsx       | 20 +++++------
 src/views/SubmissionView/index.test.jsx       | 34 +++++++------------
 4 files changed, 42 insertions(+), 56 deletions(-)

diff --git a/src/components/Assessment/EditableAssessment/AssessmentActions.test.jsx b/src/components/Assessment/EditableAssessment/AssessmentActions.test.jsx
index 6d68c126..8fcdbb54 100644
--- a/src/components/Assessment/EditableAssessment/AssessmentActions.test.jsx
+++ b/src/components/Assessment/EditableAssessment/AssessmentActions.test.jsx
@@ -25,7 +25,7 @@ jest.mock(
   }) => (
     <button
       type="button"
-      data-testid={`action-button-${variant}`}
+      aria-label={`Action Button ${variant}`}
       onClick={onClick}
       {...props}
     >
@@ -39,7 +39,7 @@ jest.mock(
   () => ({ title, onConfirm, ...props }) => (
     <button
       type="button"
-      data-testid={`confirm-dialog-${title}`}
+      aria-label={`Confirm Dialog ${title}`}
       onClick={onConfirm}
       onKeyDown={(e) => e.key === 'Enter' && onConfirm()}
       {...props}
@@ -79,14 +79,14 @@ describe('AssessmentActions', () => {
     render(<AssessmentActions />);
 
     expect(
-      screen.getByTestId('action-button-outline-primary'),
+      screen.getByLabelText('Action Button outline-primary'),
     ).toBeInTheDocument();
-    expect(screen.getByTestId('action-button-primary')).toBeInTheDocument();
+    expect(screen.getByLabelText('Action Button primary')).toBeInTheDocument();
     expect(
-      screen.getByTestId('confirm-dialog-Exit without saving'),
+      screen.getByLabelText('Confirm Dialog Exit without saving'),
     ).toBeInTheDocument();
     expect(
-      screen.getByTestId('confirm-dialog-Submit assessment'),
+      screen.getByLabelText('Confirm Dialog Submit assessment'),
     ).toBeInTheDocument();
   });
 
@@ -98,37 +98,41 @@ describe('AssessmentActions', () => {
     render(<AssessmentActions />);
 
     expect(
-      screen.getByTestId('action-button-outline-primary'),
+      screen.getByLabelText('Action Button outline-primary'),
     ).toBeInTheDocument();
-    expect(screen.getByTestId('action-button-primary')).toBeInTheDocument();
+    expect(screen.getByLabelText('Action Button primary')).toBeInTheDocument();
     expect(
-      screen.getByTestId('confirm-dialog-Exit without saving'),
+      screen.getByLabelText('Confirm Dialog Exit without saving'),
     ).toBeInTheDocument();
     expect(
-      screen.queryByTestId('confirm-dialog-Submit assessment'),
+      screen.queryByLabelText('Confirm Dialog Submit assessment'),
     ).not.toBeInTheDocument();
   });
 
   it('calls the correct handlers when buttons and dialogs are clicked', () => {
     render(<AssessmentActions />);
 
-    const exitButton = screen.getByTestId('action-button-outline-primary');
+    const exitButton = screen.getByLabelText('Action Button outline-primary');
     expect(exitButton).toHaveTextContent('Exit without saving');
     fireEvent.click(exitButton);
     expect(mockExitWithoutSavingAction.action.onClick).toHaveBeenCalled();
 
-    const submitButton = screen.getByTestId('action-button-primary');
+    const submitButton = screen.getByLabelText('Action Button primary');
     expect(submitButton).toHaveTextContent('Submit assessment');
     fireEvent.click(submitButton);
     expect(mockSubmitAssessmentAction.action.onClick).toHaveBeenCalled();
 
-    const exitDialog = screen.getByTestId('confirm-dialog-Exit without saving');
+    const exitDialog = screen.getByLabelText(
+      'Confirm Dialog Exit without saving',
+    );
     fireEvent.click(exitDialog);
     expect(
       mockExitWithoutSavingAction.confirmProps.onConfirm,
     ).toHaveBeenCalled();
 
-    const submitDialog = screen.getByTestId('confirm-dialog-Submit assessment');
+    const submitDialog = screen.getByLabelText(
+      'Confirm Dialog Submit assessment',
+    );
     fireEvent.click(submitDialog);
     expect(
       mockSubmitAssessmentAction.confirmProps.onConfirm,
diff --git a/src/components/FileUpload/index.test.jsx b/src/components/FileUpload/index.test.jsx
index f668f579..a0ffb7fd 100644
--- a/src/components/FileUpload/index.test.jsx
+++ b/src/components/FileUpload/index.test.jsx
@@ -26,14 +26,10 @@ jest.mock('./hooks', () => ({
   useFileUploadHooks: jest.fn(),
 }));
 
-jest.mock('./UploadConfirmModal', () => () => (
-  <div data-testid="upload-confirm-modal" />
-));
-jest.mock('./ActionCell', () => () => <div data-testid="action-cell" />);
-jest.mock('./FileDownload', () => () => <div data-testid="file-download" />);
-jest.mock('components/FilePreview', () => () => (
-  <div data-testid="file-preview" />
-));
+jest.mock('./UploadConfirmModal', () => () => <div>Upload Confirm Modal</div>);
+jest.mock('./ActionCell', () => () => <div>Action Cell</div>);
+jest.mock('./FileDownload', () => () => <div>File Download</div>);
+jest.mock('components/FilePreview', () => () => <div>File Preview</div>);
 
 const renderComponent = (props = {}) => render(
   <MemoryRouter>
diff --git a/src/views/AssessmentView/index.test.jsx b/src/views/AssessmentView/index.test.jsx
index b6542e06..2d3ae589 100644
--- a/src/views/AssessmentView/index.test.jsx
+++ b/src/views/AssessmentView/index.test.jsx
@@ -19,15 +19,11 @@ jest.mock('hooks/routing', () => ({
 
 jest.mock('./useAssessmentData', () => jest.fn());
 
-jest.mock('components/Prompt', () => () => <div data-testid="prompt" />);
-jest.mock('components/TextResponse', () => () => (
-  <div data-testid="text-response" />
-));
-jest.mock('components/FileUpload', () => () => (
-  <div data-testid="file-upload" />
-));
+jest.mock('components/Prompt', () => () => <div>Prompt</div>);
+jest.mock('components/TextResponse', () => () => <div>Text Response</div>);
+jest.mock('components/FileUpload', () => () => <div>File Upload</div>);
 jest.mock('./BaseAssessmentView', () => ({ children }) => (
-  <div data-testid="base-view">{children}</div>
+  <div>Base View {children}</div>
 ));
 
 const renderComponent = (component) => render(
@@ -60,9 +56,9 @@ describe('AssessmentView', () => {
 
     renderComponent(<AssessmentView />);
 
-    const prompts = screen.getAllByTestId('prompt');
+    const prompts = screen.getAllByText('Prompt');
     expect(prompts).toHaveLength(2);
-    expect(screen.queryByTestId('text-response')).not.toBeInTheDocument();
+    expect(screen.queryByText('Text Response')).not.toBeInTheDocument();
   });
 
   it('renders file upload when there are uploaded files', () => {
@@ -77,7 +73,7 @@ describe('AssessmentView', () => {
 
     renderComponent(<AssessmentView />);
 
-    expect(screen.getByTestId('file-upload')).toBeInTheDocument();
+    expect(screen.getByText('File Upload')).toBeInTheDocument();
   });
 
   it('does not render file upload when there are no files', () => {
@@ -92,6 +88,6 @@ describe('AssessmentView', () => {
 
     renderComponent(<AssessmentView />);
 
-    expect(screen.queryByTestId('file-upload')).not.toBeInTheDocument();
+    expect(screen.queryByText('File Upload')).not.toBeInTheDocument();
   });
 });
diff --git a/src/views/SubmissionView/index.test.jsx b/src/views/SubmissionView/index.test.jsx
index dbde9773..88a2aee7 100644
--- a/src/views/SubmissionView/index.test.jsx
+++ b/src/views/SubmissionView/index.test.jsx
@@ -9,22 +9,12 @@ jest.unmock('@openedx/paragon');
 jest.unmock('react');
 jest.unmock('@edx/frontend-platform/i18n');
 
-jest.mock('components/Rubric', () => () => <div data-testid="rubric" />);
-jest.mock('components/ModalActions', () => () => (
-  <div data-testid="modal-actions" />
-));
-jest.mock('components/FileUpload', () => () => (
-  <div data-testid="file-upload" />
-));
-jest.mock('components/Instructions', () => () => (
-  <div data-testid="instructions" />
-));
-jest.mock('components/StatusAlert', () => () => (
-  <div data-testid="status-alert" />
-));
-jest.mock('./SubmissionPrompts', () => () => (
-  <div data-testid="submission-prompts" />
-));
+jest.mock('components/Rubric', () => () => <div>Rubric</div>);
+jest.mock('components/ModalActions', () => () => <div>Modal Actions</div>);
+jest.mock('components/FileUpload', () => () => <div>File Upload</div>);
+jest.mock('components/Instructions', () => () => <div>Instructions</div>);
+jest.mock('components/StatusAlert', () => () => <div>Status Alert</div>);
+jest.mock('./SubmissionPrompts', () => () => <div>Submission Prompts</div>);
 jest.mock('./hooks', () => jest.fn());
 
 const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
@@ -50,9 +40,9 @@ describe('<SubmissionView />', () => {
   it('does not render rubric when showRubric is false', () => {
     renderWithIntl(<SubmissionView />);
 
-    expect(screen.queryByTestId('rubric')).not.toBeInTheDocument();
-    expect(screen.getByTestId('modal-actions')).toBeInTheDocument();
-    expect(screen.getByTestId('submission-prompts')).toBeInTheDocument();
+    expect(screen.queryByText('Rubric')).not.toBeInTheDocument();
+    expect(screen.getByText('Modal Actions')).toBeInTheDocument();
+    expect(screen.getByText('Submission Prompts')).toBeInTheDocument();
   });
 
   it('renders rubric when showRubric is true', () => {
@@ -62,8 +52,8 @@ describe('<SubmissionView />', () => {
     });
     renderWithIntl(<SubmissionView />);
 
-    expect(screen.getByTestId('rubric')).toBeInTheDocument();
-    expect(screen.getByTestId('modal-actions')).toBeInTheDocument();
-    expect(screen.getByTestId('submission-prompts')).toBeInTheDocument();
+    expect(screen.getByText('Rubric')).toBeInTheDocument();
+    expect(screen.getByText('Modal Actions')).toBeInTheDocument();
+    expect(screen.getByText('Submission Prompts')).toBeInTheDocument();
   });
 });