diff --git a/src/views/AssessmentView/BaseAssessmentView/__snapshots__/index.test.jsx.snap b/src/views/AssessmentView/BaseAssessmentView/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index 1a9c696a..00000000
--- a/src/views/AssessmentView/BaseAssessmentView/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<BaseAssessmentView /> render default 1`] = `
-<div
-  className="assessment-content-layout mr-auto ml-auto"
->
-  <div
-    className="content-wrapper"
-  >
-    <StatusAlert />
-    <Row
-      className="flex-nowrap m-0 mb-3 position-relative"
-    >
-      <div
-        className="w-100"
-      >
-        <h1
-          className="d-inline"
-        >
-          Self grading
-        </h1>
-        <StepProgressIndicator
-          step="self"
-        />
-      </div>
-    </Row>
-    <Row
-      className="flex-nowrap m-0 content-body"
-    >
-      <Col
-        className="p-0"
-      >
-        <Instructions />
-        children
-        <ModalActions />
-      </Col>
-      <Col
-        className="py-0 pr-0 pl-3 col-3 assessment-col"
-      >
-        <Assessment />
-      </Col>
-    </Row>
-  </div>
-</div>
-`;
diff --git a/src/views/AssessmentView/BaseAssessmentView/index.test.jsx b/src/views/AssessmentView/BaseAssessmentView/index.test.jsx
index 8ef1e929..5ac3b97c 100644
--- a/src/views/AssessmentView/BaseAssessmentView/index.test.jsx
+++ b/src/views/AssessmentView/BaseAssessmentView/index.test.jsx
@@ -1,24 +1,121 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { useViewStep } from 'hooks/routing';
-
 import { stepNames } from 'constants/index';
-
+import messages from '../messages';
 import BaseAssessmentView from './index';
 
+/* eslint-disable react/prop-types */
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/routing', () => ({
   useViewStep: jest.fn(),
 }));
-jest.mock('components/Assessment', () => 'Assessment');
-jest.mock('components/Instructions', () => 'Instructions');
-jest.mock('components/ModalActions', () => 'ModalActions');
-jest.mock('components/StatusAlert', () => 'StatusAlert');
-jest.mock('components/StepProgressIndicator', () => 'StepProgressIndicator');
+jest.mock('components/Assessment', () => () => <div>Assessment</div>);
+jest.mock('components/Instructions', () => () => <div>Instructions</div>);
+jest.mock('components/ModalActions', () => () => <div>Modal Actions</div>);
+jest.mock('components/StatusAlert', () => () => <div>Status Alert</div>);
+jest.mock('components/StepProgressIndicator', () => (props) => (
+  <div>Step Progress Indicator: {props.step}</div>
+));
+
+const renderWithIntl = (ui) => {
+  const testMessages = {
+    'frontend-app-ora.selfAssessmentView.header':
+      messages[stepNames.self].defaultMessage,
+    'frontend-app-ora.peerAssessmentView.header':
+      messages[stepNames.peer].defaultMessage,
+    'frontend-app-ora.studentTrainingView.header':
+      messages[stepNames.studentTraining].defaultMessage,
+  };
+
+  return render(
+    <IntlProvider locale="en" messages={testMessages}>
+      {ui}
+    </IntlProvider>,
+  );
+};
 
 describe('<BaseAssessmentView />', () => {
-  it('render default', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with self assessment step', () => {
     useViewStep.mockReturnValue(stepNames.self);
-    const wrapper = shallow(<BaseAssessmentView>children</BaseAssessmentView>);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(
+      <BaseAssessmentView>
+        <div>Test children content</div>
+      </BaseAssessmentView>,
+    );
+
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
+      'Self grading',
+    );
+    expect(screen.getByText('Status Alert')).toBeInTheDocument();
+    expect(screen.getByText('Instructions')).toBeInTheDocument();
+    expect(screen.getByText('Modal Actions')).toBeInTheDocument();
+    expect(screen.getByText('Assessment')).toBeInTheDocument();
+    expect(
+      screen.getByText('Step Progress Indicator: self'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Test children content')).toBeInTheDocument();
+  });
+
+  it('renders with peer assessment step', () => {
+    useViewStep.mockReturnValue(stepNames.peer);
+    renderWithIntl(
+      <BaseAssessmentView>
+        <div>Peer content</div>
+      </BaseAssessmentView>,
+    );
+
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
+      'Grade your peers',
+    );
+    expect(
+      screen.getByText('Step Progress Indicator: peer'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Peer content')).toBeInTheDocument();
+  });
+
+  it('renders with student training step', () => {
+    useViewStep.mockReturnValue(stepNames.studentTraining);
+    renderWithIntl(
+      <BaseAssessmentView>
+        <div>Training content</div>
+      </BaseAssessmentView>,
+    );
+
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
+      'Practice grading',
+    );
+    expect(
+      screen.getByText('Step Progress Indicator: studentTraining'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Training content')).toBeInTheDocument();
+  });
+
+  it('renders all required components', () => {
+    useViewStep.mockReturnValue(stepNames.self);
+    renderWithIntl(
+      <BaseAssessmentView>
+        <div>Child component</div>
+      </BaseAssessmentView>,
+    );
+
+    expect(screen.getByText('Status Alert')).toBeInTheDocument();
+    expect(screen.getByText('Instructions')).toBeInTheDocument();
+    expect(screen.getByText('Modal Actions')).toBeInTheDocument();
+    expect(screen.getByText('Assessment')).toBeInTheDocument();
+    expect(
+      screen.getByText('Step Progress Indicator: self'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Child component')).toBeInTheDocument();
   });
 });
diff --git a/src/views/SubmissionView/SubmissionPrompts.test.jsx b/src/views/SubmissionView/SubmissionPrompts.test.jsx
index a53c81ab..eb971c1b 100644
--- a/src/views/SubmissionView/SubmissionPrompts.test.jsx
+++ b/src/views/SubmissionView/SubmissionPrompts.test.jsx
@@ -1,88 +1,135 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import {
-  usePrompts,
-  useSubmissionConfig,
-} from 'hooks/app';
+import { usePrompts, useSubmissionConfig } from 'hooks/app';
 
 import SubmissionPrompts from './SubmissionPrompts';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/app', () => ({
   usePrompts: jest.fn(),
   useSubmissionConfig: jest.fn(),
 }));
-jest.mock('components/Prompt', () => 'Prompt');
-jest.mock('components/TextResponse', () => 'TextResponse');
-jest.mock('./TextResponseEditor', () => 'TextResponseEditor');
+
+/* eslint-disable react/prop-types */
+jest.mock('components/Prompt', () => ({ prompt }) => (
+  <div>Prompt: {prompt}</div>
+));
+
+jest.mock('components/TextResponse', () => ({ response }) => (
+  <div>Response: {response}</div>
+));
+
+jest.mock('./TextResponseEditor', () => ({ value, onChange, isInValid }) => (
+  <textarea
+    aria-label="Text Response Editor"
+    value={value || ''}
+    onChange={(e) => onChange && onChange(e.target.value)}
+    aria-invalid={isInValid}
+  />
+));
+
+const renderWithIntl = (ui) => render(
+  <IntlProvider locale="en" messages={{}}>
+    {ui}
+  </IntlProvider>,
+);
 
 describe('<SubmissionPrompts />', () => {
-  it('render text response editor when readOnly is false', () => {
+  const mockOnUpdateTextResponse = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockOnUpdateTextResponse.mockImplementation(() => () => {});
+  });
+
+  it('renders text response editor when readOnly is false', () => {
     usePrompts.mockReturnValue(['prompt1', 'prompt2']);
-    useSubmissionConfig.mockReturnValue({ textResponseConfig: { enabled: true } });
+    useSubmissionConfig.mockReturnValue({
+      textResponseConfig: { enabled: true },
+    });
 
-    const wrapper = shallow(
+    renderWithIntl(
       <SubmissionPrompts
         textResponses={['response1', 'response2']}
-        onUpdateTextResponse={jest.fn()}
+        onUpdateTextResponse={mockOnUpdateTextResponse}
         isReadOnly={false}
       />,
     );
 
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('Prompt').length).toBe(2);
-    expect(wrapper.instance.findByType('TextResponseEditor').length).toBe(2);
-    expect(wrapper.instance.findByType('TextResponse').length).toBe(0);
+    expect(screen.getByText('Prompt: prompt1')).toBeInTheDocument();
+    expect(screen.getByText('Prompt: prompt2')).toBeInTheDocument();
+    expect(screen.getAllByLabelText('Text Response Editor')).toHaveLength(2);
+    expect(screen.queryByText(/^Response:/)).not.toBeInTheDocument();
   });
 
-  it('render text response when readOnly is true', () => {
+  it('renders text response when readOnly is true', () => {
     usePrompts.mockReturnValue(['prompt1', 'prompt2']);
-    useSubmissionConfig.mockReturnValue({ textResponseConfig: { enabled: true } });
+    useSubmissionConfig.mockReturnValue({
+      textResponseConfig: { enabled: true },
+    });
 
-    const wrapper = shallow(
+    renderWithIntl(
       <SubmissionPrompts
         textResponses={['response1', 'response2']}
-        onUpdateTextResponse={jest.fn()}
+        onUpdateTextResponse={mockOnUpdateTextResponse}
         isReadOnly
       />,
     );
 
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('Prompt').length).toBe(2);
-    expect(wrapper.instance.findByType('TextResponseEditor').length).toBe(0);
-    expect(wrapper.instance.findByType('TextResponse').length).toBe(2);
+    expect(screen.getByText('Prompt: prompt1')).toBeInTheDocument();
+    expect(screen.getByText('Prompt: prompt2')).toBeInTheDocument();
+    expect(screen.getByText('Response: response1')).toBeInTheDocument();
+    expect(screen.getByText('Response: response2')).toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('Text Response Editor'),
+    ).not.toBeInTheDocument();
   });
 
-  it('render empty prompts', () => {
+  it('renders empty prompts', () => {
     usePrompts.mockReturnValue([]);
-    useSubmissionConfig.mockReturnValue({ textResponseConfig: { enabled: true } });
+    useSubmissionConfig.mockReturnValue({
+      textResponseConfig: { enabled: true },
+    });
 
-    const wrapper = shallow(
+    renderWithIntl(
       <SubmissionPrompts
         textResponses={['response1', 'response2']}
-        onUpdateTextResponse={jest.fn()}
+        onUpdateTextResponse={mockOnUpdateTextResponse}
         isReadOnly
       />,
     );
 
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('Prompt').length).toBe(0);
+    expect(screen.queryByText(/^Prompt:/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/^Response:/)).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('Text Response Editor'),
+    ).not.toBeInTheDocument();
   });
 
-  it('do not render response when textResponseConfig is disabled', () => {
+  it('does not render response when textResponseConfig is disabled', () => {
     usePrompts.mockReturnValue(['prompt1', 'prompt2']);
-    useSubmissionConfig.mockReturnValue({ textResponseConfig: { enabled: false } });
+    useSubmissionConfig.mockReturnValue({
+      textResponseConfig: { enabled: false },
+    });
 
-    const wrapper = shallow(
+    renderWithIntl(
       <SubmissionPrompts
         textResponses={['response1', 'response2']}
-        onUpdateTextResponse={jest.fn()}
+        onUpdateTextResponse={mockOnUpdateTextResponse}
         isReadOnly
       />,
     );
 
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('Prompt').length).toBe(2);
-    expect(wrapper.instance.findByType('TextResponseEditor').length).toBe(0);
-    expect(wrapper.instance.findByType('TextResponse').length).toBe(0);
+    expect(screen.getByText('Prompt: prompt1')).toBeInTheDocument();
+    expect(screen.getByText('Prompt: prompt2')).toBeInTheDocument();
+    expect(screen.queryByText(/^Response:/)).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('Text Response Editor'),
+    ).not.toBeInTheDocument();
   });
 });
diff --git a/src/views/SubmissionView/TextResponseEditor/RichTextEditor.test.jsx b/src/views/SubmissionView/TextResponseEditor/RichTextEditor.test.jsx
index ca33a6ef..e4ad5126 100644
--- a/src/views/SubmissionView/TextResponseEditor/RichTextEditor.test.jsx
+++ b/src/views/SubmissionView/TextResponseEditor/RichTextEditor.test.jsx
@@ -1,8 +1,27 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
 import RichTextEditor from './RichTextEditor';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+/* eslint-disable react/prop-types */
 jest.mock('@tinymce/tinymce-react', () => ({
-  Editor: () => 'Editor',
+  Editor: ({
+    init, disabled, onEditorChange, value,
+  }) => (
+    <textarea
+      aria-label="Rich text editor"
+      disabled={disabled}
+      readOnly={init?.readonly === 1}
+      onChange={(e) => onEditorChange && onEditorChange(e.target.value)}
+      value={value}
+    />
+  ),
 }));
 
 jest.mock('tinymce/tinymce.min', () => 'tinymce');
@@ -13,33 +32,76 @@ jest.mock('tinymce/plugins/code', () => 'code');
 jest.mock('tinymce/plugins/image', () => 'image');
 jest.mock('tinymce/themes/silver', () => 'silver');
 
+const renderWithIntl = (ui) => {
+  const testMessages = {
+    'frontend-app-ora.TextResponse.yourResponse':
+      messages.yourResponse.defaultMessage,
+    'frontend-app-ora.TextResponse.optional': messages.optional.defaultMessage,
+    'frontend-app-ora.TextResponse.required': messages.required.defaultMessage,
+    'frontend-app-ora.TextResponse.requiredField':
+      messages.requiredField.defaultMessage,
+  };
+
+  return render(
+    <IntlProvider locale="en" messages={testMessages}>
+      {ui}
+    </IntlProvider>,
+  );
+};
+
 describe('<RichTextEditor />', () => {
   const props = {
     optional: true,
     disabled: false,
-    value: 'value',
-    onChange: jest.fn().mockName('onChange'),
+    value: 'test value',
+    onChange: jest.fn(),
   };
 
-  it('render optional', () => {
-    const wrapper = shallow(<RichTextEditor {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders optional editor', () => {
+    renderWithIntl(<RichTextEditor {...props} />);
+
+    expect(screen.getByText(/your response \(optional\)/i)).toBeInTheDocument();
+    const editor = screen.getByLabelText('Rich text editor');
+    expect(editor).toBeInTheDocument();
+    expect(editor).not.toBeDisabled();
+    expect(editor).not.toHaveAttribute('readOnly');
+    expect(editor).toHaveValue('test value');
+  });
+
+  it('renders required editor', () => {
+    renderWithIntl(<RichTextEditor {...props} optional={false} />);
+
+    expect(screen.getByText(/your response \(required\)/i)).toBeInTheDocument();
+    const editor = screen.getByLabelText('Rich text editor');
+    expect(editor).toBeInTheDocument();
+    expect(editor).not.toBeDisabled();
+  });
+
+  it('renders disabled editor', () => {
+    renderWithIntl(<RichTextEditor {...props} disabled />);
 
-    expect(wrapper.instance.findByType('label')[0].el.children).toContain('Optional');
-    expect(wrapper.instance.findByType('Editor')[0].props.init.readonly).not.toEqual(1);
+    expect(screen.getByText(/your response \(optional\)/i)).toBeInTheDocument();
+    const editor = screen.getByLabelText('Rich text editor');
+    expect(editor).toBeInTheDocument();
+    expect(editor).toBeDisabled();
+    expect(editor).toHaveAttribute('readOnly');
   });
 
-  it('render required', () => {
-    const wrapper = shallow(<RichTextEditor {...props} optional={false} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('shows validation error when invalid', () => {
+    renderWithIntl(<RichTextEditor {...props} isInValid />);
 
-    expect(wrapper.instance.findByType('label')[0].el.children).toContain('required');
+    expect(screen.getByText('This field is required')).toBeInTheDocument();
   });
 
-  it('render disabled', () => {
-    const wrapper = shallow(<RichTextEditor {...props} disabled />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('does not show validation error when valid', () => {
+    renderWithIntl(<RichTextEditor {...props} isInValid={false} />);
 
-    expect(wrapper.instance.findByType('Editor')[0].props.init.readonly).toEqual(1);
+    expect(
+      screen.queryByText('This field is required'),
+    ).not.toBeInTheDocument();
   });
 });
diff --git a/src/views/SubmissionView/TextResponseEditor/__snapshots__/RichTextEditor.test.jsx.snap b/src/views/SubmissionView/TextResponseEditor/__snapshots__/RichTextEditor.test.jsx.snap
deleted file mode 100644
index 7d51fc8e..00000000
--- a/src/views/SubmissionView/TextResponseEditor/__snapshots__/RichTextEditor.test.jsx.snap
+++ /dev/null
@@ -1,107 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<RichTextEditor /> render disabled 1`] = `
-<div
-  className="form-group ora-tinymce"
->
-  <label
-    htmlFor="rich-text-response h3"
-  >
-    Your response
-     (
-    Optional
-    )
-  </label>
-  <Editor
-    className="bg-white"
-    disabled={true}
-    init={
-      {
-        "base_url": "http://localhost:18000/static/js/vendor/tinymce/js/tinymce",
-        "content_css": "studio-tmce5",
-        "height": "300",
-        "menubar": false,
-        "plugins": "code image link lists",
-        "readonly": 1,
-        "schema": "html5",
-        "skin": "studio-tmce5",
-        "statusbar": false,
-        "toolbar": false,
-      }
-    }
-    name="rich-text-response"
-    onEditorChange={[MockFunction onChange]}
-    value="value"
-  />
-</div>
-`;
-
-exports[`<RichTextEditor /> render optional 1`] = `
-<div
-  className="form-group ora-tinymce"
->
-  <label
-    htmlFor="rich-text-response h3"
-  >
-    Your response
-     (
-    Optional
-    )
-  </label>
-  <Editor
-    className="bg-white"
-    disabled={false}
-    init={
-      {
-        "base_url": "http://localhost:18000/static/js/vendor/tinymce/js/tinymce",
-        "content_css": "studio-tmce5",
-        "height": "300",
-        "menubar": false,
-        "plugins": "code image link lists",
-        "schema": "html5",
-        "skin": "studio-tmce5",
-        "statusbar": false,
-        "toolbar": "formatselect | bold italic underline | link blockquote image | numlist bullist outdent indent | strikethrough | code | undo redo",
-      }
-    }
-    name="rich-text-response"
-    onEditorChange={[MockFunction onChange]}
-    value="value"
-  />
-</div>
-`;
-
-exports[`<RichTextEditor /> render required 1`] = `
-<div
-  className="form-group ora-tinymce"
->
-  <label
-    htmlFor="rich-text-response h3"
-  >
-    Your response
-     (
-    required
-    )
-  </label>
-  <Editor
-    className="bg-white"
-    disabled={false}
-    init={
-      {
-        "base_url": "http://localhost:18000/static/js/vendor/tinymce/js/tinymce",
-        "content_css": "studio-tmce5",
-        "height": "300",
-        "menubar": false,
-        "plugins": "code image link lists",
-        "schema": "html5",
-        "skin": "studio-tmce5",
-        "statusbar": false,
-        "toolbar": "formatselect | bold italic underline | link blockquote image | numlist bullist outdent indent | strikethrough | code | undo redo",
-      }
-    }
-    name="rich-text-response"
-    onEditorChange={[MockFunction onChange]}
-    value="value"
-  />
-</div>
-`;
diff --git a/src/views/SubmissionView/__snapshots__/SubmissionPrompts.test.jsx.snap b/src/views/SubmissionView/__snapshots__/SubmissionPrompts.test.jsx.snap
deleted file mode 100644
index b48cfa58..00000000
--- a/src/views/SubmissionView/__snapshots__/SubmissionPrompts.test.jsx.snap
+++ /dev/null
@@ -1,74 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SubmissionPrompts /> do not render response when textResponseConfig is disabled 1`] = `
-<Fragment>
-  <div
-    key="0"
-  >
-    <Prompt
-      prompt="prompt1"
-    />
-  </div>
-  <div
-    key="1"
-  >
-    <Prompt
-      prompt="prompt2"
-    />
-  </div>
-</Fragment>
-`;
-
-exports[`<SubmissionPrompts /> render empty prompts 1`] = `<Fragment />`;
-
-exports[`<SubmissionPrompts /> render text response editor when readOnly is false 1`] = `
-<Fragment>
-  <div
-    key="0"
-  >
-    <Prompt
-      prompt="prompt1"
-    />
-    <TextResponseEditor
-      isInValid={true}
-      value="response1"
-    />
-  </div>
-  <div
-    key="1"
-  >
-    <Prompt
-      prompt="prompt2"
-    />
-    <TextResponseEditor
-      isInValid={true}
-      value="response2"
-    />
-  </div>
-</Fragment>
-`;
-
-exports[`<SubmissionPrompts /> render text response when readOnly is true 1`] = `
-<Fragment>
-  <div
-    key="0"
-  >
-    <Prompt
-      prompt="prompt1"
-    />
-    <TextResponse
-      response="response1"
-    />
-  </div>
-  <div
-    key="1"
-  >
-    <Prompt
-      prompt="prompt2"
-    />
-    <TextResponse
-      response="response2"
-    />
-  </div>
-</Fragment>
-`;
diff --git a/src/views/XBlockStudioView/__snapshots__/index.test.jsx.snap b/src/views/XBlockStudioView/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index 40bc65ef..00000000
--- a/src/views/XBlockStudioView/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<XBlockStudioView /> should render 1`] = `
-<XBlockStudioViewProvider>
-  <div
-    id="ora-xblock-studio-view"
-  >
-    <StudioViewTitle />
-    <StudioViewPrompt />
-    <StudioSchedule />
-    <StudioViewSteps />
-    <StudioViewSettings />
-    <StudioViewRubric />
-  </div>
-</XBlockStudioViewProvider>
-`;
diff --git a/src/views/XBlockStudioView/index.test.jsx b/src/views/XBlockStudioView/index.test.jsx
index 5dd19667..7ba392ef 100644
--- a/src/views/XBlockStudioView/index.test.jsx
+++ b/src/views/XBlockStudioView/index.test.jsx
@@ -1,26 +1,63 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import XBlockStudioView from './index';
 
