From 71fa247c611dd819cfcd19c989122a126929b54f Mon Sep 17 00:00:00 2001
From: jacobo-dominguez-wgu <jacobo.dominguez@wgu.edu>
Date: Tue, 24 Jun 2025 04:04:03 -0600
Subject: [PATCH] test: replacing snapshot tests with RTL tests part 11 (#2214)

---
 .../components/Feedback/FeedbackBox.test.jsx  |  31 ----
 .../components/Feedback/FeedbackBox.test.tsx  |  49 ++++++
 .../__snapshots__/FeedbackBox.test.jsx.snap   | 154 ------------------
 .../SettingsWidget/CardSection.test.jsx       |  15 --
 .../SettingsWidget/CardSection.test.tsx       |  23 +++
 .../__snapshots__/CardSection.test.jsx.snap   |  34 ----
 .../SwitchEditorCard.test.jsx                 |  30 ----
 .../SwitchEditorCard.test.tsx                 |  58 +++++++
 .../SwitchEditorCard.test.jsx.snap            |  44 -----
 .../__snapshots__/index.test.jsx.snap         |  64 --------
 .../components/DurationWidget/index.test.jsx  |  52 ------
 .../components/DurationWidget/index.test.tsx  |  47 ++++++
 .../__snapshots__/index.test.jsx.snap         |  36 ----
 .../{index.test.jsx => index.test.tsx}        |  13 +-
 14 files changed, 185 insertions(+), 465 deletions(-)
 delete mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.jsx
 create mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.tsx
 delete mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap
 delete mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.test.jsx
 create mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.test.tsx
 delete mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/CardSection.test.jsx.snap
 delete mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.test.jsx
 create mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.test.tsx
 delete mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchEditorCard.test.jsx.snap
 delete mode 100644 src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/__snapshots__/index.test.jsx.snap
 delete mode 100644 src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.test.jsx
 create mode 100644 src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.test.tsx
 delete mode 100644 src/plugin-slots/CourseUnitHeaderActionsSlot/__snapshots__/index.test.jsx.snap
 rename src/plugin-slots/CourseUnitHeaderActionsSlot/{index.test.jsx => index.test.tsx} (73%)

diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.jsx
deleted file mode 100644
index 2c1fa2dd5..000000000
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-import { FeedbackBox } from './FeedbackBox';
-
-const answerWithFeedback = {
-  id: 'A',
-  title: 'Answer 1',
-  correct: true,
-  selectedFeedback: 'some feedback',
-  unselectedFeedback: 'unselectedFeedback',
-  problemType: 'sOMepRObleM',
-  images: {},
-  isLibrary: false,
-  learningContextId: 'course+org+run',
-};
-
-const props = {
-  answer: answerWithFeedback,
-  intl: {},
-};
-
-describe('FeedbackBox component', () => {
-  test('renders as expected with default props', () => {
-    expect(shallow(<FeedbackBox {...props} />).snapshot).toMatchSnapshot();
-  });
-  test('renders as expected with a numeric input problem', () => {
-    expect(shallow(<FeedbackBox {...props} problemType="numericalresponse" />).snapshot).toMatchSnapshot();
-  });
-  test('renders as expected with a multi select problem', () => {
-    expect(shallow(<FeedbackBox {...props} problemType="choiceresponse" />).snapshot).toMatchSnapshot();
-  });
-});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.tsx
new file mode 100644
index 000000000..7e2f21e76
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.tsx
@@ -0,0 +1,49 @@
+import { render, screen, initializeMocks } from '@src/testUtils';
+import { FeedbackBox } from './FeedbackBox';
+
+jest.mock('../../../../../../../sharedComponents/ExpandableTextArea', () => jest.fn(({
+  id, value, setContent, placeholder,
+}) => (
+  <textarea id={id} value={value} placeholder={placeholder} onChange={e => setContent(e.target.value)} />
+)));
+
+const answerWithFeedback = {
+  id: 'A',
+  title: 'Answer 1',
+  correct: true,
+  selectedFeedback: 'some feedback',
+  unselectedFeedback: 'unselectedFeedback',
+  problemType: 'sOMepRObleM',
+  images: {},
+  isLibrary: false,
+  learningContextId: 'course+org+run',
+};
+
+const props = {
+  answer: answerWithFeedback,
+  problemType: '',
+  setAnswer: jest.fn(),
+  setSelectedFeedback: jest.fn(),
+  setUnselectedFeedback: jest.fn(),
+  images: {},
+  learningContextId: 'id',
+  isLibrary: false,
+};
+
+describe('FeedbackBox', () => {
+  beforeEach(() => initializeMocks());
+
+  test('renders as expected with default props', () => {
+    render(<FeedbackBox {...props} />);
+    expect(screen.getByText(/Show following feedback when A/)).toBeInTheDocument();
+  });
+  test('renders as expected with a numeric input problem', () => {
+    render(<FeedbackBox {...props} problemType="numericalresponse" />);
+    expect(screen.getByText(/Show following feedback when A/)).toBeInTheDocument();
+    expect(screen.getAllByText(/Show following feedback when A/)).toHaveLength(1);
+  });
+  test('renders as expected with a multi select problem', () => {
+    render(<FeedbackBox {...props} problemType="choiceresponse" />);
+    expect(screen.getAllByText(/Show following feedback when A/)).toHaveLength(2);
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap
deleted file mode 100644
index ec31f4bec..000000000
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap
+++ /dev/null
@@ -1,154 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FeedbackBox component renders as expected with a multi select problem 1`] = `
-<div
-  className="bg-light-300 p-4 mt-3 rounded text-primary-500"
->
-  <FeedbackControl
-    answer={
-      {
-        "correct": true,
-        "id": "A",
-        "images": {},
-        "isLibrary": false,
-        "learningContextId": "course+org+run",
-        "problemType": "sOMepRObleM",
-        "selectedFeedback": "some feedback",
-        "title": "Answer 1",
-        "unselectedFeedback": "unselectedFeedback",
-      }
-    }
-    feedback="some feedback"
-    intl={{}}
-    key="selectedfeedback-A"
-    labelMessage={
-      {
-        "defaultMessage": "Show following feedback when {answerId} {boldunderline}:",
-        "description": "Label text for feedback if option is selected",
-        "id": "authoring.answerwidget.feedback.selected.label",
-      }
-    }
-    labelMessageBoldUnderline={
-      {
-        "defaultMessage": "is selected",
-        "description": "Bold & underlined text for feedback if option is selected",
-        "id": "authoring.answerwidget.feedback.selected.label.boldunderline",
-      }
-    }
-    type="selected"
-  />
-  <FeedbackControl
-    answer={
-      {
-        "correct": true,
-        "id": "A",
-        "images": {},
-        "isLibrary": false,
-        "learningContextId": "course+org+run",
-        "problemType": "sOMepRObleM",
-        "selectedFeedback": "some feedback",
-        "title": "Answer 1",
-        "unselectedFeedback": "unselectedFeedback",
-      }
-    }
-    feedback="unselectedFeedback"
-    intl={{}}
-    key="unselectedfeedback-A"
-    labelMessage={
-      {
-        "defaultMessage": "Show following feedback when {answerId} {boldunderline}:",
-        "description": "Label text for feedback if option is not selected",
-        "id": "authoring.answerwidget.feedback.unselected.label",
-      }
-    }
-    labelMessageBoldUnderline={
-      {
-        "defaultMessage": "is not selected",
-        "description": "Bold & underlined text for feedback if option is not selected",
-        "id": "authoring.answerwidget.feedback.unselected.label.boldunderline",
-      }
-    }
-    type="unselected"
-  />
-</div>
-`;
-
-exports[`FeedbackBox component renders as expected with a numeric input problem 1`] = `
-<div
-  className="bg-light-300 p-4 mt-3 rounded text-primary-500"
->
-  <FeedbackControl
-    answer={
-      {
-        "correct": true,
-        "id": "A",
-        "images": {},
-        "isLibrary": false,
-        "learningContextId": "course+org+run",
-        "problemType": "sOMepRObleM",
-        "selectedFeedback": "some feedback",
-        "title": "Answer 1",
-        "unselectedFeedback": "unselectedFeedback",
-      }
-    }
-    feedback="some feedback"
-    intl={{}}
-    key="selectedfeedback-A"
-    labelMessage={
-      {
-        "defaultMessage": "Show following feedback when {answerId} {boldunderline}:",
-        "description": "Label text for feedback if option is selected",
-        "id": "authoring.answerwidget.feedback.selected.label",
-      }
-    }
-    labelMessageBoldUnderline={
-      {
-        "defaultMessage": "is selected",
-        "description": "Bold & underlined text for feedback if option is selected",
-        "id": "authoring.answerwidget.feedback.selected.label.boldunderline",
-      }
-    }
-    type="selected"
-  />
-</div>
-`;
-
-exports[`FeedbackBox component renders as expected with default props 1`] = `
-<div
-  className="bg-light-300 p-4 mt-3 rounded text-primary-500"
->
-  <FeedbackControl
-    answer={
-      {
-        "correct": true,
-        "id": "A",
-        "images": {},
-        "isLibrary": false,
-        "learningContextId": "course+org+run",
-        "problemType": "sOMepRObleM",
-        "selectedFeedback": "some feedback",
-        "title": "Answer 1",
-        "unselectedFeedback": "unselectedFeedback",
-      }
-    }
-    feedback="some feedback"
-    intl={{}}
-    key="selectedfeedback-A"
-    labelMessage={
-      {
-        "defaultMessage": "Show following feedback when {answerId} {boldunderline}:",
-        "description": "Label text for feedback if option is selected",
-        "id": "authoring.answerwidget.feedback.selected.label",
-      }
-    }
-    labelMessageBoldUnderline={
-      {
-        "defaultMessage": "is selected",
-        "description": "Bold & underlined text for feedback if option is selected",
-        "id": "authoring.answerwidget.feedback.selected.label.boldunderline",
-      }
-    }
-    type="selected"
-  />
-</div>
-`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.test.jsx
deleted file mode 100644
index a11f9ea27..000000000
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.test.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import 'CourseAuthoring/editors/setupEditorTest';
-import { shallow } from '@edx/react-unit-test-utils';
-import CardSection from './CardSection';
-
-describe('CardSection', () => {
-  test('open', () => {
-    expect(shallow(<CardSection summary="summary" isCardCollapsibleOpen><h1>Section Text</h1></CardSection>).snapshot).toMatchSnapshot();
-  });
-
-  test('closed', () => {
-    expect(
-      shallow(<CardSection isCardCollapsibleOpen={false}><h1>Section Text</h1></CardSection>).snapshot,
-    ).toMatchSnapshot();
-  });
-});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.test.tsx
new file mode 100644
index 000000000..fd45c9e31
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen, initializeMocks } from '@src/testUtils';
+import CardSection from './CardSection';
+
+describe('CardSection', () => {
+  beforeEach(() => initializeMocks());
+  test('renders children when open', () => {
+    render(<CardSection summary="summary" isCardCollapsibleOpen><h1>Section Text</h1></CardSection>);
+    expect(screen.getByText('Section Text')).toBeInTheDocument();
+    expect(screen.queryByText('summary')).not.toBeInTheDocument();
+  });
+
+  test('renders summary when closed', () => {
+    render(<CardSection summary="summary" isCardCollapsibleOpen={false}><h1>Section Text</h1></CardSection>);
+    expect(screen.queryByText('Section Text')).not.toBeInTheDocument();
+    expect(screen.getByText('summary')).toBeInTheDocument();
+  });
+
+  test('renders nothing when closed and not summary', () => {
+    const { container } = render(<CardSection isCardCollapsibleOpen={false}><h1>Not showing text</h1></CardSection>);
+    expect(screen.queryByText('Not showing text')).not.toBeInTheDocument();
+    expect(container.textContent).toBe('');
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/CardSection.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/CardSection.test.jsx.snap
deleted file mode 100644
index f5ba5df9f..000000000
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/CardSection.test.jsx.snap
+++ /dev/null
@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CardSection closed 1`] = `null`;
-
-exports[`CardSection open 1`] = `
-<Card.Section
-  className="pt-0"
->
-  <Advanced
-    open={false}
-  >
-    <Body
-      className="collapsible-body"
-    >
-      <span
-        className="small text-primary-500"
-      >
-        summary
-      </span>
-    </Body>
-  </Advanced>
-  <Advanced
-    open={true}
-  >
-    <Body
-      className="collapsible-body text-primary-500 x-small"
-    >
-      <h1>
-        Section Text
-      </h1>
-    </Body>
-  </Advanced>
-</Card.Section>
-`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.test.jsx
deleted file mode 100644
index 6ee6fbc4d..000000000
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.test.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import 'CourseAuthoring/editors/setupEditorTest';
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-import { SwitchEditorCardInternal as SwitchEditorCard, mapDispatchToProps } from './SwitchEditorCard';
-import { thunkActions } from '../../../../../../data/redux';
-
-describe('SwitchEditorCard snapshot', () => {
-  const mockSwitchEditor = jest.fn().mockName('switchEditor');
-  test('snapshot: SwitchEditorCard', () => {
-    expect(
-      shallow(<SwitchEditorCard switchEditor={mockSwitchEditor} problemType="stringresponse" />).snapshot,
-    ).toMatchSnapshot();
-  });
-  test('snapshot: SwitchEditorCard returns null for advanced problems', () => {
-    expect(
-      shallow(<SwitchEditorCard switchEditor={mockSwitchEditor} problemType="advanced" />).snapshot,
-    ).toMatchSnapshot();
-  });
-  test('snapshot: SwitchEditorCard returns null when editor is Markdown', () => {
-    expect(
-      shallow(<SwitchEditorCard switchEditor={mockSwitchEditor} problemType="stringresponse" editorType="markdown" isMarkdownEditorEnabled />).snapshot,
-    ).toMatchSnapshot();
-  });
-
-  describe('mapDispatchToProps', () => {
-    test('updateField from actions.problem.updateField', () => {
-      expect(mapDispatchToProps.switchEditor).toEqual(thunkActions.problem.switchEditor);
-    });
-  });
-});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.test.tsx
new file mode 100644
index 000000000..482a2b503
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.test.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  render, screen, initializeMocks, fireEvent,
+} from '@src/testUtils';
+import { SwitchEditorCardInternal as SwitchEditorCard, mapDispatchToProps } from './SwitchEditorCard';
+import { thunkActions } from '../../../../../../data/redux';
+
+describe('SwitchEditorCard', () => {
+  const mockSwitchEditor = jest.fn().mockName('switchEditor');
+  const baseProps = {
+    switchEditor: mockSwitchEditor,
+    problemType: 'stringresponse',
+    editorType: 'markdown',
+    isMarkdownEditorEnabled: false,
+  };
+
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  test('renders SwitchEditorCard', () => {
+    render(<SwitchEditorCard {...baseProps} />);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    const switchButton = screen.getByRole('button', { name: 'Switch to markdown editor' });
+    expect(switchButton).toBeInTheDocument();
+    fireEvent.click(switchButton);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  test('calls switchEditor function when confirm button is clicked', () => {
+    render(<SwitchEditorCard {...baseProps} />);
+    const switchButton = screen.getByRole('button', { name: 'Switch to markdown editor' });
+    expect(switchButton).toBeInTheDocument();
+    fireEvent.click(switchButton);
+    const confirmButton = screen.getByRole('button', { name: 'Switch to markdown editor' });
+    expect(confirmButton).toBeInTheDocument();
+    fireEvent.click(confirmButton);
+    expect(mockSwitchEditor).toHaveBeenCalledWith('markdown');
+  });
+
+  test('renders nothing for advanced problemType', () => {
+    const { container } = render(<SwitchEditorCard {...baseProps} problemType="advanced" />);
+    const reduxWrapper = (container.firstChild as HTMLElement | null);
+    expect(reduxWrapper?.innerHTML).toBe('');
+  });
+
+  test('snapshot: SwitchEditorCard returns null when editor is Markdown', () => {
+    const { container } = render(<SwitchEditorCard {...baseProps} editorType="markdown" isMarkdownEditorEnabled />);
+    const reduxWrapper = (container.firstChild as HTMLElement | null);
+    expect(reduxWrapper?.innerHTML).toBe('');
+  });
+
+  describe('mapDispatchToProps', () => {
+    test('updateField from actions.problem.updateField', () => {
+      expect(mapDispatchToProps.switchEditor).toEqual(thunkActions.problem.switchEditor);
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchEditorCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchEditorCard.test.jsx.snap
deleted file mode 100644
index ecb8f3d1e..000000000
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchEditorCard.test.jsx.snap
+++ /dev/null
@@ -1,44 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SwitchEditorCard snapshot snapshot: SwitchEditorCard 1`] = `
-<Card
-  className="border border-light-700 shadow-none"
->
-  <BaseModal
-    bodyStyle={null}
-    close={[Function]}
-    confirmAction={
-      <Button
-        className={null}
-        onClick={[Function]}
-        text={null}
-        variant="primary"
-      >
-        <FormattedMessage />
-      </Button>
-    }
-    footerAction={null}
-    headerComponent={null}
-    hideCancelButton={false}
-    isFullscreenScroll={true}
-    isOpen={false}
-    size="md"
-    title={<FormattedMessage />}
-  >
-    <FormattedMessage />
-  </BaseModal>
-  <Button
-    className="my-3 ml-2 py-0"
-    onClick={[Function]}
-    size="sm"
-    text={null}
-    variant="link"
-  >
-    <FormattedMessage />
-  </Button>
-</Card>
-`;
-
-exports[`SwitchEditorCard snapshot snapshot: SwitchEditorCard returns null for advanced problems 1`] = `null`;
-
-exports[`SwitchEditorCard snapshot snapshot: SwitchEditorCard returns null when editor is Markdown 1`] = `null`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index c45dbf05a..000000000
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DurationWidget render snapshots: renders as expected with default props 1`] = `
-<CollapsibleFormWidget
-  fontSize="x-small"
-  subtitle="Custom: 00:00:00"
-  title="Duration"
->
-  <FormattedMessage
-    defaultMessage="Set a specific section of the video to play."
-    description="Description of Duration widget"
-    id="authoring.videoeditor.duration.description"
-  />
-  <Form.Row
-    className="mt-4.5"
-  >
-    <Form.Group
-      as="Col"
-    >
-      <Form.Control
-        floatingLabel="Start time"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onKeyDown={[Function]}
-        value="00:00:00"
-      />
-      <Form.Control.Feedback>
-        <FormattedMessage
-          defaultMessage="Enter time as HH:MM:SS"
-          description="Hint text for start and stop time input fields"
-          id="authoring.videoeditor.duration.hint"
-        />
-      </Form.Control.Feedback>
-    </Form.Group>
-    <Form.Group
-      as="Col"
-    >
-      <Form.Control
-        floatingLabel="Stop time"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onKeyDown={[Function]}
-        value="00:00:00"
-      />
-      <Form.Control.Feedback>
-        <FormattedMessage
-          defaultMessage="Enter time as HH:MM:SS"
-          description="Hint text for start and stop time input fields"
-          id="authoring.videoeditor.duration.hint"
-        />
-      </Form.Control.Feedback>
-    </Form.Group>
-  </Form.Row>
-  <div
-    className="mt-4 mx-2 text-right"
-  >
-    <span
-      className="p-2 total-label rounded"
-    >
-      Total: 00:00:00
-    </span>
-  </div>
-</CollapsibleFormWidget>
-`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.test.jsx
deleted file mode 100644
index 405343107..000000000
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.test.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import 'CourseAuthoring/editors/setupEditorTest';
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { actions, selectors } from '../../../../../../data/redux';
-import { formatMessage } from '../../../../../../testUtils';
-import { DurationWidgetInternal as DurationWidget, mapStateToProps, mapDispatchToProps } from '.';
-
-jest.mock('../../../../../../data/redux', () => ({
-  actions: {
-    video: {
-      updateField: jest.fn().mockName('actions.video.updateField'),
-    },
-  },
-  selectors: {
-    video: {
-      duration: jest.fn(state => ({ duration: state })),
-    },
-  },
-}));
-
-describe('DurationWidget', () => {
-  const props = {
-    duration: {
-      startTime: '00:00:00',
-      stopTime: '00:00:10',
-    },
-    updateField: jest.fn().mockName('updateField'),
-    // inject
-    intl: { formatMessage },
-  };
-  describe('render', () => {
-    test('snapshots: renders as expected with default props', () => {
-      expect(
-        shallow(<DurationWidget {...props} />).snapshot,
-      ).toMatchSnapshot();
-    });
-  });
-  describe('mapStateToProps', () => {
-    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
-    test('duration from video.duration', () => {
-      expect(
-        mapStateToProps(testState).duration,
-      ).toEqual(selectors.video.duration(testState));
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('updateField from actions.video.updateField', () => {
-      expect(mapDispatchToProps.updateField).toEqual(actions.video.updateField);
-    });
-  });
-});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.test.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.test.tsx
new file mode 100644
index 000000000..d8174192d
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.test.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, screen, initializeMocks } from '@src/testUtils';
+import { actions, selectors } from '../../../../../../data/redux';
+import { formatMessage } from '../../../../../../testUtils';
+import { DurationWidgetInternal as DurationWidget, mapStateToProps, mapDispatchToProps } from '.';
+
+describe('DurationWidget', () => {
+  describe('render', () => {
+    beforeEach(() => initializeMocks());
+    test('renders as expected with default props', () => {
+      const props = {
+        duration: {
+          startTime: 0,
+          stopTime: 10,
+        },
+        updateField: jest.fn().mockName('updateField'),
+        // inject
+        intl: { formatMessage },
+      };
+      render(<DurationWidget {...props} />);
+      expect(screen.getByText('Set a specific section of the video to play.')).toBeInTheDocument();
+      expect(screen.getByText('Duration')).toBeInTheDocument();
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    beforeAll(() => {
+      selectors.video = {
+        // @ts-expect-error: test override for selector
+        duration: jest.fn().mockReturnValue({ startTime: 0, stopTime: 10 }),
+      };
+    });
+    test('duration from video.duration', () => {
+      expect(
+        mapStateToProps(testState).duration,
+        // @ts-expect-error: test override for selector
+      ).toEqual(selectors.video.duration(testState));
+    });
+  });
+
+  describe('mapDispatchToProps', () => {
+    test('updateField from actions.video.updateField', () => {
+      expect(mapDispatchToProps.updateField).toEqual(actions.video.updateField);
+    });
+  });
+});
diff --git a/src/plugin-slots/CourseUnitHeaderActionsSlot/__snapshots__/index.test.jsx.snap b/src/plugin-slots/CourseUnitHeaderActionsSlot/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index 04f50bc26..000000000
--- a/src/plugin-slots/CourseUnitHeaderActionsSlot/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CourseUnitHeaderActionsSlot pluginProps are set correctly 1`] = `
-<PluginSlot
-  id="org.openedx.frontend.authoring.course_unit_header_actions.v1"
-  idAliases={
-    [
-      "course_unit_header_actions_slot",
-    ]
-  }
-  pluginProps={
-    {
-      "category": "vertical",
-      "headerNavigationsActions": {
-        "handleEdit": [MockFunction],
-        "handlePreview": [MockFunction],
-        "handleViewLive": [MockFunction],
-      },
-      "isUnitVerticalType": true,
-      "unitTitle": "Mock Unit",
-      "verticalBlocks": [],
-    }
-  }
->
-  <HeaderNavigations
-    category="vertical"
-    headerNavigationsActions={
-      {
-        "handleEdit": [MockFunction],
-        "handlePreview": [MockFunction],
-        "handleViewLive": [MockFunction],
-      }
-    }
-  />
-</PluginSlot>
-`;
diff --git a/src/plugin-slots/CourseUnitHeaderActionsSlot/index.test.jsx b/src/plugin-slots/CourseUnitHeaderActionsSlot/index.test.tsx
similarity index 73%
rename from src/plugin-slots/CourseUnitHeaderActionsSlot/index.test.jsx
rename to src/plugin-slots/CourseUnitHeaderActionsSlot/index.test.tsx
index 66431b6dc..c55fe17da 100644
--- a/src/plugin-slots/CourseUnitHeaderActionsSlot/index.test.jsx
+++ b/src/plugin-slots/CourseUnitHeaderActionsSlot/index.test.tsx
@@ -1,7 +1,7 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, initializeMocks } from '@src/testUtils';
 import renderer from 'react-test-renderer';
 
-import { COURSE_BLOCK_NAMES } from 'CourseAuthoring/constants';
+import { COURSE_BLOCK_NAMES } from '@src/constants';
 import CourseUnitHeaderActionsSlot from '.';
 
 jest.mock('CourseAuthoring/course-unit/header-navigations/HeaderNavigations', () => 'HeaderNavigations');
@@ -19,15 +19,18 @@ const headerNavProps = {
   },
   category: 'vertical',
   unitTitle: 'Mock Unit',
+  isUnitVerticalType: false,
   verticalBlocks: [],
 };
 
 describe('CourseUnitHeaderActionsSlot', () => {
-  beforeEach(() => jest.resetAllMocks());
+  beforeEach(() => initializeMocks());
 
   test('pluginProps are set correctly', () => {
-    const wrapper = shallow(<CourseUnitHeaderActionsSlot unitTitle="Mock Title" verticalBlocks={[]} {...headerNavProps} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    const { container } = render(<CourseUnitHeaderActionsSlot {...headerNavProps} />);
+    expect(container.querySelector('pluginslot')).toBeInTheDocument();
+    expect(container.querySelector('headernavigations')).toBeInTheDocument();
+    expect(container.querySelector('headernavigations')?.getAttribute('category')).toBe('vertical');
   });
 
   test('isUnitVerticalType is set correctly', () => {