diff --git a/src/components/Assessment/ReadonlyAssessment/AssessmentCriteria.test.jsx b/src/components/Assessment/ReadonlyAssessment/AssessmentCriteria.test.jsx
index bbc6e5c2..aa610396 100644
--- a/src/components/Assessment/ReadonlyAssessment/AssessmentCriteria.test.jsx
+++ b/src/components/Assessment/ReadonlyAssessment/AssessmentCriteria.test.jsx
@@ -1,13 +1,71 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { useCriteriaConfig } from 'hooks/assessment';
 import AssessmentCriteria from './AssessmentCriteria';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+jest.mock('./Feedback', () => ({
+  __esModule: true,
+  default: ({
+    criterionName,
+    selectedOption,
+    selectedPoints,
+    commentBody,
+    commentHeader,
+  }) => (
+    <div>
+      <h5>{criterionName}</h5>
+      {selectedOption && (
+        <p>
+          {selectedOption}: {selectedPoints} Points
+        </p>
+      )}
+      {commentHeader && <div>{commentHeader}</div>}
+      {commentBody && <div>{commentBody}</div>}
+    </div>
+  ),
+}));
+
 jest.mock('hooks/assessment', () => ({
   useCriteriaConfig: jest.fn(),
 }));
 
+const renderWithIntl = (component) => render(
+  <IntlProvider locale="en" messages={{}}>
+    {component}
+  </IntlProvider>,
+);
+
 describe('<AssessmentCriteria />', () => {
+  const mockCriteriaConfig = [
+    {
+      name: 'Criterion Name',
+      description: 'Criterion Description',
+      options: {
+        1: {
+          label: 'Selected Option 1',
+          points: 5,
+        },
+      },
+    },
+    {
+      name: 'Criterion Name 2',
+      description: 'Criterion Description 2',
+      options: {
+        2: {
+          label: 'Selected Option 2',
+          points: 10,
+        },
+      },
+    },
+  ];
+
   const props = {
     criteria: [
       {
@@ -23,41 +81,102 @@ describe('<AssessmentCriteria />', () => {
     stepLabel: 'Step Label',
   };
 
-  it('renders the component', () => {
-    useCriteriaConfig.mockReturnValue([
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders criteria feedback components with correct data', () => {
+    useCriteriaConfig.mockReturnValue(mockCriteriaConfig);
+
+    renderWithIntl(<AssessmentCriteria {...props} />);
+
+    expect(
+      screen.getByRole('heading', { name: 'Criterion Name' }),
+    ).toBeTruthy();
+    expect(screen.getByText('Selected Option 1: 5 Points')).toBeTruthy();
+    expect(screen.getByText('Feedback 1')).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('heading', { name: 'Criterion Name 2' }),
+    ).toBeTruthy();
+    expect(screen.getByText('Selected Option 2: 10 Points')).toBeTruthy();
+    expect(screen.getByText('Feedback 2')).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('heading', { name: 'Overall feedback' }),
+    ).toBeTruthy();
+    expect(screen.getByText('Overall Feedback')).toBeInTheDocument();
+  });
+
+  it('renders without overall feedback when not provided', () => {
+    useCriteriaConfig.mockReturnValue(mockCriteriaConfig);
+
+    const propsWithoutOverallFeedback = {
+      ...props,
+      overallFeedback: null,
+    };
+
+    renderWithIntl(<AssessmentCriteria {...propsWithoutOverallFeedback} />);
+
+    expect(
+      screen.queryByRole('heading', { name: 'Overall feedback' }),
+    ).toBeNull();
+  });
+
+  it('renders empty when no criteria config is provided', () => {
+    useCriteriaConfig.mockReturnValue([]);
+
+    renderWithIntl(<AssessmentCriteria criteria={[]} />);
+
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+
+  it('handles missing selected options gracefully', () => {
+    const configWithMissingOptions = [
       {
-        name: 'Criterion Name',
-        description: 'Criterion Description',
-        options: {
-          1: {
-            label: 'Selected Option 1',
-            points: 5,
-          },
-        },
+        name: 'Criterion With Missing Option',
+        description: 'Description',
+        options: {},
       },
-      {
-        name: 'Criterion Name 2',
-        description: 'Criterion Description 2',
-        options: {
-          2: {
-            label: 'Selected Option 2',
-            points: 10,
-          },
+    ];
+
+    useCriteriaConfig.mockReturnValue(configWithMissingOptions);
+
+    const propsWithMissingOption = {
+      criteria: [
+        {
+          selectedOption: 999,
+          feedback: 'Some feedback',
         },
-      },
-    ]);
-    const wrapper = shallow(<AssessmentCriteria {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+      ],
+    };
+
+    renderWithIntl(<AssessmentCriteria {...propsWithMissingOption} />);
+
+    expect(
+      screen.getByRole('heading', { name: 'Criterion With Missing Option' }),
+    ).toBeTruthy();
+
+    expect(screen.getByText('Some feedback')).toBeInTheDocument();
 
-    // one for each criteria and one for overall feedback
-    expect(wrapper.instance.findByType('Feedback').length).toBe(3);
+    expect(screen.queryByText(/Points/)).toBeNull();
   });
 
-  it('renders without props', () => {
-    useCriteriaConfig.mockReturnValue([]);
-    const wrapper = shallow(<AssessmentCriteria criteria={[]} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('passes correct step label to comment headers', () => {
+    useCriteriaConfig.mockReturnValue([mockCriteriaConfig[0]]);
+
+    const propsWithStepLabel = {
+      criteria: [
+        {
+          selectedOption: 1,
+          feedback: 'Test feedback',
+        },
+      ],
+      stepLabel: 'Self Assessment',
+    };
+
+    renderWithIntl(<AssessmentCriteria {...propsWithStepLabel} />);
 
-    expect(wrapper.instance.findByType('Feedback').length).toBe(0);
+    expect(screen.getByText('Self Assessment comments')).toBeInTheDocument();
   });
 });
diff --git a/src/components/Assessment/ReadonlyAssessment/CollapsibleAssessment.test.jsx b/src/components/Assessment/ReadonlyAssessment/CollapsibleAssessment.test.jsx
index 7d6c7731..9d115df6 100644
--- a/src/components/Assessment/ReadonlyAssessment/CollapsibleAssessment.test.jsx
+++ b/src/components/Assessment/ReadonlyAssessment/CollapsibleAssessment.test.jsx
@@ -1,7 +1,26 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import CollapsibleAssessment from './CollapsibleAssessment';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+const messages = {
+  'frontend-app-ora.grade': '{stepLabel} grade:',
+  'ora-collapsible-comment.unweightedGrade': '{stepLabel} grade',
+  'frontend-app-ora.gradePoints': '{earned} / {possible}',
+  'ora-collapsible-comment.submittedAssessment': 'Submitted assessment',
+};
+
+const renderWithIntl = (component) => render(
+  <IntlProvider locale="en" messages={messages}>
+    {component}
+  </IntlProvider>,
+);
+
 describe('<CollapsibleAssessment />', () => {
   const defaultProps = {
     stepScore: {
@@ -12,25 +31,45 @@ describe('<CollapsibleAssessment />', () => {
     defaultOpen: true,
   };
 
-  const renderComponent = (props = {}) => shallow(
-    <CollapsibleAssessment {...props}>
-      <div>Children</div>
-    </CollapsibleAssessment>,
-  );
+  it('renders with step label and score', () => {
+    renderWithIntl(
+      <CollapsibleAssessment {...defaultProps}>
+        <div>Children</div>
+      </CollapsibleAssessment>,
+    );
+
+    expect(screen.getByRole('button')).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /Step Label grade/ })).toBeTruthy();
+    expect(screen.getByText(/5.*\/.*10/)).toBeTruthy();
+    expect(screen.getByText('Children')).toBeTruthy();
+  });
 
-  it('renders the component', () => {
-    const wrapper = renderComponent(defaultProps);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders with minimal props', () => {
+    renderWithIntl(
+      <CollapsibleAssessment>
+        <div>Children</div>
+      </CollapsibleAssessment>,
+    );
 
-    expect(wrapper.instance.findByType('Collapsible')[0].props.open).toBe(true);
+    expect(screen.getByRole('button')).toBeTruthy();
+    expect(screen.getByRole('heading', { name: 'Submitted assessment' })).toBeTruthy();
+    expect(screen.queryByText('Children')).toBeNull();
   });
 
-  it('renders without props', () => {
-    const wrapper = renderComponent();
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders with step label but no score', () => {
+    const propsWithoutScore = {
+      stepLabel: 'Peer Assessment',
+      defaultOpen: true,
+    };
 
-    expect(wrapper.instance.findByType('Collapsible')[0].props.open).toBe(
-      false,
+    renderWithIntl(
+      <CollapsibleAssessment {...propsWithoutScore}>
+        <div>Test content</div>
+      </CollapsibleAssessment>,
     );
+
+    expect(screen.getByRole('heading', { name: 'Peer Assessment grade' })).toBeTruthy();
+    expect(screen.queryByText(/\d+ \/ \d+/)).toBeNull();
+    expect(screen.getByText('Test content')).toBeTruthy();
   });
 });
diff --git a/src/components/Assessment/ReadonlyAssessment/Feedback.test.jsx b/src/components/Assessment/ReadonlyAssessment/Feedback.test.jsx
index 6924ce50..413a6ad5 100644
--- a/src/components/Assessment/ReadonlyAssessment/Feedback.test.jsx
+++ b/src/components/Assessment/ReadonlyAssessment/Feedback.test.jsx
@@ -1,8 +1,32 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import Feedback from './Feedback';
 
-jest.mock('components/InfoPopover', () => 'InfoPopover');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+jest.mock('components/InfoPopover', () => {
+  // eslint-disable-next-line react/prop-types
+  const MockInfoPopover = ({ children }) => <div>{children}</div>;
+  return MockInfoPopover;
+});
+
+const messages = {
+  'frontend-app-ora.readMore': 'Read more',
+  'frontend-app-ora.readLess': 'Read less',
+  'ora-collapsible-comment.comment': 'Comments',
+  'ora-collapsible-comment.stepComment': '{step} comment',
+  'ora-collapsible-comment.points': 'Points',
+};
+
+const renderWithIntl = (component) => render(
+  <IntlProvider locale="en" messages={messages}>
+    {component}
+  </IntlProvider>,
+);
 
 describe('<Feedback />', () => {
   const props = {
@@ -14,32 +38,62 @@ describe('<Feedback />', () => {
     commentBody: 'Comment Body',
   };
 
-  it('renders the component', () => {
-    const wrapper = shallow(<Feedback {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders with all props', () => {
+    renderWithIntl(<Feedback {...props} />);
 
-    expect(wrapper.instance.findByType('Collapsible.Advanced').length).toBe(1);
+    expect(
+      screen.getByRole('heading', { name: 'Criterion Name' }),
+    ).toBeTruthy();
+    expect(screen.getByText(/Selected Option.*5.*Points/)).toBeTruthy();
+    expect(
+      screen.getByRole('button', { name: /Comment Header comment/ }),
+    ).toBeTruthy();
+    expect(screen.getByText('Comment Body')).toBeTruthy();
   });
 
-  it('render without props', () => {
-    const wrapper = shallow(<Feedback criterionName="" commentBody="" />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders with minimal required props', () => {
+    renderWithIntl(
+      <Feedback criterionName="Test Criterion" commentBody="Test Comment" />,
+    );
 
-    expect(wrapper.instance.findByType('Collapsible.Advanced').length).toBe(0);
+    expect(
+      screen.getByRole('heading', { name: 'Test Criterion' }),
+    ).toBeTruthy();
+    expect(screen.queryByText(/Points/)).toBeNull();
+    expect(screen.getByRole('button', { name: /Comments/ })).toBeTruthy();
+    expect(screen.getByText('Test Comment')).toBeTruthy();
   });
 
   it('renders without selectedOption', () => {
-    const wrapper = shallow(<Feedback {...props} selectedOption={null} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    const propsWithoutOption = { ...props, selectedOption: null };
+    renderWithIntl(<Feedback {...propsWithoutOption} />);
+
+    expect(
+      screen.getByRole('heading', { name: 'Criterion Name' }),
+    ).toBeTruthy();
+    expect(screen.queryByText(/Selected Option/)).toBeNull();
+    expect(screen.queryByText(/Points/)).toBeNull();
   });
 
   it('renders without criterionDescription', () => {
-    const wrapper = shallow(<Feedback {...props} criterionDescription={null} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    const propsWithoutDescription = { ...props, criterionDescription: null };
+    renderWithIntl(<Feedback {...propsWithoutDescription} />);
+
+    expect(
+      screen.getByRole('heading', { name: 'Criterion Name' }),
+    ).toBeTruthy();
+    expect(screen.getByText(/Selected Option.*5.*Points/)).toBeTruthy();
   });
 
   it('renders without commentBody', () => {
-    const wrapper = shallow(<Feedback {...props} commentBody="" />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    const propsWithoutComment = { ...props, commentBody: '' };
+    renderWithIntl(<Feedback {...propsWithoutComment} />);
+
+    expect(
+      screen.getByRole('heading', { name: 'Criterion Name' }),
+    ).toBeTruthy();
+    expect(screen.getByText(/Selected Option.*5.*Points/)).toBeTruthy();
+    expect(screen.queryByRole('button')).toBeNull();
+    expect(screen.queryByText('Comment Body')).toBeNull();
   });
 });
diff --git a/src/components/Assessment/ReadonlyAssessment/__snapshots__/AssessmentCriteria.test.jsx.snap b/src/components/Assessment/ReadonlyAssessment/__snapshots__/AssessmentCriteria.test.jsx.snap
deleted file mode 100644
index 34c66b74..00000000
--- a/src/components/Assessment/ReadonlyAssessment/__snapshots__/AssessmentCriteria.test.jsx.snap
+++ /dev/null
@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<AssessmentCriteria /> renders the component 1`] = `
-<Fragment>
-  <Feedback
-    commentBody="Feedback 1"
-    commentHeader="Step Label comments"
-    criterionDescription="Criterion Description"
-    criterionName="Criterion Name"
-    defaultOpen={true}
-    key="Criterion Name"
-    selectedOption="Selected Option 1"
-    selectedPoints={5}
-  />
-  <Feedback
-    commentBody="Feedback 2"
-    commentHeader="Step Label comments"
-    criterionDescription="Criterion Description 2"
-    criterionName="Criterion Name 2"
-    defaultOpen={true}
-    key="Criterion Name 2"
-    selectedOption="Selected Option 2"
-    selectedPoints={10}
-  />
-  <Fragment>
-    <hr />
-    <Feedback
-      commentBody="Overall Feedback"
-      commentHeader="Step Label"
-      criterionDescription={null}
-      criterionName="Overall feedback"
-      defaultOpen={true}
-      selectedOption={null}
-      selectedPoints={null}
-    />
-  </Fragment>
-</Fragment>
-`;
-
-exports[`<AssessmentCriteria /> renders without props 1`] = `<Fragment />`;
diff --git a/src/components/Assessment/ReadonlyAssessment/__snapshots__/CollapsibleAssessment.test.jsx.snap b/src/components/Assessment/ReadonlyAssessment/__snapshots__/CollapsibleAssessment.test.jsx.snap
deleted file mode 100644
index efe09632..00000000
--- a/src/components/Assessment/ReadonlyAssessment/__snapshots__/CollapsibleAssessment.test.jsx.snap
+++ /dev/null
@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<CollapsibleAssessment /> renders the component 1`] = `
-<Collapsible
-  onToggle={[Function]}
-  open={true}
-  title={
-    <h3>
-      Step Label grade:
-      5 / 10
-    </h3>
-  }
->
-  <div>
-    Children
-  </div>
-</Collapsible>
-`;
-
-exports[`<CollapsibleAssessment /> renders without props 1`] = `
-<Collapsible
-  onToggle={[Function]}
-  open={false}
-  title={
-    <h3>
-      Submitted assessment
-    </h3>
-  }
->
-  <div>
-    Children
-  </div>
-</Collapsible>
-`;
diff --git a/src/components/Assessment/ReadonlyAssessment/__snapshots__/Feedback.test.jsx.snap b/src/components/Assessment/ReadonlyAssessment/__snapshots__/Feedback.test.jsx.snap
deleted file mode 100644
index 799581a6..00000000
--- a/src/components/Assessment/ReadonlyAssessment/__snapshots__/Feedback.test.jsx.snap
+++ /dev/null
@@ -1,224 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Feedback /> render without props 1`] = `
-<Fragment>
-  <div
-    className=""mt-2"
-  >
-    <div
-      className="d-flex justify-content-between align-items-center"
-    >
-      <h5
-        className="mb-0"
-      />
-    </div>
-  </div>
-</Fragment>
-`;
-
-exports[`<Feedback /> renders the component 1`] = `
-<Fragment>
-  <div
-    className=""mt-2"
-  >
-    <div
-      className="d-flex justify-content-between align-items-center"
-    >
-      <h5
-        className="mb-0"
-      >
-        Criterion Name
-      </h5>
-      <InfoPopover>
-        <p>
-          Criterion Description
-        </p>
-      </InfoPopover>
-    </div>
-    <p>
-      Selected Option
-      : 
-      5
-       
-      Points
-    </p>
-  </div>
-  <div
-    className="bg-gray-100 p-3"
-  >
-    <Collapsible.Advanced
-      onToggle={[Function]}
-      open={true}
-    >
-      <Collapsible.Trigger
-        className="d-flex justify-content-between"
-      >
-        <h5
-          className="mb-0"
-        >
-          Comment Header comment
-        </h5>
-        <div
-          className="d-flex mb-0 small"
-        >
-          <span>
-            Read less
-          </span>
-          <Icon />
-        </div>
-      </Collapsible.Trigger>
-      <Collapsible.Body
-        className="pt-2"
-      >
-        <p>
-          Comment Body
-        </p>
-      </Collapsible.Body>
-    </Collapsible.Advanced>
-  </div>
-</Fragment>
-`;
-
-exports[`<Feedback /> renders without commentBody 1`] = `
-<Fragment>
-  <div
-    className=""mt-2"
-  >
-    <div
-      className="d-flex justify-content-between align-items-center"
-    >
-      <h5
-        className="mb-0"
-      >
-        Criterion Name
-      </h5>
-      <InfoPopover>
-        <p>
-          Criterion Description
-        </p>
-      </InfoPopover>
-    </div>
-    <p>
-      Selected Option
-      : 
-      5
-       
-      Points
-    </p>
-  </div>
-</Fragment>
-`;
-
-exports[`<Feedback /> renders without criterionDescription 1`] = `
-<Fragment>
-  <div
-    className=""mt-2"
-  >
-    <div
-      className="d-flex justify-content-between align-items-center"
-    >
-      <h5
-        className="mb-0"
-      >
-        Criterion Name
-      </h5>
-    </div>
-    <p>
-      Selected Option
-      : 
-      5
-       
-      Points
-    </p>
-  </div>
-  <div
-    className="bg-gray-100 p-3"
-  >
-    <Collapsible.Advanced
-      onToggle={[Function]}
-      open={true}
-    >
-      <Collapsible.Trigger
-        className="d-flex justify-content-between"
-      >
-        <h5
-          className="mb-0"
-        >
-          Comment Header comment
-        </h5>
-        <div
-          className="d-flex mb-0 small"
-        >
-          <span>
-            Read less
-          </span>
-          <Icon />
-        </div>
-      </Collapsible.Trigger>
-      <Collapsible.Body
-        className="pt-2"
-      >
-        <p>
-          Comment Body
-        </p>
-      </Collapsible.Body>
-    </Collapsible.Advanced>
-  </div>
-</Fragment>
-`;
-
-exports[`<Feedback /> renders without selectedOption 1`] = `
-<Fragment>
-  <div
-    className=""mt-2"
-  >
-    <div
-      className="d-flex justify-content-between align-items-center"
-    >
-      <h5
-        className="mb-0"
-      >
-        Criterion Name
-      </h5>
-      <InfoPopover>
-        <p>
-          Criterion Description
-        </p>
-      </InfoPopover>
-    </div>
-  </div>
-  <div
-    className="bg-gray-100 p-3"
-  >
-    <Collapsible.Advanced
-      onToggle={[Function]}
-      open={true}
-    >
-      <Collapsible.Trigger
-        className="d-flex justify-content-between"
-      >
-        <h5
-          className="mb-0"
-        >
-          Comment Header comment
-        </h5>
-        <div
-          className="d-flex mb-0 small"
-        >
-          <span>
-            Read less
-          </span>
-          <Icon />
-        </div>
-      </Collapsible.Trigger>
-      <Collapsible.Body
-        className="pt-2"
-      >
-        <p>
-          Comment Body
-        </p>
-      </Collapsible.Body>
-    </Collapsible.Advanced>
-  </div>
-</Fragment>
-`;
diff --git a/src/views/XBlockStudioView/components/StudioSchedule/__snapshots__/index.test.jsx.snap b/src/views/XBlockStudioView/components/StudioSchedule/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index d2a96b5f..00000000
--- a/src/views/XBlockStudioView/components/StudioSchedule/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,85 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<StudioSchedule /> render with assesssment steps 1`] = `
-<Collapsible
-  onToggle={[MockFunction toggleSchedule]}
-  open={true}
-  title={
-    <h3
-      className="py-3"
-    >
-      Schedule
-    </h3>
-  }
->
-  <div>
-    <p>
-      <strong>
-        Response
-         
-        start: 
-      </strong>
-      <FormatDateTime
-        date="2020-01-01T00:00:00Z"
-      />
-    </p>
-    <p>
-      <strong>
-        Response
-         
-        due: 
-      </strong>
-      <FormatDateTime
-        date="2020-01-01T00:00:00Z"
-      />
-    </p>
-    <StepInfo
-      abc="def"
-      key="self"
-      stepName="Self assessment"
-    />
-    <StepInfo
-      ghi="jkl"
-      key="peer"
-      stepName="Peer assessment"
-    />
-  </div>
-</Collapsible>
-`;
-
-exports[`<StudioSchedule /> render without assesssment steps 1`] = `
-<Collapsible
-  onToggle={[MockFunction toggleSchedule]}
-  open={true}
-  title={
-    <h3
-      className="py-3"
-    >
-      Schedule
-    </h3>
-  }
->
-  <div>
-    <p>
-      <strong>
-        Response
-         
-        start: 
-      </strong>
-      <FormatDateTime
-        date="2020-01-01T00:00:00Z"
-      />
-    </p>
-    <p>
-      <strong>
-        Response
-         
-        due: 
-      </strong>
-      <FormatDateTime
-        date="2020-01-01T00:00:00Z"
-      />
-    </p>
-  </div>
-</Collapsible>
-`;
diff --git a/src/views/XBlockStudioView/components/StudioSchedule/index.test.jsx b/src/views/XBlockStudioView/components/StudioSchedule/index.test.jsx
index 31fd1189..8d9b5fd3 100644
--- a/src/views/XBlockStudioView/components/StudioSchedule/index.test.jsx
+++ b/src/views/XBlockStudioView/components/StudioSchedule/index.test.jsx
@@ -1,9 +1,17 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { useORAConfigData } from 'hooks/app';
 import { stepNames } from 'constants/index';
 
 import StudioSchedule from './index';
+/* eslint-disable react/prop-types */
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
 
 jest.mock('hooks/app', () => ({
   useORAConfigData: jest.fn(),
@@ -14,8 +22,29 @@ jest.mock('../XBlockStudioViewProvider', () => ({
     toggleSchedule: jest.fn().mockName('toggleSchedule'),
   }),
 }));
-jest.mock('./FormatDateTime', () => 'FormatDateTime');
-jest.mock('./StepInfo', () => 'StepInfo');
+jest.mock('./FormatDateTime', () => ({ date }) => (
+  <div>FormatDateTime: {date}</div>
+));
+jest.mock('./StepInfo', () => ({ stepName, ...props }) => (
+  <div>
+    StepInfo: {stepName} {JSON.stringify(props)}
+  </div>
+));
+
+const defaultMessages = {
+  'frontend-app-ora.xblock-studio-view.schedule.scheduleHeader': 'Schedule',
+  'frontend-app-ora.xblock-studio-view.schedule.responseLabel': 'Response',
+  'frontend-app-ora.xblock-studio-view.schedule.startLabel': 'start: ',
+  'frontend-app-ora.xblock-studio-view.schedule.dueLabel': 'due: ',
+  'frontend-app-ora.xblock-studio-view.selfLabel': 'Self assessment',
+  'frontend-app-ora.xblock-studio-view.peerLabel': 'Peer assessment',
+};
+
+const renderWithIntl = (component) => render(
+  <IntlProvider locale="en" messages={defaultMessages}>
+    {component}
+  </IntlProvider>,
+);
 
 describe('<StudioSchedule />', () => {
   it('render without assesssment steps', () => {
@@ -29,10 +58,11 @@ describe('<StudioSchedule />', () => {
       },
     });
 
-    const wrapper = shallow(<StudioSchedule />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<StudioSchedule />);
 
-    expect(wrapper.instance.findByType('StepInfo')).toHaveLength(0);
+    expect(screen.getByText('Schedule')).toBeInTheDocument();
+    expect(screen.getByText(/Response start:/)).toBeInTheDocument();
+    expect(screen.getByText(/Response due:/)).toBeInTheDocument();
   });
 
   it('render with assesssment steps', () => {
@@ -53,9 +83,10 @@ describe('<StudioSchedule />', () => {
       },
     });
 
-    const wrapper = shallow(<StudioSchedule />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    const { container } = renderWithIntl(<StudioSchedule />);
 
-    expect(wrapper.instance.findByType('StepInfo')).toHaveLength(2);
+    expect(container.textContent).toContain('Schedule');
+    expect(container.textContent).toContain('StepInfo: Self assessment');
+    expect(container.textContent).toContain('StepInfo: Peer assessment');
   });
 });
diff --git a/src/views/XBlockStudioView/components/StudioViewSettings/__snapshots__/index.test.jsx.snap b/src/views/XBlockStudioView/components/StudioViewSettings/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index f1e19d75..00000000
--- a/src/views/XBlockStudioView/components/StudioViewSettings/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,127 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<StudioViewSettings /> render with leaderboardConfig and enable everything 1`] = `
-<Collapsible
-  onToggle={[MockFunction toggleStudioViewSetting]}
-  open={true}
-  title={
-    <h3
-      className="py-3"
-    >
-      Settings
-    </h3>
-  }
->
-  <div>
-    <p>
-      <strong>
-        Text response: 
-      </strong>
-      <RequiredConfig
-        required={true}
-      />
-    </p>
-    <p>
-      <strong>
-        Response editor: 
-      </strong>
-      <span>
-        WYSIWYG editor
-      </span>
-    </p>
-    <FileUploadConfig />
-    <p>
-      <strong>
-        Allow LaTeX responses: 
-      </strong>
-      <span>
-        True
-      </span>
-    </p>
-    <p
-      data-testid="leaderboard-test-id"
-    >
-      <strong>
-        Top responses: 
-      </strong>
-      <span>
-        10
-      </span>
-    </p>
-    <p>
-      <strong>
-        Teams enabled: 
-      </strong>
-      <span>
-        True
-      </span>
-    </p>
-    <p>
-      <strong>
-        Show rubric during response: 
-      </strong>
-      <span>
-        False
-      </span>
-    </p>
-  </div>
-</Collapsible>
-`;
-
-exports[`<StudioViewSettings /> render without leaderboardConfig and disable everything 1`] = `
-<Collapsible
-  onToggle={[MockFunction toggleStudioViewSetting]}
-  open={true}
-  title={
-    <h3
-      className="py-3"
-    >
-      Settings
-    </h3>
-  }
->
-  <div>
-    <p>
-      <strong>
-        Text response: 
-      </strong>
-      <RequiredConfig
-        required={false}
-      />
-    </p>
-    <p>
-      <strong>
-        Response editor: 
-      </strong>
-      <span>
-        Text editor
-      </span>
-    </p>
-    <FileUploadConfig />
-    <p>
-      <strong>
-        Allow LaTeX responses: 
-      </strong>
-      <span>
-        False
-      </span>
-    </p>
-    <p>
-      <strong>
-        Teams enabled: 
-      </strong>
-      <span>
-        False
-      </span>
-    </p>
-    <p>
-      <strong>
-        Show rubric during response: 
-      </strong>
-      <span>
-        False
-      </span>
-    </p>
-  </div>
-</Collapsible>
-`;
diff --git a/src/views/XBlockStudioView/components/StudioViewSettings/index.test.jsx b/src/views/XBlockStudioView/components/StudioViewSettings/index.test.jsx
index 100c7d0e..ac476a47 100644
--- a/src/views/XBlockStudioView/components/StudioViewSettings/index.test.jsx
+++ b/src/views/XBlockStudioView/components/StudioViewSettings/index.test.jsx
@@ -1,8 +1,16 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { useORAConfigData } from 'hooks/app';
 
 import StudioViewSettings from './index';
+/* eslint-disable react/prop-types */
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
 
 jest.mock('hooks/app', () => ({
   useORAConfigData: jest.fn(),
@@ -13,8 +21,33 @@ jest.mock('../XBlockStudioViewProvider', () => ({
     toggleStudioViewSetting: jest.fn().mockName('toggleStudioViewSetting'),
   }),
 }));
-jest.mock('./RequiredConfig', () => 'RequiredConfig');
-jest.mock('./FileUploadConfig', () => 'FileUploadConfig');
+jest.mock('./RequiredConfig', () => ({ required }) => (
+  <span>RequiredConfig: {required ? 'true' : 'false'}</span>
+));
+jest.mock('./FileUploadConfig', () => () => <div>FileUploadConfig</div>);
+
+const defaultMessages = {
+  'frontend-app-ora.xblock-studio-view.settingsHeader': 'Settings',
+  'frontend-app-ora.xblock-studio-view.textResponseLabel': 'Text response: ',
+  'frontend-app-ora.xblock-studio-view.responseEditorLabel':
+    'Response editor: ',
+  'frontend-app-ora.xblock-studio-view.textEditorLabel': 'Text',
+  'frontend-app-ora.xblock-studio-view.wysiwygEditorLabel': 'WYSIWYG',
+  'frontend-app-ora.xblock-studio-view.allowLaTexResponsesLabel':
+    'Allow LaTeX responses: ',
+  'frontend-app-ora.xblock-studio-view.trueLabel': 'True',
+  'frontend-app-ora.xblock-studio-view.falseLabel': 'False',
+  'frontend-app-ora.xblock-studio-view.topResponsesLabel': 'Top responses: ',
+  'frontend-app-ora.xblock-studio-view.teamsEnabledLabel': 'Teams enabled: ',
+  'frontend-app-ora.xblock-studio-view.showRubricDuringResponseLabel':
+    'Show rubric during response: ',
+};
+
+const renderWithIntl = (component) => render(
+  <IntlProvider locale="en" messages={defaultMessages}>
+    {component}
+  </IntlProvider>,
+);
 
 describe('<StudioViewSettings />', () => {
   it('render without leaderboardConfig and disable everything', () => {
@@ -31,16 +64,25 @@ describe('<StudioViewSettings />', () => {
       },
       rubricConfig: {
         enabled: false,
+        showDuringResponse: false,
       },
       leaderboardConfig: {
         enabled: false,
       },
     });
 
-    const wrapper = shallow(<StudioViewSettings />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<StudioViewSettings />);
 
-    expect(wrapper.instance.findByTestId('leaderboard-test-id').length).toBe(0);
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+    expect(screen.getByText(/Text response:/)).toBeInTheDocument();
+    expect(screen.getByText('RequiredConfig: false')).toBeInTheDocument();
+    expect(screen.getByText(/Response editor:/)).toBeInTheDocument();
+    expect(screen.getByText(/Allow LaTeX responses:/)).toBeInTheDocument();
+    expect(screen.getByText(/Teams enabled:/)).toBeInTheDocument();
+    expect(
+      screen.getByText(/Show rubric during response:/),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/Top responses:/)).not.toBeInTheDocument();
   });
 
   it('render with leaderboardConfig and enable everything', () => {
@@ -57,6 +99,7 @@ describe('<StudioViewSettings />', () => {
       },
       rubricConfig: {
         enabled: true,
+        showDuringResponse: true,
       },
       leaderboardConfig: {
         enabled: true,
@@ -64,9 +107,11 @@ describe('<StudioViewSettings />', () => {
       },
     });
 
-    const wrapper = shallow(<StudioViewSettings />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<StudioViewSettings />);
 
-    expect(wrapper.instance.findByTestId('leaderboard-test-id').length).toBe(1);
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+    expect(screen.getByText('RequiredConfig: true')).toBeInTheDocument();
+    expect(screen.getByText(/Top responses:/)).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
   });
 });