diff --git a/src/containers/ResponseDisplay/PreviewDisplay.test.jsx b/src/containers/ResponseDisplay/PreviewDisplay.test.jsx
index ffa85c9..ca0da40 100644
--- a/src/containers/ResponseDisplay/PreviewDisplay.test.jsx
+++ b/src/containers/ResponseDisplay/PreviewDisplay.test.jsx
@@ -1,56 +1,66 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { FileTypes } from 'data/constants/files';
-import { FileRenderer } from 'components/FilePreview';
 import { PreviewDisplay } from './PreviewDisplay';
 
-jest.mock('components/FilePreview', () => ({
-  FileRenderer: () => 'FileRenderer',
-}));
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
 
 describe('PreviewDisplay', () => {
-  describe('component', () => {
-    const supportedTypes = Object.values(FileTypes);
-    const props = {
-      files: [
-        ...supportedTypes.map((fileType, index) => ({
-          name: `fake_file_${index}.${fileType}`,
-          description: `file description ${index}`,
-          downloadUrl: `/url-path/fake_file_${index}.${fileType}`,
-        })),
-        {
-          name: 'bad_ext_fake_file.other',
-          description: 'bad_ext file description',
-          downloadUrl: 'bad_ext.other',
-        },
-      ],
+  const supportedTypes = Object.values(FileTypes);
+  const props = {
+    files: [
+      ...supportedTypes.map((fileType, index) => ({
+        name: `fake_file_${index}.${fileType}`,
+        description: `file description ${index}`,
+        downloadUrl: `/url-path/fake_file_${index}.${fileType}`,
+      })),
+      {
+        name: 'bad_ext_fake_file.other',
+        description: 'bad_ext file description',
+        downloadUrl: 'bad_ext.other',
+      },
+    ],
+  };
+
+  const renderWithIntl = (component) => render(
+    <IntlProvider locale="en" messages={{}}>
+      {component}
+    </IntlProvider>,
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders preview display container', () => {
+    const { container } = renderWithIntl(<PreviewDisplay {...props} />);
+    const previewDisplay = container.querySelector('.preview-display');
+    expect(previewDisplay).toBeInTheDocument();
+  });
+
+  it('renders empty container when no files provided', () => {
+    const { container } = renderWithIntl(<PreviewDisplay files={[]} />);
+    const previewDisplay = container.querySelector('.preview-display');
+    expect(previewDisplay).toBeInTheDocument();
+    expect(previewDisplay.children.length).toBe(0);
+  });
+
+  it('only renders supported file types', () => {
+    const { container } = renderWithIntl(<PreviewDisplay {...props} />);
+    const previewDisplay = container.querySelector('.preview-display');
+    expect(previewDisplay.children.length).toBe(supportedTypes.length);
+  });
+
+  it('filters out unsupported file types', () => {
+    const unsupportedFile = {
+      name: 'unsupported.xyz',
+      description: 'unsupported file',
+      downloadUrl: '/unsupported.xyz',
     };
-    let el;
-    beforeEach(() => {
-      el = shallow(<PreviewDisplay {...props} />);
-    });
-
-    describe('snapshot', () => {
-      test('files render with props', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      test('files does not exist', () => {
-        el = shallow(<PreviewDisplay {...props} files={[]} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
-    });
-
-    describe('component', () => {
-      test('only renders compatible files', () => {
-        const cards = el.instance.findByType(FileRenderer);
-        expect(cards.length).toEqual(supportedTypes.length);
-        cards.forEach((_, index) => {
-          expect(
-            cards[index].props.file,
-          ).toEqual(props.files[index]);
-        });
-      });
-    });
+    const { container } = renderWithIntl(<PreviewDisplay files={[unsupportedFile]} />);
+    const previewDisplay = container.querySelector('.preview-display');
+    expect(previewDisplay.children.length).toBe(0);
   });
 });
diff --git a/src/containers/ResponseDisplay/SubmissionFiles.test.jsx b/src/containers/ResponseDisplay/SubmissionFiles.test.jsx
index 0025520..999f121 100644
--- a/src/containers/ResponseDisplay/SubmissionFiles.test.jsx
+++ b/src/containers/ResponseDisplay/SubmissionFiles.test.jsx
@@ -1,99 +1,104 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { downloadAllLimit, downloadSingleLimit } from 'data/constants/files';
-
-import { formatMessage } from 'testUtils';
 import { SubmissionFiles } from './SubmissionFiles';
-import messages from './messages';
 
-jest.mock('./components/FileNameCell', () => jest.fn().mockName('FileNameCell'));
-jest.mock('./components/FileExtensionCell', () => jest.fn().mockName('FileExtensionCell'));
-jest.mock('./components/FilePopoverCell', () => jest.fn().mockName('FilePopoverCell'));
-jest.mock('./FileDownload', () => 'FileDownload');
+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>));
+jest.mock('./FileDownload', () => jest.fn(({ files }) => <div data-testid="file-download">Download {files.length} files</div>));
 
 describe('SubmissionFiles', () => {
-  describe('component', () => {
-    const props = {
-      files: [
-        {
-          name: 'some file name.jpg',
-          description: 'description for the file',
-          downloadURL: '/valid-url-wink-wink',
-          size: 0,
-        },
-        {
-          name: 'file number 2.jpg',
-          description: 'description for this file',
-          downloadURL: '/url-2',
-          size: 0,
-        },
-      ],
-    };
-    let el;
-    beforeEach(() => {
-      el = shallow(<SubmissionFiles {...props} />);
+  const defaultProps = {
+    files: [
+      {
+        name: 'some file name.jpg',
+        description: 'description for the file',
+        downloadURL: '/valid-url-wink-wink',
+        size: 100,
+      },
+      {
+        name: 'file number 2.jpg',
+        description: 'description for this file',
+        downloadURL: '/url-2',
+        size: 200,
+      },
+    ],
+  };
+
+  const renderWithIntl = (component) => render(
+    <IntlProvider locale="en" messages={{}}>
+      {component}
+    </IntlProvider>,
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('behavior', () => {
+    it('displays submission files title with file count', () => {
+      renderWithIntl(<SubmissionFiles {...defaultProps} />);
+      const title = screen.getByTestId('submission-files-title');
+      expect(title).toBeInTheDocument();
+      expect(title).toHaveTextContent(`Submission Files (${defaultProps.files.length})`);
     });
 
-    describe('snapshot', () => {
-      test('files existed for props', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-
-      test('files does not exist', () => {
-        el = shallow(<SubmissionFiles {...props} files={[]} />);
-
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      test('files size exceed', () => {
-        const files = props.files.map(file => ({ ...file, size: downloadSingleLimit + 1 }));
-        el = shallow(<SubmissionFiles {...props} files={files} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
+    it('renders file download component when files can be downloaded', () => {
+      renderWithIntl(<SubmissionFiles {...defaultProps} />);
+      const downloadComponent = screen.getByTestId('file-download');
+      expect(downloadComponent).toBeInTheDocument();
+      expect(downloadComponent).toHaveTextContent('Download 2 files');
     });
 
-    describe('behavior', () => {
-      test('title', () => {
-        const titleEl = el.instance.findByTestId('submission-files-title')[0].children[0];
-        expect(titleEl.el).toEqual(
-          `${formatMessage(messages.submissionFiles)} (${props.files.length})`,
-        );
-      });
+    it('displays warning when individual file exceeds size limit', () => {
+      const largeFileProps = {
+        ...defaultProps,
+        files: [
+          { ...defaultProps.files[0], size: downloadSingleLimit + 1 },
+          defaultProps.files[1],
+        ],
+      };
+      renderWithIntl(<SubmissionFiles {...largeFileProps} />);
 
-      describe('canDownload', () => {
-        test('normal file size', () => {
-          expect(el.instance.findByTestId('file-download')).toHaveLength(1);
-        });
+      expect(screen.queryByTestId('file-download')).not.toBeInTheDocument();
+      const warningText = screen.getByTestId('exceed-download-text');
+      expect(warningText).toBeInTheDocument();
+      expect(warningText).toHaveTextContent('Exceeded the allow download size');
+    });
 
-        test('one of the file exceed the limit', () => {
-          const oneFileExceed = [{ ...props.files[0], size: downloadSingleLimit + 1 }, props.files[1]];
+    it('displays warning when total file size exceeds limit', () => {
+      const largeFileSize = (downloadAllLimit + 1) / 20;
+      const largeFilesProps = {
+        ...defaultProps,
+        files: Array(20).fill({
+          name: 'large file.jpg',
+          description: 'large file description',
+          downloadURL: '/large-file-url',
+          size: largeFileSize,
+        }),
+      };
+      renderWithIntl(<SubmissionFiles {...largeFilesProps} />);
 
-          oneFileExceed.forEach(file => expect(file.size < downloadAllLimit).toEqual(true));
+      expect(screen.queryByTestId('file-download')).not.toBeInTheDocument();
+    });
 
-          el = shallow(<SubmissionFiles {...props} files={oneFileExceed} />);
-          expect(el.instance.findByTestId('file-download')).toHaveLength(0);
+    it('displays title only when no files are provided', () => {
+      const { container } = renderWithIntl(<SubmissionFiles {...defaultProps} files={[]} />);
+      const title = container.querySelector('.submission-files-title h3');
+      expect(title).toBeInTheDocument();
+      expect(title).toHaveTextContent('Submission Files (0)');
+      expect(screen.queryByTestId('file-download')).not.toBeInTheDocument();
+    });
 
-          const warningEl = el.instance.findByTestId('exceed-download-text')[0];
-          expect(warningEl.el.children[1]).toEqual(formatMessage(messages.exceedFileSize));
-        });
-
-        test('total file size exceed the limit', () => {
-          const length = 20;
-          const totalFilesExceed = new Array(length).fill({
-            name: 'some file name.jpg',
-            description: 'description for the file',
-            downloadURL: '/valid-url-wink-wink',
-            size: (downloadAllLimit + 1) / length,
-          });
-          totalFilesExceed.forEach(file => {
-            expect(file.size < downloadAllLimit).toEqual(true);
-            expect(file.size < downloadSingleLimit).toEqual(true);
-          });
-
-          el = shallow(<SubmissionFiles {...props} files={totalFilesExceed} />);
-          expect(el.instance.findByTestId('file-download')).toHaveLength(0);
-        });
-      });
+    it('renders data table with correct file information', () => {
+      const { container } = renderWithIntl(<SubmissionFiles {...defaultProps} />);
+      const dataTable = container.querySelector('.submission-files-table');
+      expect(dataTable).toBeInTheDocument();
     });
   });
 });
diff --git a/src/containers/ResponseDisplay/__snapshots__/PreviewDisplay.test.jsx.snap b/src/containers/ResponseDisplay/__snapshots__/PreviewDisplay.test.jsx.snap
deleted file mode 100644
index cc82091..0000000
--- a/src/containers/ResponseDisplay/__snapshots__/PreviewDisplay.test.jsx.snap
+++ /dev/null
@@ -1,124 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PreviewDisplay component snapshot files does not exist 1`] = `
-<div
-  className="preview-display"
-/>
-`;
-
-exports[`PreviewDisplay component snapshot files render with props 1`] = `
-<div
-  className="preview-display"
->
-  <FileRenderer
-    file={
-      {
-        "description": "file description 0",
-        "downloadUrl": "/url-path/fake_file_0.pdf",
-        "name": "fake_file_0.pdf",
-      }
-    }
-    key="fake_file_0.pdf"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 1",
-        "downloadUrl": "/url-path/fake_file_1.jpg",
-        "name": "fake_file_1.jpg",
-      }
-    }
-    key="fake_file_1.jpg"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 2",
-        "downloadUrl": "/url-path/fake_file_2.jpeg",
-        "name": "fake_file_2.jpeg",
-      }
-    }
-    key="fake_file_2.jpeg"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 3",
-        "downloadUrl": "/url-path/fake_file_3.png",
-        "name": "fake_file_3.png",
-      }
-    }
-    key="fake_file_3.png"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 4",
-        "downloadUrl": "/url-path/fake_file_4.bmp",
-        "name": "fake_file_4.bmp",
-      }
-    }
-    key="fake_file_4.bmp"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 5",
-        "downloadUrl": "/url-path/fake_file_5.txt",
-        "name": "fake_file_5.txt",
-      }
-    }
-    key="fake_file_5.txt"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 6",
-        "downloadUrl": "/url-path/fake_file_6.gif",
-        "name": "fake_file_6.gif",
-      }
-    }
-    key="fake_file_6.gif"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 7",
-        "downloadUrl": "/url-path/fake_file_7.jfif",
-        "name": "fake_file_7.jfif",
-      }
-    }
-    key="fake_file_7.jfif"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 8",
-        "downloadUrl": "/url-path/fake_file_8.pjpeg",
-        "name": "fake_file_8.pjpeg",
-      }
-    }
-    key="fake_file_8.pjpeg"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 9",
-        "downloadUrl": "/url-path/fake_file_9.pjp",
-        "name": "fake_file_9.pjp",
-      }
-    }
-    key="fake_file_9.pjp"
-  />
-  <FileRenderer
-    file={
-      {
-        "description": "file description 10",
-        "downloadUrl": "/url-path/fake_file_10.svg",
-        "name": "fake_file_10.svg",
-      }
-    }
-    key="fake_file_10.svg"
-  />
-</div>
-`;
diff --git a/src/containers/ResponseDisplay/__snapshots__/SubmissionFiles.test.jsx.snap b/src/containers/ResponseDisplay/__snapshots__/SubmissionFiles.test.jsx.snap
deleted file mode 100644
index ad819a5..0000000
--- a/src/containers/ResponseDisplay/__snapshots__/SubmissionFiles.test.jsx.snap
+++ /dev/null
@@ -1,230 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SubmissionFiles component snapshot files does not exist 1`] = `
-<Card
-  className="submission-files"
->
-  <div
-    className="submission-files-title no-submissions"
-  >
-    <h3>
-      Submission Files (0)
-    </h3>
-  </div>
-</Card>
-`;
-
-exports[`SubmissionFiles component snapshot files existed for props 1`] = `
-<Card
-  className="submission-files"
->
-  <Fragment>
-    <Collapsible.Advanced
-      defaultOpen={true}
-    >
-      <Collapsible.Trigger
-        className="submission-files-title"
-      >
-        <h3
-          data-testid="submission-files-title"
-        >
-          Submission Files (2)
-        </h3>
-        <Collapsible.Visible
-          whenClosed={true}
-        >
-          <Icon
-            src={[MockFunction icons.ArrowDropDown]}
-          />
-        </Collapsible.Visible>
-        <Collapsible.Visible
-          whenOpen={true}
-        >
-          <Icon
-            src={[MockFunction icons.ArrowDropUp]}
-          />
-        </Collapsible.Visible>
-      </Collapsible.Trigger>
-      <Collapsible.Body
-        className="submission-files-body"
-      >
-        <div
-          className="submission-files-table"
-        >
-          <DataTable
-            columns={
-              [
-                {
-                  "Cell": [MockFunction FileNameCell],
-                  "Header": "Name",
-                  "accessor": "name",
-                },
-                {
-                  "Cell": [MockFunction FileExtensionCell],
-                  "Header": "File Extension",
-                  "accessor": "name",
-                  "id": "extension",
-                },
-                {
-                  "Cell": [MockFunction FilePopoverCell],
-                  "Header": "File Metadata",
-                  "accessor": "",
-                },
-              ]
-            }
-            data={
-              [
-                {
-                  "description": "description for the file",
-                  "downloadURL": "/valid-url-wink-wink",
-                  "name": "some file name.jpg",
-                  "size": 0,
-                },
-                {
-                  "description": "description for this file",
-                  "downloadURL": "/url-2",
-                  "name": "file number 2.jpg",
-                  "size": 0,
-                },
-              ]
-            }
-            itemCount={2}
-          >
-            <DataTable.Table />
-          </DataTable>
-        </div>
-      </Collapsible.Body>
-    </Collapsible.Advanced>
-    <Card.Footer
-      className="text-right"
-    >
-      <FileDownload
-        data-testid="file-download"
-        files={
-          [
-            {
-              "description": "description for the file",
-              "downloadURL": "/valid-url-wink-wink",
-              "name": "some file name.jpg",
-              "size": 0,
-            },
-            {
-              "description": "description for this file",
-              "downloadURL": "/url-2",
-              "name": "file number 2.jpg",
-              "size": 0,
-            },
-          ]
-        }
-      />
-    </Card.Footer>
-  </Fragment>
-</Card>
-`;
-
-exports[`SubmissionFiles component snapshot files size exceed 1`] = `
-<Card
-  className="submission-files"
->
-  <Fragment>
-    <Collapsible.Advanced
-      defaultOpen={true}
-    >
-      <Collapsible.Trigger
-        className="submission-files-title"
-      >
-        <h3
-          data-testid="submission-files-title"
-        >
-          Submission Files (2)
-        </h3>
-        <Collapsible.Visible
-          whenClosed={true}
-        >
-          <Icon
-            src={[MockFunction icons.ArrowDropDown]}
-          />
-        </Collapsible.Visible>
-        <Collapsible.Visible
-          whenOpen={true}
-        >
-          <Icon
-            src={[MockFunction icons.ArrowDropUp]}
-          />
-        </Collapsible.Visible>
-      </Collapsible.Trigger>
-      <Collapsible.Body
-        className="submission-files-body"
-      >
-        <div
-          className="submission-files-table"
-        >
-          <DataTable
-            columns={
-              [
-                {
-                  "Cell": [MockFunction FileNameCell],
-                  "Header": "Name",
-                  "accessor": "name",
-                },
-                {
-                  "Cell": [MockFunction FileExtensionCell],
-                  "Header": "File Extension",
-                  "accessor": "name",
-                  "id": "extension",
-                },
-                {
-                  "Cell": [MockFunction FilePopoverCell],
-                  "Header": "File Metadata",
-                  "accessor": "",
-                },
-              ]
-            }
-            data={
-              [
-                {
-                  "description": "description for the file",
-                  "downloadURL": "/valid-url-wink-wink",
-                  "name": "some file name.jpg",
-                  "size": 1610612737,
-                },
-                {
-                  "description": "description for this file",
-                  "downloadURL": "/url-2",
-                  "name": "file number 2.jpg",
-                  "size": 1610612737,
-                },
-              ]
-            }
-            itemCount={2}
-          >
-            <DataTable.Table />
-          </DataTable>
-        </div>
-      </Collapsible.Body>
-    </Collapsible.Advanced>
-    <Card.Footer
-      className="text-right"
-    >
-      <div>
-        <Icon
-          className="d-inline-block align-middle"
-        />
-        <span
-          className="exceed-download-text"
-          data-testid="exceed-download-text"
-        >
-           
-          Exceeded the allow download size
-           
-        </span>
-        <Button
-          disabled={true}
-        >
-          Download files
-        </Button>
-      </div>
-    </Card.Footer>
-  </Fragment>
-</Card>
-`;
diff --git a/src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap b/src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index e2fabe0..0000000
--- a/src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,99 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ResponseDisplay component snapshot file upload disable with valid response 1`] = `
-<div
-  className="response-display"
->
-  <Card
-    key="0"
-  >
-    <Card.Section
-      className="response-display-text-content"
-      data-testid="response-display-text-content"
-    >
-      parsed html (sanitized (some text response here))
-    </Card.Section>
-  </Card>
-</div>
-`;
-
-exports[`ResponseDisplay component snapshot file upload disabled without response 1`] = `
-<div
-  className="response-display"
->
-  <SubmissionFiles
-    data-testid="submission-files"
-    files={[]}
-  />
-  <PreviewDisplay
-    data-testid="allow-file-upload"
-    files={[]}
-  />
-</div>
-`;
-
-exports[`ResponseDisplay component snapshot file upload enable with valid response 1`] = `
-<div
-  className="response-display"
->
-  <SubmissionFiles
-    data-testid="submission-files"
-    files={
-      [
-        {
-          "description": "description for the file",
-          "downloadURL": "/valid-url-wink-wink",
-          "name": "some file name.jpg",
-        },
-        {
-          "description": "description for this file",
-          "downloadURL": "/url-2",
-          "name": "file number 2.jpg",
-        },
-      ]
-    }
-  />
-  <PreviewDisplay
-    data-testid="allow-file-upload"
-    files={
-      [
-        {
-          "description": "description for the file",
-          "downloadURL": "/valid-url-wink-wink",
-          "name": "some file name.jpg",
-        },
-        {
-          "description": "description for this file",
-          "downloadURL": "/url-2",
-          "name": "file number 2.jpg",
-        },
-      ]
-    }
-  />
-  <Card
-    key="0"
-  >
-    <Card.Section
-      className="response-display-text-content"
-      data-testid="response-display-text-content"
-    >
-      parsed html (sanitized (some text response here))
-    </Card.Section>
-  </Card>
-</div>
-`;
-
-exports[`ResponseDisplay component snapshot file upload enable without response 1`] = `
-<div
-  className="response-display"
->
-  <SubmissionFiles
-    data-testid="submission-files"
-    files={[]}
-  />
-  <PreviewDisplay
-    data-testid="allow-file-upload"
-    files={[]}
-  />
-</div>
-`;
diff --git a/src/containers/ResponseDisplay/components/FileExtensionCell.test.jsx b/src/containers/ResponseDisplay/components/FileExtensionCell.test.jsx
index ca367b9..57f64d2 100644
--- a/src/containers/ResponseDisplay/components/FileExtensionCell.test.jsx
+++ b/src/containers/ResponseDisplay/components/FileExtensionCell.test.jsx
@@ -1,25 +1,42 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render } from '@testing-library/react';
 import FileExtensionCell from './FileExtensionCell';
 
-describe('FileExtensionCell', () => {
-  describe('component', () => {
-    const props = {
-      value: 'file_name.with_extension.pdf',
-    };
-    let el;
-    beforeEach(() => {
-      el = shallow(<FileExtensionCell {...props} />);
-    });
-    test('snapshot', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
 
-    describe('behavior', () => {
-      test('content', () => {
-        expect(el.instance.children[0].el).toEqual('PDF');
-      });
-    });
+describe('FileExtensionCell', () => {
+  const props = {
+    value: 'file_name.with_extension.pdf',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders file extension in uppercase', () => {
+    const { getByText } = render(<FileExtensionCell {...props} />);
+    expect(getByText('PDF')).toBeInTheDocument();
+  });
+
+  it('applies correct CSS class', () => {
+    const { container } = render(<FileExtensionCell {...props} />);
+    const element = container.firstChild;
+    expect(element).toHaveClass('text-truncate');
+  });
+
+  it('extracts extension from file with multiple dots', () => {
+    const { getByText } = render(<FileExtensionCell value="my.file.name.docx" />);
+    expect(getByText('DOCX')).toBeInTheDocument();
+  });
+
+  it('handles file without extension', () => {
+    const { getByText } = render(<FileExtensionCell value="filename" />);
+    expect(getByText('FILENAME')).toBeInTheDocument();
+  });
+
+  it('handles empty file extension', () => {
+    const { container } = render(<FileExtensionCell value="filename." />);
+    const element = container.firstChild;
+    expect(element).toHaveTextContent('');
   });
 });
diff --git a/src/containers/ResponseDisplay/components/FileNameCell.test.jsx b/src/containers/ResponseDisplay/components/FileNameCell.test.jsx
index 7028fec..49ff689 100644
--- a/src/containers/ResponseDisplay/components/FileNameCell.test.jsx
+++ b/src/containers/ResponseDisplay/components/FileNameCell.test.jsx
@@ -1,25 +1,21 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
 
 import FileNameCell from './FileNameCell';
 
 describe('FileNameCell', () => {
-  describe('component', () => {
-    const props = {
-      value: 'some test text value',
-    };
-    let el;
-    beforeEach(() => {
-      el = shallow(<FileNameCell {...props} />);
-    });
-    test('snapshot', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
+  const props = {
+    value: 'some test text value',
+  };
 
-    describe('behavior', () => {
-      test('content', () => {
-        expect(el.instance.children[0].el).toEqual(props.value);
-      });
-    });
+  it('renders the value text', () => {
+    render(<FileNameCell {...props} />);
+    expect(screen.getByText('some test text value')).toBeInTheDocument();
+  });
+
+  it('applies text truncation class', () => {
+    const { container } = render(<FileNameCell {...props} />);
+    const divElement = container.querySelector('div');
+    expect(divElement).toHaveClass('text-truncate');
   });
 });
diff --git a/src/containers/ResponseDisplay/components/__snapshots__/FileExtensionCell.test.jsx.snap b/src/containers/ResponseDisplay/components/__snapshots__/FileExtensionCell.test.jsx.snap
deleted file mode 100644
index 2a2d914..0000000
--- a/src/containers/ResponseDisplay/components/__snapshots__/FileExtensionCell.test.jsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileExtensionCell component snapshot 1`] = `
-<div
-  className="text-truncate"
->
-  PDF
-</div>
-`;
diff --git a/src/containers/ResponseDisplay/components/__snapshots__/FileNameCell.test.jsx.snap b/src/containers/ResponseDisplay/components/__snapshots__/FileNameCell.test.jsx.snap
deleted file mode 100644
index 143afb6..0000000
--- a/src/containers/ResponseDisplay/components/__snapshots__/FileNameCell.test.jsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileNameCell component snapshot 1`] = `
-<div
-  className="text-truncate"
->
-  some test text value
-</div>
-`;
diff --git a/src/containers/ResponseDisplay/index.test.jsx b/src/containers/ResponseDisplay/index.test.jsx
index 797124d..be56044 100644
--- a/src/containers/ResponseDisplay/index.test.jsx
+++ b/src/containers/ResponseDisplay/index.test.jsx
@@ -1,121 +1,127 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import createDOMPurify from 'dompurify';
-import parse from 'html-react-parser';
-
+import { render, screen } from '@testing-library/react';
 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: {
       selected: {
-        response: (state) => ({ response: state }),
+        response: jest.fn((state) => state.response || { text: [], files: [] }),
       },
     },
     app: {
       ora: {
-        fileUploadResponseConfig: (state) => ({ config: state }),
+        fileUploadResponseConfig: jest.fn((state) => state.fileUploadResponseConfig || 'optional'),
       },
     },
   },
 }));
-jest.mock('./SubmissionFiles', () => 'SubmissionFiles');
+
+jest.mock('./SubmissionFiles', () => jest.fn(({ files }) => (
+  <div data-testid="submission-files">Files: {files.length}</div>
+)));
+
+jest.mock('./PreviewDisplay', () => jest.fn(({ files }) => (
+  <div data-testid="preview-display">Preview: {files.length}</div>
+)));
+
 jest.mock('dompurify', () => () => ({
-  sanitize: (text) => `sanitized (${text})`,
+  sanitize: (text) => text,
 }));
-jest.mock('html-react-parser', () => (text) => `parsed html (${text})`);
+
+jest.mock('html-react-parser', () => (text) => text);
 
 describe('ResponseDisplay', () => {
-  describe('component', () => {
-    const props = {
-      response: {
-        text: ['some text response here'],
-        files: [
-          {
-            name: 'some file name.jpg',
-            description: 'description for the file',
-            downloadURL: '/valid-url-wink-wink',
-          },
-          {
-            name: 'file number 2.jpg',
-            description: 'description for this file',
-            downloadURL: '/url-2',
-          },
-        ],
-      },
-      fileUploadResponseConfig: 'optional',
-    };
-    let el;
-    beforeAll(() => {
-      global.window = {};
-    });
-    beforeEach(() => {
-      el = shallow(<ResponseDisplay {...props} />);
-    });
-    describe('snapshot', () => {
-      test('file upload enable with valid response', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
+  const defaultProps = {
+    response: {
+      text: ['some text response here', 'another text response'],
+      files: [
+        {
+          name: 'some file name.jpg',
+          description: 'description for the file',
+          downloadURL: '/valid-url-wink-wink',
+        },
+        {
+          name: 'file number 2.jpg',
+          description: 'description for this file',
+          downloadURL: '/url-2',
+        },
+      ],
+    },
+    fileUploadResponseConfig: 'optional',
+  };
 
-      test('file upload enable without response', () => {
-        el = shallow(<ResponseDisplay {...props} response={{ text: [], files: [] }} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      test('file upload disable with valid response', () => {
-        el = shallow(<ResponseDisplay {...props} fileUploadResponseConfig={fileUploadResponseOptions.none} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
+  beforeAll(() => {
+    global.window = {};
+  });
 
-      test('file upload disabled without response', () => {
-        el = shallow(<ResponseDisplay {...props} response={{ text: [], files: [] }} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('behavior', () => {
+    it('renders response display container', () => {
+      const { container } = render(<ResponseDisplay {...defaultProps} />);
+      const responseDisplay = container.querySelector('.response-display');
+      expect(responseDisplay).toBeInTheDocument();
     });
-    describe('behavior', () => {
-      test('get textContents', () => {
-        const textContents = el.instance.findByTestId('response-display-text-content');
-        expect(textContents.length).toEqual(
-          props.response.text.length,
-        );
-        textContents.forEach((text, index) => {
-          expect(text.el.children[0]).toEqual(
-            parse(createDOMPurify(window).sanitize(props.response.text[index])),
-          );
-        });
-      });
 
-      test('get submittedFiles', () => {
-        expect(el.instance.findByTestId('submission-files')[0].props.files).toEqual(props.response.files);
-      });
-      test('get allowFileUpload', () => {
-        expect(el.instance.findByTestId('allow-file-upload').length > 0).toEqual(
-          props.fileUploadResponseConfig !== fileUploadResponseOptions.none,
-        );
-      });
+    it('displays text content in cards', () => {
+      const { container } = render(<ResponseDisplay {...defaultProps} />);
+      const textContents = container.querySelectorAll('.response-display-text-content');
+      expect(textContents).toHaveLength(defaultProps.response.text.length);
+      expect(textContents[0]).toHaveTextContent('some text response here');
+      expect(textContents[1]).toHaveTextContent('another text response');
+    });
+
+    it('displays submission files when file upload is allowed', () => {
+      render(<ResponseDisplay {...defaultProps} />);
+      const submissionFiles = screen.getByTestId('submission-files');
+      expect(submissionFiles).toBeInTheDocument();
+      expect(submissionFiles).toHaveTextContent('Files: 2');
+    });
+
+    it('displays preview display when file upload is allowed', () => {
+      render(<ResponseDisplay {...defaultProps} />);
+      const previewDisplay = screen.getByTestId('preview-display');
+      expect(previewDisplay).toBeInTheDocument();
+      expect(previewDisplay).toHaveTextContent('Preview: 2');
+    });
+
+    it('does not display file components when file upload is disabled', () => {
+      render(<ResponseDisplay {...defaultProps} fileUploadResponseConfig={fileUploadResponseOptions.none} />);
+      expect(screen.queryByTestId('submission-files')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('preview-display')).not.toBeInTheDocument();
+    });
+
+    it('renders empty content when no text response provided', () => {
+      const { container } = render(<ResponseDisplay {...defaultProps} response={{ text: [], files: [] }} />);
+      const textContents = container.querySelectorAll('.response-display-text-content');
+      expect(textContents).toHaveLength(0);
     });
   });
+
   describe('mapStateToProps', () => {
-    let mapped;
     const testState = {
-      dummyText: ['text'],
-      dummyFiles: ['files', 'file-2'],
+      response: {
+        text: ['test text'],
+        files: ['file1', 'file2'],
+      },
+      fileUploadResponseConfig: 'required',
     };
-    beforeEach(() => {
-      mapped = mapStateToProps(testState);
+
+    it('maps response from grading.selected.response selector', () => {
+      const mapped = mapStateToProps(testState);
+      expect(mapped.response).toEqual(selectors.grading.selected.response(testState));
     });
-    test('response loads from grading.selected.response', () => {
-      expect(mapped.response).toEqual(
-        selectors.grading.selected.response(testState),
-      );
-    });
-    test('response loads from grading.selected.response', () => {
-      expect(mapped.fileUploadResponseConfig).toEqual(
-        selectors.app.ora.fileUploadResponseConfig(testState),
-      );
+
+    it('maps fileUploadResponseConfig from app.ora.fileUploadResponseConfig selector', () => {
+      const mapped = mapStateToProps(testState);
+      expect(mapped.fileUploadResponseConfig).toEqual(selectors.app.ora.fileUploadResponseConfig(testState));
     });
   });
 });