-jest.mock('./components/XBlockStudioViewProvider', () => 'XBlockStudioViewProvider');
-jest.mock('./components/StudioSchedule', () => 'StudioSchedule');
-jest.mock('./components/StudioViewSteps', () => 'StudioViewSteps');
-jest.mock('./components/StudioViewSettings', () => 'StudioViewSettings');
-jest.mock('./components/StudioViewRubric', () => 'StudioViewRubric');
-jest.mock('./components/StudioViewTitle', () => 'StudioViewTitle');
-jest.mock('./components/StudioViewPrompt', () => 'StudioViewPrompt');
+/* eslint-disable react/prop-types */
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
+jest.mock('./components/XBlockStudioViewProvider', () => ({ children }) => (
+  <div>{children}</div>
+));
+jest.mock('./components/StudioSchedule', () => () => (
+  <div>Studio Schedule</div>
+));
+jest.mock('./components/StudioViewSteps', () => () => (
+  <div>Studio View Steps</div>
+));
+jest.mock('./components/StudioViewSettings', () => () => (
+  <div>Studio View Settings</div>
+));
+jest.mock('./components/StudioViewRubric', () => () => (
+  <div>Studio View Rubric</div>
+));
+jest.mock('./components/StudioViewTitle', () => () => (
+  <div>Studio View Title</div>
+));
+jest.mock('./components/StudioViewPrompt', () => () => (
+  <div>Studio View Prompt</div>
+));
+
+const renderWithIntl = (ui) => render(
+  <IntlProvider locale="en" messages={{}}>
+    {ui}
+  </IntlProvider>,
+);
 
 describe('<XBlockStudioView />', () => {
-  it('should render', () => {
-    const wrapper = shallow(<XBlockStudioView />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-
-    expect(wrapper.instance.findByType('XBlockStudioViewProvider').length).toBe(1);
-    expect(wrapper.instance.findByType('StudioSchedule').length).toBe(1);
-    expect(wrapper.instance.findByType('StudioViewSteps').length).toBe(1);
-    expect(wrapper.instance.findByType('StudioViewSettings').length).toBe(1);
-    expect(wrapper.instance.findByType('StudioViewRubric').length).toBe(1);
-    expect(wrapper.instance.findByType('StudioViewTitle').length).toBe(1);
-    expect(wrapper.instance.findByType('StudioViewPrompt').length).toBe(1);
+  it('renders all studio view components', () => {
+    renderWithIntl(<XBlockStudioView />);
+
+    expect(screen.getByText('Studio Schedule')).toBeInTheDocument();
+    expect(screen.getByText('Studio View Steps')).toBeInTheDocument();
+    expect(screen.getByText('Studio View Settings')).toBeInTheDocument();
+    expect(screen.getByText('Studio View Rubric')).toBeInTheDocument();
+    expect(screen.getByText('Studio View Title')).toBeInTheDocument();
+    expect(screen.getByText('Studio View Prompt')).toBeInTheDocument();
+  });
+
+  it('wraps components in XBlockStudioViewProvider', () => {
+    renderWithIntl(<XBlockStudioView />);
+
+    expect(screen.getByText('Studio View Title')).toBeInTheDocument();
+    expect(screen.getByText('Studio View Prompt')).toBeInTheDocument();
+    expect(screen.getByText('Studio Schedule')).toBeInTheDocument();
+    expect(screen.getByText('Studio View Steps')).toBeInTheDocument();
+    expect(screen.getByText('Studio View Settings')).toBeInTheDocument();
+    expect(screen.getByText('Studio View Rubric')).toBeInTheDocument();
   });
 });