diff --git a/src/components/Assessment/ReadonlyAssessment/ReadOnlyAssessment.test.jsx b/src/components/Assessment/ReadonlyAssessment/ReadOnlyAssessment.test.jsx
index abf848be..c4fb6a45 100644
--- a/src/components/Assessment/ReadonlyAssessment/ReadOnlyAssessment.test.jsx
+++ b/src/components/Assessment/ReadonlyAssessment/ReadOnlyAssessment.test.jsx
@@ -1,9 +1,36 @@
-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 ReadOnlyAssessment from './ReadOnlyAssessment';
 
-jest.mock('./CollapsibleAssessment', () => 'CollapsibleAssessment');
-jest.mock('./AssessmentCriteria', () => 'AssessmentCriteria');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+/* eslint-disable react/prop-types */
+jest.mock(
+  './CollapsibleAssessment',
+  () => ({
+    children, stepLabel, stepScore, defaultOpen,
+  }) => (
+    <section aria-label="Collapsible Assessment">
+      <div aria-label="Assessment Properties">
+        stepLabel: {stepLabel || 'none'}, stepScore:{' '}
+        {stepScore ? `${stepScore.earned}/${stepScore.total}` : 'none'},
+        defaultOpen: {defaultOpen?.toString() || 'false'}
+      </div>
+      {children}
+    </section>
+  ),
+);
+
+jest.mock('./AssessmentCriteria', () => ({ stepLabel, ...props }) => (
+  <article aria-label={`Assessment Criteria for ${stepLabel || 'unknown'}`}>
+    AssessmentCriteria - stepLabel: {stepLabel || 'none'}
+    <div aria-label="Criteria Properties">{JSON.stringify(props)}</div>
+  </article>
+));
 
 describe('<ReadOnlyAssessment />', () => {
   const props = {
@@ -15,16 +42,33 @@ describe('<ReadOnlyAssessment />', () => {
       earned: 5,
       total: 10,
     },
+    stepLabel: 'Test Step',
+    defaultOpen: false,
   };
 
-  it('render with assessment', () => {
-    const wrapper = shallow(<ReadOnlyAssessment {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders with single assessment', () => {
+    render(<ReadOnlyAssessment {...props} />);
+
+    expect(screen.getByLabelText('Collapsible Assessment')).toBeInTheDocument();
 
-    expect(wrapper.instance.findByType('AssessmentCriteria').length).toBe(1);
+    const assessmentProps = screen.getByLabelText('Assessment Properties');
+    expect(assessmentProps).toHaveTextContent('stepLabel: Test Step');
+    expect(assessmentProps).toHaveTextContent('stepScore: 5/10');
+    expect(assessmentProps).toHaveTextContent('defaultOpen: false');
+
+    const assessmentCriteria = screen.getAllByLabelText(
+      /Assessment Criteria for/,
+    );
+    expect(assessmentCriteria).toHaveLength(1);
+    expect(assessmentCriteria[0]).toHaveTextContent(
+      'AssessmentCriteria - stepLabel: Test Step',
+    );
+
+    const criteriaProps = screen.getByLabelText('Criteria Properties');
+    expect(criteriaProps).toHaveTextContent('"abc":"def"');
   });
 
-  it('render with assessments', () => {
+  it('renders with multiple assessments', () => {
     const assessments = [
       {
         abc: 'def',
@@ -33,14 +77,43 @@ describe('<ReadOnlyAssessment />', () => {
         ghi: 'jkl',
       },
     ];
-    const wrapper = shallow(<ReadOnlyAssessment {...props} assessments={assessments} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<ReadOnlyAssessment {...props} assessments={assessments} />);
+
+    expect(screen.getByLabelText('Collapsible Assessment')).toBeInTheDocument();
 
-    expect(wrapper.instance.findByType('AssessmentCriteria').length).toBe(2);
+    const assessmentProps = screen.getByLabelText('Assessment Properties');
+    expect(assessmentProps).toHaveTextContent('stepLabel: Test Step');
+    expect(assessmentProps).toHaveTextContent('stepScore: 5/10');
+
+    const assessmentCriteria = screen.getAllByLabelText(
+      /Assessment Criteria for/,
+    );
+    expect(assessmentCriteria).toHaveLength(2);
+
+    expect(screen.getByText('Test Step 1:')).toBeInTheDocument();
+    expect(screen.getByText('Test Step 2:')).toBeInTheDocument();
+
+    const criteriaProps = screen.getAllByLabelText('Criteria Properties');
+    expect(criteriaProps[0]).toHaveTextContent('"abc":"def"');
+    expect(criteriaProps[1]).toHaveTextContent('"ghi":"jkl"');
   });
 
   it('renders without props', () => {
-    const wrapper = shallow(<ReadOnlyAssessment />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<ReadOnlyAssessment />);
+
+    expect(screen.getByLabelText('Collapsible Assessment')).toBeInTheDocument();
+
+    const assessmentProps = screen.getByLabelText('Assessment Properties');
+    expect(assessmentProps).toHaveTextContent('stepLabel: none');
+    expect(assessmentProps).toHaveTextContent('stepScore: none');
+    expect(assessmentProps).toHaveTextContent('defaultOpen: false');
+
+    const assessmentCriteria = screen.getAllByLabelText(
+      /Assessment Criteria for/,
+    );
+    expect(assessmentCriteria).toHaveLength(1);
+    expect(assessmentCriteria[0]).toHaveTextContent(
+      'AssessmentCriteria - stepLabel: none',
+    );
   });
 });
diff --git a/src/components/Assessment/ReadonlyAssessment/__snapshots__/ReadOnlyAssessment.test.jsx.snap b/src/components/Assessment/ReadonlyAssessment/__snapshots__/ReadOnlyAssessment.test.jsx.snap
deleted file mode 100644
index 7417a562..00000000
--- a/src/components/Assessment/ReadonlyAssessment/__snapshots__/ReadOnlyAssessment.test.jsx.snap
+++ /dev/null
@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ReadOnlyAssessment /> render with assessment 1`] = `
-<CollapsibleAssessment
-  defaultOpen={false}
-  stepLabel={null}
-  stepScore={
-    {
-      "earned": 5,
-      "total": 10,
-    }
-  }
->
-  <AssessmentCriteria
-    abc="def"
-    stepLabel={null}
-  />
-</CollapsibleAssessment>
-`;
-
-exports[`<ReadOnlyAssessment /> render with assessments 1`] = `
-<div
-  className="my-2"
-  key="Step"
->
-  <CollapsibleAssessment
-    defaultOpen={false}
-    stepLabel={null}
-    stepScore={
-      {
-        "earned": 5,
-        "total": 10,
-      }
-    }
-  >
-    <Fragment
-      key="some_uuid"
-    >
-      <p
-        className="mb-0"
-      >
-         
-        1
-        : 
-      </p>
-      <AssessmentCriteria
-        abc="def"
-        stepLabel={null}
-      />
-      <hr
-        className="my-4"
-      />
-    </Fragment>
-    <Fragment
-      key="some_uuid"
-    >
-      <p
-        className="mb-0"
-      >
-         
-        2
-        : 
-      </p>
-      <AssessmentCriteria
-        ghi="jkl"
-        stepLabel={null}
-      />
-      <hr
-        className="my-4"
-      />
-    </Fragment>
-  </CollapsibleAssessment>
-</div>
-`;
-
-exports[`<ReadOnlyAssessment /> renders without props 1`] = `
-<CollapsibleAssessment
-  defaultOpen={false}
-  stepLabel={null}
-  stepScore={null}
->
-  <AssessmentCriteria
-    stepLabel={null}
-  />
-</CollapsibleAssessment>
-`;
diff --git a/src/components/Assessment/ReadonlyAssessment/__snapshots__/index.test.jsx.snap b/src/components/Assessment/ReadonlyAssessment/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index 22780b5f..00000000
--- a/src/components/Assessment/ReadonlyAssessment/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ReadOnlyAssessmentContainer /> renders the component 1`] = `
-<ReadOnlyAssessment
-  assessment={
-    {
-      "abc": "def",
-    }
-  }
-  assessments={
-    [
-      {
-        "abc": "def",
-      },
-      {
-        "ghi": "jkl",
-      },
-    ]
-  }
-  defaultOpen={true}
-  step="Step"
-  stepLabel={null}
-  stepScore={
-    {
-      "earned": 5,
-      "total": 10,
-    }
-  }
-/>
-`;
-
-exports[`<ReadOnlyAssessmentContainer /> renders without props 1`] = `
-<ReadOnlyAssessment
-  assessment={null}
-  assessments={null}
-  defaultOpen={false}
-  step={null}
-  stepLabel={null}
-  stepScore={null}
-/>
-`;
diff --git a/src/components/Assessment/ReadonlyAssessment/index.test.jsx b/src/components/Assessment/ReadonlyAssessment/index.test.jsx
index c2462630..b62f517e 100644
--- a/src/components/Assessment/ReadonlyAssessment/index.test.jsx
+++ b/src/components/Assessment/ReadonlyAssessment/index.test.jsx
@@ -1,17 +1,68 @@
-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 { useHasSubmitted, useRefreshPageData } from 'hooks/app';
+import { useSubmittedAssessment } from 'hooks/assessment';
 import ReadOnlyAssessmentContainer from '.';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+const mockRefreshPageData = jest.fn();
+
 jest.mock('hooks/app', () => ({
   useHasSubmitted: jest.fn(),
-  useRefreshPageData: jest.fn(),
+  useRefreshPageData: jest.fn(() => mockRefreshPageData),
 }));
 jest.mock('hooks/assessment', () => ({
   useSubmittedAssessment: jest.fn(),
 }));
-jest.mock('./ReadOnlyAssessment', () => 'ReadOnlyAssessment');
+
+/* eslint-disable react/prop-types */
+jest.mock(
+  './ReadOnlyAssessment',
+  () => ({
+    assessment, step, stepScore, stepLabel, defaultOpen, ...rest
+  }) => (
+    <div>
+      <h2>ReadOnly Assessment</h2>
+      {assessment && <div data-assessment="true">Assessment Data</div>}
+      {step && <div data-step="true">Step: {step}</div>}
+      {stepScore && (
+      <div data-stepscore="true">
+        Score: {stepScore.earned}/{stepScore.total}
+      </div>
+      )}
+      {stepLabel && <div data-steplabel="true">Label: {stepLabel}</div>}
+      {defaultOpen !== undefined && (
+      <div data-defaultopen="true">
+        Default Open: {defaultOpen.toString()}
+      </div>
+      )}
+      <div aria-label="Props Data">
+        {JSON.stringify({
+          assessment,
+          step,
+          stepScore,
+          stepLabel,
+          defaultOpen,
+          ...rest,
+        })}
+      </div>
+    </div>
+  ),
+);
 
 describe('<ReadOnlyAssessmentContainer />', () => {
+  beforeEach(() => {
+    useHasSubmitted.mockReturnValue(false);
+    useRefreshPageData.mockReturnValue(mockRefreshPageData);
+    useSubmittedAssessment.mockReturnValue(null);
+    mockRefreshPageData.mockClear();
+  });
+
   const props = {
     assessment: {
       abc: 'def',
@@ -29,15 +80,60 @@ describe('<ReadOnlyAssessmentContainer />', () => {
       earned: 5,
       total: 10,
     },
+    stepLabel: 'Test Label',
     defaultOpen: true,
   };
-  it('renders the component', () => {
-    const wrapper = shallow(<ReadOnlyAssessmentContainer {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+
+  it('renders the component with props', () => {
+    render(<ReadOnlyAssessmentContainer {...props} />);
+
+    expect(
+      screen.getByRole('heading', { name: 'ReadOnly Assessment' }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Assessment Data')).toBeInTheDocument();
+    expect(screen.getByText('Step: Step')).toBeInTheDocument();
+    expect(screen.getByText('Score: 5/10')).toBeInTheDocument();
+    expect(screen.getByText('Label: Test Label')).toBeInTheDocument();
+    expect(screen.getByText('Default Open: true')).toBeInTheDocument();
   });
 
   it('renders without props', () => {
-    const wrapper = shallow(<ReadOnlyAssessmentContainer />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<ReadOnlyAssessmentContainer />);
+
+    expect(
+      screen.getByRole('heading', { name: 'ReadOnly Assessment' }),
+    ).toBeInTheDocument();
+    expect(screen.queryByText('Assessment Data')).not.toBeInTheDocument();
+    expect(screen.queryByText(/Step:/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Score:/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Label:/)).not.toBeInTheDocument();
+  });
+
+  it('passes submitted assessment when user has submitted', () => {
+    const submittedAssessment = { submitted: 'data' };
+    useHasSubmitted.mockReturnValue(true);
+    useSubmittedAssessment.mockReturnValue(submittedAssessment);
+
+    render(<ReadOnlyAssessmentContainer {...props} />);
+
+    expect(screen.getByLabelText('Props Data')).toHaveTextContent(
+      '"submitted":"data"',
+    );
+  });
+
+  it('calls refreshPageData when hasSubmitted is true', () => {
+    useHasSubmitted.mockReturnValue(true);
+
+    render(<ReadOnlyAssessmentContainer {...props} />);
+
+    expect(mockRefreshPageData).toHaveBeenCalled();
+  });
+
+  it('does not call refreshPageData when hasSubmitted is false', () => {
+    useHasSubmitted.mockReturnValue(false);
+
+    render(<ReadOnlyAssessmentContainer {...props} />);
+
+    expect(mockRefreshPageData).not.toHaveBeenCalled();
   });
 });
diff --git a/src/components/CriterionContainer/CriterionFeedback.test.jsx b/src/components/CriterionContainer/CriterionFeedback.test.jsx
index fc4a1abd..2bcaf6cd 100644
--- a/src/components/CriterionContainer/CriterionFeedback.test.jsx
+++ b/src/components/CriterionContainer/CriterionFeedback.test.jsx
@@ -1,4 +1,7 @@
-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 { useViewStep } from 'hooks/routing';
 import { stepNames } from 'constants/index';
@@ -9,9 +12,26 @@ import {
 
 import CriterionFeedback from './CriterionFeedback';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/assessment');
 jest.mock('hooks/routing');
 
+const mockMessages = {
+  'frontend-app-ora.CriterionFeedback.addCommentsLabel': 'Add comments',
+  'frontend-app-ora.CriterionFeedback.optional': '(Optional)',
+  'frontend-app-ora.CriterionFeedback.criterionFeedbackError':
+    'The feedback is required',
+};
+
+const withIntl = (component) => (
+  <IntlProvider locale="en" messages={mockMessages}>
+    {component}
+  </IntlProvider>
+);
+
 describe('<CriterionFeedback />', () => {
   const props = {
     criterion: {
@@ -21,20 +41,24 @@ describe('<CriterionFeedback />', () => {
     criterionIndex: 0,
   };
 
-  it('render empty on student training', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders nothing on student training step', () => {
     useViewStep.mockReturnValue(stepNames.studentTraining);
     useCriterionFeedbackFormFields.mockReturnValue({
       value: '',
       onChange: jest.fn(),
       isInvalid: false,
     });
-    const wrapper = shallow(<CriterionFeedback {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
 
-    expect(wrapper.isEmptyRender()).toBe(true);
+    const { container } = render(withIntl(<CriterionFeedback {...props} />));
+
+    expect(container.firstChild).toBeNull();
   });
 
-  it('render empty on feedback not enable', () => {
+  it('renders nothing when feedback is not enabled', () => {
     useViewStep.mockReturnValue(stepNames.self);
     useCriterionFeedbackFormFields.mockReturnValue({
       value: '',
@@ -42,19 +66,22 @@ describe('<CriterionFeedback />', () => {
       isInvalid: false,
     });
 
-    const wrapper = shallow(<CriterionFeedback
-      {...props}
-      criterion={{
-        feedbackEnabled: false,
-        feedbackRequired: false,
-      }}
-    />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    const { container } = render(
+      withIntl(
+        <CriterionFeedback
+          {...props}
+          criterion={{
+            feedbackEnabled: false,
+            feedbackRequired: false,
+          }}
+        />,
+      ),
+    );
 
-    expect(wrapper.isEmptyRender()).toBe(true);
+    expect(container.firstChild).toBeNull();
   });
 
-  it('render with validation error', () => {
+  it('renders with validation error when required feedback is missing', () => {
     useViewStep.mockReturnValue(stepNames.self);
     useShowValidation.mockReturnValue(true);
     useCriterionFeedbackFormFields.mockReturnValue({
@@ -63,13 +90,34 @@ describe('<CriterionFeedback />', () => {
       isInvalid: true,
     });
 
-    const wrapper = shallow(<CriterionFeedback {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(withIntl(<CriterionFeedback {...props} />));
+
+    expect(
+      screen.getByRole('textbox', { name: /add comments/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('The feedback is required')).toBeInTheDocument();
+  });
+
+  it('renders without validation error when validation is not shown', () => {
+    useViewStep.mockReturnValue(stepNames.self);
+    useShowValidation.mockReturnValue(false);
+    useCriterionFeedbackFormFields.mockReturnValue({
+      value: '',
+      onChange: jest.fn(),
+      isInvalid: false,
+    });
+
+    render(withIntl(<CriterionFeedback {...props} />));
 
-    expect(wrapper.instance.findByType('Form.Control.Feedback').length).toBe(1);
+    expect(
+      screen.getByRole('textbox', { name: /add comments/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText('The feedback is required'),
+    ).not.toBeInTheDocument();
   });
 
-  it('render without validation error', () => {
+  it('renders optional label when feedback is not required', () => {
     useViewStep.mockReturnValue(stepNames.self);
     useShowValidation.mockReturnValue(false);
     useCriterionFeedbackFormFields.mockReturnValue({
@@ -78,9 +126,20 @@ describe('<CriterionFeedback />', () => {
       isInvalid: false,
     });
 
-    const wrapper = shallow(<CriterionFeedback {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(
+      withIntl(
+        <CriterionFeedback
+          {...props}
+          criterion={{
+            feedbackEnabled: true,
+            feedbackRequired: false,
+          }}
+        />,
+      ),
+    );
 
-    expect(wrapper.instance.findByType('Form.Control.Feedback').length).toBe(0);
+    expect(
+      screen.getByRole('textbox', { name: /add comments \(optional\)/i }),
+    ).toBeInTheDocument();
   });
 });
diff --git a/src/components/CriterionContainer/RadioCriterion.test.jsx b/src/components/CriterionContainer/RadioCriterion.test.jsx
index 92dfc5f4..46018e70 100644
--- a/src/components/CriterionContainer/RadioCriterion.test.jsx
+++ b/src/components/CriterionContainer/RadioCriterion.test.jsx
@@ -1,4 +1,7 @@
-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 {
   useShowValidation,
@@ -7,8 +10,27 @@ import {
 } from 'hooks/assessment';
 import RadioCriterion from './RadioCriterion';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/assessment');
 
+const mockMessages = {
+  'frontend-app-ora.RadioCriterion.optionPoints': '{points} points',
+  'frontend-app-ora.RadioCriterion.rubricSelectedError':
+    'Rubric selection is required',
+  'frontend-app-ora.TrainingCriterion.valid': 'Good job!',
+  'frontend-app-ora.TrainingCriterion.invalid':
+    'Reevaluate and select a new score',
+};
+
+const withIntl = (component) => (
+  <IntlProvider locale="en" messages={mockMessages}>
+    {component}
+  </IntlProvider>
+);
+
 describe('<RadioCriterion />', () => {
   const props = {
     criterion: {
@@ -36,73 +58,137 @@ describe('<RadioCriterion />', () => {
     trainingOptionValidity: '',
   };
 
-  it('renders correctly', () => {
-    useShowValidation.mockReturnValueOnce(false);
-    useShowTrainingError.mockReturnValueOnce(false);
-    useCriterionOptionFormFields.mockReturnValueOnce(defaultUseCriterionOptionFormFields);
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
-    const wrapper = shallow(<RadioCriterion {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders radio options correctly', () => {
+    useShowValidation.mockReturnValue(false);
+    useShowTrainingError.mockReturnValue(false);
+    useCriterionOptionFormFields.mockReturnValue(
+      defaultUseCriterionOptionFormFields,
+    );
 
-    expect(wrapper.instance.findByType('Form.Radio').length).toBe(2);
+    render(withIntl(<RadioCriterion {...props} />));
+
+    expect(
+      screen.getByRole('radio', { name: /option 1/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('radio', { name: /option 2/i }),
+    ).toBeInTheDocument();
+
+    expect(screen.getByText('1 points')).toBeInTheDocument();
+    expect(screen.getByText('2 points')).toBeInTheDocument();
+
+    expect(
+      screen.queryByText('Rubric selection is required'),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText('Good job!')).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('Reevaluate and select a new score'),
+    ).not.toBeInTheDocument();
   });
 
   it('renders correctly with no options', () => {
-    useShowValidation.mockReturnValueOnce(false);
-    useShowTrainingError.mockReturnValueOnce(false);
-    useCriterionOptionFormFields.mockReturnValueOnce(defaultUseCriterionOptionFormFields);
-
-    const wrapper = shallow(
-      <RadioCriterion
-        criterion={{ ...props.criterion, options: [] }}
-        criterionIndex={props.criterionIndex}
-      />,
+    useShowValidation.mockReturnValue(false);
+    useShowTrainingError.mockReturnValue(false);
+    useCriterionOptionFormFields.mockReturnValue(
+      defaultUseCriterionOptionFormFields,
     );
-    expect(wrapper.snapshot).toMatchSnapshot();
 
-    expect(wrapper.instance.findByType('Form.Radio').length).toBe(0);
+    render(
+      withIntl(
+        <RadioCriterion
+          criterion={{ ...props.criterion, options: [] }}
+          criterionIndex={props.criterionIndex}
+        />,
+      ),
+    );
+
+    expect(screen.queryByRole('radio')).not.toBeInTheDocument();
   });
 
-  it('renders correctly with validation error', () => {
-    useShowValidation.mockReturnValueOnce(true);
-    useShowTrainingError.mockReturnValueOnce(false);
-    useCriterionOptionFormFields.mockReturnValueOnce({
+  it('renders validation error when invalid', () => {
+    useShowValidation.mockReturnValue(true);
+    useShowTrainingError.mockReturnValue(false);
+    useCriterionOptionFormFields.mockReturnValue({
       ...defaultUseCriterionOptionFormFields,
       isInvalid: true,
     });
 
-    const wrapper = shallow(<RadioCriterion {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(withIntl(<RadioCriterion {...props} />));
+
+    expect(
+      screen.getByRole('radio', { name: /option 1/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('radio', { name: /option 2/i }),
+    ).toBeInTheDocument();
 
-    expect(wrapper.instance.findByType('Form.Control.Feedback').length).toBe(1);
+    expect(
+      screen.getByText('Rubric selection is required'),
+    ).toBeInTheDocument();
   });
 
-  it('renders correctly with training error', () => {
-    useShowValidation.mockReturnValueOnce(false);
-    useShowTrainingError.mockReturnValueOnce(true);
-    useCriterionOptionFormFields.mockReturnValueOnce({
+  it('renders training error when training is invalid', () => {
+    useShowValidation.mockReturnValue(false);
+    useShowTrainingError.mockReturnValue(true);
+    useCriterionOptionFormFields.mockReturnValue({
       ...defaultUseCriterionOptionFormFields,
       trainingOptionValidity: 'invalid',
     });
 
-    const wrapper = shallow(<RadioCriterion {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(withIntl(<RadioCriterion {...props} />));
 
-    expect(wrapper.instance.findByType('Form.Control.Feedback').length).toBe(1);
+    expect(
+      screen.getByRole('radio', { name: /option 1/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('radio', { name: /option 2/i }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByText('Reevaluate and select a new score'),
+    ).toBeInTheDocument();
   });
 
-  it('renders correctly with validation and training error', () => {
-    useShowValidation.mockReturnValueOnce(true);
-    useShowTrainingError.mockReturnValueOnce(true);
-    useCriterionOptionFormFields.mockReturnValueOnce({
+  it('renders both validation and training errors', () => {
+    useShowValidation.mockReturnValue(true);
+    useShowTrainingError.mockReturnValue(true);
+    useCriterionOptionFormFields.mockReturnValue({
       ...defaultUseCriterionOptionFormFields,
       isInvalid: true,
       trainingOptionValidity: 'invalid',
     });
 
-    const wrapper = shallow(<RadioCriterion {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(withIntl(<RadioCriterion {...props} />));
+
+    expect(
+      screen.getByRole('radio', { name: /option 1/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('radio', { name: /option 2/i }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByText('Rubric selection is required'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('Reevaluate and select a new score'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders training success message', () => {
+    useShowValidation.mockReturnValue(false);
+    useShowTrainingError.mockReturnValue(true);
+    useCriterionOptionFormFields.mockReturnValue({
+      ...defaultUseCriterionOptionFormFields,
+      trainingOptionValidity: 'valid',
+    });
+
+    render(withIntl(<RadioCriterion {...props} />));
 
-    expect(wrapper.instance.findByType('Form.Control.Feedback').length).toBe(2);
+    expect(screen.getByText('Good job!')).toBeInTheDocument();
   });
 });
diff --git a/src/components/CriterionContainer/__snapshots__/CriterionFeedback.test.jsx.snap b/src/components/CriterionContainer/__snapshots__/CriterionFeedback.test.jsx.snap
deleted file mode 100644
index 84425e84..00000000
--- a/src/components/CriterionContainer/__snapshots__/CriterionFeedback.test.jsx.snap
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<CriterionFeedback /> render empty on feedback not enable 1`] = `null`;
-
-exports[`<CriterionFeedback /> render empty on student training 1`] = `null`;
-
-exports[`<CriterionFeedback /> render with validation error 1`] = `
-<Form.Group
-  isInvalid={true}
->
-  <Form.Control
-    as="textarea"
-    className="criterion-feedback feedback-input"
-    floatingLabel="Add comments"
-    onChange={[MockFunction]}
-    value=""
-  />
-  <Form.Control.Feedback
-    className="feedback-error-msg"
-    type="invalid"
-  >
-    The feedback is required
-  </Form.Control.Feedback>
-</Form.Group>
-`;
-
-exports[`<CriterionFeedback /> render without validation error 1`] = `
-<Form.Group
-  isInvalid={false}
->
-  <Form.Control
-    as="textarea"
-    className="criterion-feedback feedback-input"
-    floatingLabel="Add comments"
-    onChange={[MockFunction]}
-    value=""
-  />
-</Form.Group>
-`;
diff --git a/src/components/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap b/src/components/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap
deleted file mode 100644
index 93dc382c..00000000
--- a/src/components/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap
+++ /dev/null
@@ -1,136 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<RadioCriterion /> renders correctly 1`] = `
-<Form.RadioSet
-  name="criterionName"
-  value="abc"
->
-  <Form.Radio
-    className="criteria-option"
-    description="1 points"
-    key="option1"
-    onChange={[MockFunction onChange]}
-    value="0"
-  >
-    Option 1
-  </Form.Radio>
-  <Form.Radio
-    className="criteria-option"
-    description="2 points"
-    key="option2"
-    onChange={[MockFunction onChange]}
-    value="1"
-  >
-    Option 2
-  </Form.Radio>
-</Form.RadioSet>
-`;
-
-exports[`<RadioCriterion /> renders correctly with no options 1`] = `
-<Form.RadioSet
-  name="criterionName"
-  value="abc"
-/>
-`;
-
-exports[`<RadioCriterion /> renders correctly with training error 1`] = `
-<Form.RadioSet
-  name="criterionName"
-  value="abc"
->
-  <Form.Radio
-    className="criteria-option"
-    description="1 points"
-    key="option1"
-    onChange={[MockFunction onChange]}
-    value="0"
-  >
-    Option 1
-  </Form.Radio>
-  <Form.Radio
-    className="criteria-option"
-    description="2 points"
-    key="option2"
-    onChange={[MockFunction onChange]}
-    value="1"
-  >
-    Option 2
-  </Form.Radio>
-  <Form.Control.Feedback
-    className="feedback-success-msg"
-    type="invalid"
-  >
-    Reevaluate and select a new score
-  </Form.Control.Feedback>
-</Form.RadioSet>
-`;
-
-exports[`<RadioCriterion /> renders correctly with validation and training error 1`] = `
-<Form.RadioSet
-  name="criterionName"
-  value="abc"
->
-  <Form.Radio
-    className="criteria-option"
-    description="1 points"
-    key="option1"
-    onChange={[MockFunction onChange]}
-    value="0"
-  >
-    Option 1
-  </Form.Radio>
-  <Form.Radio
-    className="criteria-option"
-    description="2 points"
-    key="option2"
-    onChange={[MockFunction onChange]}
-    value="1"
-  >
-    Option 2
-  </Form.Radio>
-  <Form.Control.Feedback
-    className="feedback-error-msg"
-    type="invalid"
-  >
-    Rubric selection is required
-  </Form.Control.Feedback>
-  <Form.Control.Feedback
-    className="feedback-success-msg"
-    type="invalid"
-  >
-    Reevaluate and select a new score
-  </Form.Control.Feedback>
-</Form.RadioSet>
-`;
-
-exports[`<RadioCriterion /> renders correctly with validation error 1`] = `
-<Form.RadioSet
-  name="criterionName"
-  value="abc"
->
-  <Form.Radio
-    className="criteria-option"
-    description="1 points"
-    key="option1"
-    onChange={[MockFunction onChange]}
-    value="0"
-  >
-    Option 1
-  </Form.Radio>
-  <Form.Radio
-    className="criteria-option"
-    description="2 points"
-    key="option2"
-    onChange={[MockFunction onChange]}
-    value="1"
-  >
-    Option 2
-  </Form.Radio>
-  <Form.Control.Feedback
-    className="feedback-error-msg"
-    type="invalid"
-  >
-    Rubric selection is required
-  </Form.Control.Feedback>
-</Form.RadioSet>
-`;
diff --git a/src/components/CriterionContainer/__snapshots__/index.test.jsx.snap b/src/components/CriterionContainer/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index a6540840..00000000
--- a/src/components/CriterionContainer/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,102 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<CriterionContainer /> renders default 1`] = `
-<Form.Group>
-  <Form.Label
-    className="criteria-label"
-  >
-    <span
-      className="criteria-title"
-    >
-      criterionName
-    </span>
-    <InfoPopover>
-      <div
-        className="help-popover-option"
-      >
-        description
-      </div>
-      <hr />
-      <div
-        className="help-popover-option"
-        key="option1"
-      >
-        <strong>
-          Option 1
-        </strong>
-        <br />
-        description1
-      </div>
-      <div
-        className="help-popover-option"
-        key="option2"
-      >
-        <strong>
-          Option 2
-        </strong>
-        <br />
-        description2
-      </div>
-    </InfoPopover>
-  </Form.Label>
-  <div
-    className="rubric-criteria"
-  >
-    <div
-      data-testid="input"
-    >
-      input
-    </div>
-  </div>
-  <div
-    data-testid="feedback"
-  >
-    feedback
-  </div>
-</Form.Group>
-`;
-
-exports[`<CriterionContainer /> renders without input and feedback 1`] = `
-<Form.Group>
-  <Form.Label
-    className="criteria-label"
-  >
-    <span
-      className="criteria-title"
-    >
-      criterionName
-    </span>
-    <InfoPopover>
-      <div
-        className="help-popover-option"
-      >
-        description
-      </div>
-      <hr />
-      <div
-        className="help-popover-option"
-        key="option1"
-      >
-        <strong>
-          Option 1
-        </strong>
-        <br />
-        description1
-      </div>
-      <div
-        className="help-popover-option"
-        key="option2"
-      >
-        <strong>
-          Option 2
-        </strong>
-        <br />
-        description2
-      </div>
-    </InfoPopover>
-  </Form.Label>
-  <div
-    className="rubric-criteria"
-  />
-</Form.Group>
-`;
diff --git a/src/components/CriterionContainer/index.test.jsx b/src/components/CriterionContainer/index.test.jsx
index 28c9870f..ec11c00c 100644
--- a/src/components/CriterionContainer/index.test.jsx
+++ b/src/components/CriterionContainer/index.test.jsx
@@ -1,13 +1,23 @@
-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 CriterionContainer from './index';
 
-jest.mock('components/InfoPopover', () => 'InfoPopover');
+/* eslint-disable react/prop-types */
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+jest.mock('components/InfoPopover', () => ({ children }) => (
+  <div role="tooltip">{children}</div>
+));
 
 describe('<CriterionContainer />', () => {
   const props = {
-    input: <div data-testid="input">input</div>,
-    feedback: <div data-testid="feedback">feedback</div>,
+    input: <div>input</div>,
+    feedback: <div>feedback</div>,
     criterion: {
       name: 'criterionName',
       description: 'description',
@@ -26,19 +36,32 @@ describe('<CriterionContainer />', () => {
     },
   };
 
-  it('renders default', () => {
-    const wrapper = shallow(<CriterionContainer {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders with input and feedback', () => {
+    render(<CriterionContainer {...props} />);
+
+    expect(screen.getByText('criterionName')).toBeInTheDocument();
+
+    expect(screen.getByRole('tooltip')).toHaveTextContent('description');
 
-    expect(wrapper.instance.findByTestId('input').length).toBe(1);
-    expect(wrapper.instance.findByTestId('feedback').length).toBe(1);
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+    expect(screen.getByText('description1')).toBeInTheDocument();
+    expect(screen.getByText('Option 2')).toBeInTheDocument();
+    expect(screen.getByText('description2')).toBeInTheDocument();
+
+    expect(screen.getByText('input')).toBeInTheDocument();
+    expect(screen.getByText('feedback')).toBeInTheDocument();
   });
 
   it('renders without input and feedback', () => {
-    const wrapper = shallow(<CriterionContainer criterion={props.criterion} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<CriterionContainer criterion={props.criterion} />);
+
+    expect(screen.getByText('criterionName')).toBeInTheDocument();
+
+    expect(screen.getByRole('tooltip')).toHaveTextContent('description');
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+    expect(screen.getByText('Option 2')).toBeInTheDocument();
 
-    expect(wrapper.instance.findByTestId('input').length).toBe(0);
-    expect(wrapper.instance.findByTestId('feedback').length).toBe(0);
+    expect(screen.queryByText('input')).not.toBeInTheDocument();
+    expect(screen.queryByText('feedback')).not.toBeInTheDocument();
   });
 });