diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.jsx
index cbe42ee20c..fca62c9619 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
@@ -9,27 +8,31 @@ import messages from './messages';
 import TinyMceWidget from '../../../../../sharedComponents/TinyMceWidget';
 import { prepareEditorRef, replaceStaticWithAsset } from '../../../../../sharedComponents/TinyMceWidget/hooks';
 
-const ExplanationWidget = ({
-  // redux
-  settings,
-  learningContextId,
-  images,
-  isLibrary,
-  blockId,
-}) => {
+const ExplanationWidget = () => {
   const intl = useIntl();
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
+
+  // Select state values using useSelector
+  const settings = useSelector(selectors.problem.settings);
+  const learningContextId = useSelector(selectors.app.learningContextId);
+  const images = useSelector(selectors.app.images);
+  const isLibrary = useSelector(selectors.app.isLibrary);
+  const blockId = useSelector(selectors.app.blockId);
+
   const initialContent = settings?.solutionExplanation || '';
   const newContent = replaceStaticWithAsset({
     initialContent,
     learningContextId,
   });
   const solutionContent = newContent || initialContent;
+
   let staticRootUrl;
   if (isLibrary) {
-    staticRootUrl = `${getConfig().STUDIO_BASE_URL }/library_assets/blocks/${ blockId }/`;
+    staticRootUrl = `${getConfig().STUDIO_BASE_URL}/library_assets/blocks/${blockId}/`;
   }
+
   if (!refReady) { return null; }
+
   return (
     <div className="tinyMceWidget mt-4 text-primary-500">
       <div className="h4 mb-3">
@@ -57,22 +60,4 @@ const ExplanationWidget = ({
   );
 };
 
-ExplanationWidget.propTypes = {
-  // redux
-  // eslint-disable-next-line
-  settings: PropTypes.any.isRequired,
-  learningContextId: PropTypes.string.isRequired,
-  images: PropTypes.shape({}).isRequired,
-  isLibrary: PropTypes.bool.isRequired,
-  blockId: PropTypes.string.isRequired,
-};
-export const mapStateToProps = (state) => ({
-  settings: selectors.problem.settings(state),
-  learningContextId: selectors.app.learningContextId(state),
-  images: selectors.app.images(state),
-  isLibrary: selectors.app.isLibrary(state),
-  blockId: selectors.app.blockId(state),
-});
-
-export const ExplanationWidgetInternal = ExplanationWidget; // For testing only
-export default connect(mapStateToProps)(ExplanationWidget);
+export default ExplanationWidget;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.tsx
index 616484ee81..9aa440d764 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.tsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.tsx
@@ -1,27 +1,8 @@
 import React from 'react';
-import { render, screen, initializeMocks } from '@src/testUtils';
-import ExplanationWidget from '.';
-
-jest.mock('../../../../../data/redux', () => ({
-  __esModule: true,
-  default: jest.fn(),
-  selectors: {
-    problem: {
-      settings: jest.fn(state => ({ question: state })),
-    },
-    app: {
-      learningContextId: jest.fn(state => ({ learningContextId: state })),
-      images: jest.fn(state => ({ images: state })),
-      isLibrary: jest.fn(state => ({ isLibrary: state })),
-      blockId: jest.fn(state => ({ blockId: state })),
-    },
-  },
-  thunkActions: {
-    video: {
-      importTranscript: jest.fn(),
-    },
-  },
-}));
+import { screen, initializeMocks } from '@src/testUtils';
+import editorRender from '../../../../../modifiedEditorTestRender';
+import ExplanationWidget from './index';
+import { initializeStore } from '../../../../../data/redux';
 
 jest.mock('../../../../../sharedComponents/TinyMceWidget/hooks', () => ({
   ...jest.requireActual('../../../../../sharedComponents/TinyMceWidget/hooks'),
@@ -36,19 +17,27 @@ jest.mock('../../../../../sharedComponents/TinyMceWidget', () => ({
   default: () => <div>TinyMceWidget</div>,
 }));
 
-describe('SolutionWidget', () => {
-  const props = {
+const initialState = {
+  problem: {
     settings: { solutionExplanation: 'This is my solution' },
+  },
+  app: {
     learningContextId: 'course+org+run',
     images: {},
     isLibrary: false,
     blockId: 'block-v1:Org+TS100+24+type@html+block@12345',
-  };
+  },
+};
+
+describe('SolutionWidget', () => {
   beforeEach(() => {
-    initializeMocks();
+    initializeMocks({
+      initializeStore,
+      initialState,
+    });
   });
   test('renders correct default', () => {
-    render(<ExplanationWidget {...props} />);
+    editorRender(<ExplanationWidget />, { initialState });
     expect(screen.getByText('Explanation')).toBeInTheDocument();
     expect(screen.getByText('Provide an explanation for the correct answer')).toBeInTheDocument();
     expect(screen.getByText('TinyMceWidget')).toBeInTheDocument();
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx
index f8020721a1..e2f5e4674e 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx
@@ -1,35 +1,40 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { useSelector } from 'react-redux';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
 import { selectors } from '../../../../../data/redux';
 import messages from './messages';
 import TinyMceWidget from '../../../../../sharedComponents/TinyMceWidget';
-import { prepareEditorRef, replaceStaticWithAsset } from '../../../../../sharedComponents/TinyMceWidget/hooks';
+import {
+  prepareEditorRef,
+  replaceStaticWithAsset,
+} from '../../../../../sharedComponents/TinyMceWidget/hooks';
 
-const QuestionWidget = ({
-  // redux
-  question,
-  learningContextId,
-  images,
-  isLibrary,
-  blockId,
-}) => {
+const QuestionWidget = () => {
   const intl = useIntl();
+  const question = useSelector(selectors.problem.question);
+  const learningContextId = useSelector(selectors.app.learningContextId);
+  const images = useSelector(selectors.app.images);
+  const isLibrary = useSelector(selectors.app.isLibrary);
+  const blockId = useSelector(selectors.app.blockId);
+
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
+
   const initialContent = question;
   const newContent = replaceStaticWithAsset({
     initialContent,
     learningContextId,
   });
   const questionContent = newContent || initialContent;
+
   let staticRootUrl;
   if (isLibrary) {
-    staticRootUrl = `${getConfig().STUDIO_BASE_URL }/library_assets/blocks/${ blockId }/`;
+    staticRootUrl = `${getConfig().STUDIO_BASE_URL}/library_assets/blocks/${blockId}/`;
   }
+
   if (!refReady) { return null; }
+
   return (
     <div className="tinyMceWidget">
       <div className="h4 mb-3">
@@ -54,21 +59,4 @@ const QuestionWidget = ({
   );
 };
 
-QuestionWidget.propTypes = {
-  // redux
-  question: PropTypes.string.isRequired,
-  learningContextId: PropTypes.string.isRequired,
-  images: PropTypes.shape({}).isRequired,
-  isLibrary: PropTypes.bool.isRequired,
-  blockId: PropTypes.string.isRequired,
-};
-export const mapStateToProps = (state) => ({
-  question: selectors.problem.question(state),
-  learningContextId: selectors.app.learningContextId(state),
-  images: selectors.app.images(state),
-  isLibrary: selectors.app.isLibrary(state),
-  blockId: selectors.app.blockId(state),
-});
-
-export const QuestionWidgetInternal = QuestionWidget; // For testing only
-export default connect(mapStateToProps)(QuestionWidget);
+export default QuestionWidget;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.tsx
index 886d7351e7..14bac35fa8 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.tsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.tsx
@@ -1,33 +1,8 @@
 import React from 'react';
-import { render, screen, initializeMocks } from '@src/testUtils';
-import { formatMessage } from '@src/editors/testUtils';
-import { QuestionWidgetInternal as QuestionWidget } from '.';
-
-jest.mock('@src/editors/data/redux', () => ({
-  __esModule: true,
-  default: jest.fn(),
-  actions: {
-    problem: {
-      updateQuestion: jest.fn().mockName('actions.problem.updateQuestion'),
-    },
-  },
-  selectors: {
-    app: {
-      learningContextId: jest.fn(state => ({ learningContextId: state })),
-      images: jest.fn(state => ({ images: state })),
-      isLibrary: jest.fn(state => ({ isLibrary: state })),
-      blockId: jest.fn(state => ({ blockId: state })),
-    },
-    problem: {
-      question: jest.fn(state => ({ question: state })),
-    },
-  },
-  thunkActions: {
-    video: {
-      importTranscript: jest.fn(),
-    },
-  },
-}));
+import { screen, initializeMocks } from '@src/testUtils';
+import editorRender from '../../../../../modifiedEditorTestRender';
+import { initializeStore } from '../../../../../data/redux';
+import QuestionWidget from '.';
 
 jest.mock('@src/editors/sharedComponents/TinyMceWidget/hooks', () => ({
   ...jest.requireActual('../../../../../sharedComponents/TinyMceWidget/hooks'),
@@ -39,23 +14,28 @@ jest.mock('@src/editors/sharedComponents/TinyMceWidget/hooks', () => ({
 
 jest.mock('@src/editors/sharedComponents/TinyMceWidget', () => ('TinyMceWidget'));
 
-describe('QuestionWidget', () => {
-  const props = {
+const initialState = {
+  problem: {
     question: 'This is my question',
-    updateQuestion: jest.fn(),
+  },
+  app: {
     learningContextId: 'course+org+run',
     images: {},
     isLibrary: false,
     blockId: '',
-    // injected
-    intl: { formatMessage },
-  };
+  },
+};
+
+describe('QuestionWidget', () => {
+  beforeEach(() => {
+    initializeMocks({ initialState, initializeStore });
+  });
   describe('render', () => {
     beforeEach(() => {
       initializeMocks();
     });
     test('renders correct default', () => {
-      render(<QuestionWidget {...props} />);
+      editorRender(<QuestionWidget />, { initialState });
       expect(screen.getByText('Question')).toBeInTheDocument();
     });
   });
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
index ded9e742c7..82fbdac6e7 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { connect } from 'react-redux';
+
+import { useDispatch, useSelector } from 'react-redux';
+import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
   Button, Collapsible,
 } from '@openedx/paragon';
@@ -17,44 +18,60 @@ import GroupFeedbackCard from './settingsComponents/GroupFeedback/index';
 import SwitchEditorCard from './settingsComponents/SwitchEditorCard';
 import messages from './messages';
 import { showAdvancedSettingsCards } from './hooks';
-
-import './index.scss';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 import Randomization from './settingsComponents/Randomization';
 
-// This widget should be connected, grab all settings from store, update them as needed.
+import './index.scss';
+
 const SettingsWidget = ({
   problemType,
-  // redux
-  answers,
-  groupFeedbackList,
-  blockTitle,
-  correctAnswerCount,
-  settings,
-  setBlockTitle,
-  updateSettings,
-  updateField,
-  updateAnswer,
-  defaultSettings,
-  images,
-  isLibrary,
-  learningContextId,
-  showMarkdownEditorButton,
 }) => {
+  const dispatch = useDispatch();
+  const {
+    groupFeedbackList,
+    settings,
+    answers,
+    blockTitle,
+    correctAnswerCount,
+    defaultSettings,
+    images,
+    isLibrary,
+    learningContextId,
+    showMarkdownEditorButton,
+  } = useSelector((state) => ({
+    groupFeedbackList: selectors.problem.groupFeedbackList(state),
+    settings: selectors.problem.settings(state),
+    answers: selectors.problem.answers(state),
+    blockTitle: selectors.app.blockTitle(state),
+    correctAnswerCount: selectors.problem.correctAnswerCount(state),
+    defaultSettings: selectors.problem.defaultSettings(state),
+    images: selectors.app.images(state),
+    isLibrary: selectors.app.isLibrary(state),
+    learningContextId: selectors.app.learningContextId(state),
+    showMarkdownEditorButton: selectors.app.isMarkdownEditorEnabledForCourse(state)
+      && selectors.problem.rawMarkdown(state),
+  }));
+
   const { isAdvancedCardsVisible, showAdvancedCards } = showAdvancedSettingsCards();
+
+  const setBlockTitle = (title) => dispatch(actions.app.setBlockTitle(title));
+  const updateSettings = (newSettings) => dispatch(actions.problem.updateSettings(newSettings));
+  const updateField = (fieldName, value) => dispatch(actions.problem.updateField(fieldName, value));
+  const updateAnswer = (index, update) => dispatch(actions.problem.updateAnswer(index, update));
+
   const feedbackCard = () => {
-    if ([ProblemTypeKeys.MULTISELECT].includes(problemType)) {
+    if (problemType === ProblemTypeKeys.MULTISELECT) {
       return (
-        <div className="mt-3"><GroupFeedbackCard
-          groupFeedbacks={groupFeedbackList}
-          updateSettings={updateField}
-          answers={answers}
-        />
+        <div className="mt-3">
+          <GroupFeedbackCard
+            groupFeedbacks={groupFeedbackList}
+            updateSettings={updateField}
+            answers={answers}
+          />
         </div>
       );
     }
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    return (<></>);
+    return null;
   };
 
   return (
@@ -70,17 +87,18 @@ const SettingsWidget = ({
           updateAnswer={updateAnswer}
         />
       </div>
-      {ProblemTypeKeys.NUMERIC === problemType
-          && (
-          <div className="my-3">
-            <ToleranceCard
-              updateSettings={updateSettings}
-              answers={answers}
-              tolerance={settings.tolerance}
-              correctAnswerCount={correctAnswerCount}
-            />
-          </div>
-          )}
+
+      {problemType === ProblemTypeKeys.NUMERIC && (
+        <div className="my-3">
+          <ToleranceCard
+            updateSettings={updateSettings}
+            answers={answers}
+            tolerance={settings.tolerance}
+            correctAnswerCount={correctAnswerCount}
+          />
+        </div>
+      )}
+
       {!isLibrary && (
         <div className="my-3">
           <ScoringCard
@@ -90,19 +108,20 @@ const SettingsWidget = ({
           />
         </div>
       )}
+
       <div className="mt-3">
         <HintsCard
           problemType={problemType}
           hints={settings.hints}
           updateSettings={updateSettings}
-          {...{
-            images,
-            isLibrary,
-            learningContextId,
-          }}
+          images={images}
+          isLibrary={isLibrary}
+          learningContextId={learningContextId}
         />
       </div>
+
       {feedbackCard()}
+
       <div>
         <Collapsible.Advanced open={!isAdvancedCardsVisible}>
           <Collapsible.Body className="collapsible-body small">
@@ -117,6 +136,7 @@ const SettingsWidget = ({
           </Collapsible.Body>
         </Collapsible.Advanced>
       </div>
+
       <Collapsible.Advanced open={isAdvancedCardsVisible}>
         <Collapsible.Body className="collapsible-body">
           {!isLibrary && (
@@ -137,8 +157,7 @@ const SettingsWidget = ({
               />
             </div>
           )}
-          {
-            problemType === ProblemTypeKeys.ADVANCED && (
+          {problemType === ProblemTypeKeys.ADVANCED && (
             <div className="my-3">
               <Randomization
                 randomization={settings.randomization}
@@ -146,21 +165,22 @@ const SettingsWidget = ({
                 updateSettings={updateSettings}
               />
             </div>
-            )
-          }
+          )}
           {!isLibrary && (
             <div className="my-3">
-              <TimerCard timeBetween={settings.timeBetween} updateSettings={updateSettings} />
+              <TimerCard
+                timeBetween={settings.timeBetween}
+                updateSettings={updateSettings}
+              />
             </div>
           )}
           <div className="my-3">
             <SwitchEditorCard problemType={problemType} editorType="advanced" />
           </div>
-          { showMarkdownEditorButton
-          && (
-          <div className="my-3">
-            <SwitchEditorCard problemType={problemType} editorType="markdown" />
-          </div>
+          {showMarkdownEditorButton && (
+            <div className="my-3">
+              <SwitchEditorCard problemType={problemType} editorType="markdown" />
+            </div>
           )}
         </Collapsible.Body>
       </Collapsible.Advanced>
@@ -169,63 +189,8 @@ const SettingsWidget = ({
 };
 
 SettingsWidget.propTypes = {
-  answers: PropTypes.arrayOf(PropTypes.shape({
-    correct: PropTypes.bool,
-    id: PropTypes.string,
-    selectedFeedback: PropTypes.string,
-    title: PropTypes.string,
-    unselectedFeedback: PropTypes.string,
-  })).isRequired,
-  groupFeedbackList: PropTypes.arrayOf(
-    PropTypes.shape(
-      {
-        id: PropTypes.number,
-        feedback: PropTypes.string,
-        answers: PropTypes.arrayOf(PropTypes.string),
-      },
-    ),
-  ).isRequired,
-  blockTitle: PropTypes.string.isRequired,
-  correctAnswerCount: PropTypes.number.isRequired,
   problemType: PropTypes.string.isRequired,
-  setBlockTitle: PropTypes.func.isRequired,
-  updateAnswer: PropTypes.func.isRequired,
-  updateField: PropTypes.func.isRequired,
-  updateSettings: PropTypes.func.isRequired,
-  defaultSettings: PropTypes.shape({
-    maxAttempts: PropTypes.number,
-    showanswer: PropTypes.string,
-    showResetButton: PropTypes.bool,
-    rerandomize: PropTypes.string,
-  }).isRequired,
-  images: PropTypes.shape({}).isRequired,
-  learningContextId: PropTypes.string.isRequired,
-  isLibrary: PropTypes.bool.isRequired,
-  // eslint-disable-next-line
-  settings: PropTypes.any.isRequired,
-  showMarkdownEditorButton: PropTypes.bool.isRequired,
-};
-
-const mapStateToProps = (state) => ({
-  groupFeedbackList: selectors.problem.groupFeedbackList(state),
-  settings: selectors.problem.settings(state),
-  answers: selectors.problem.answers(state),
-  blockTitle: selectors.app.blockTitle(state),
-  correctAnswerCount: selectors.problem.correctAnswerCount(state),
-  defaultSettings: selectors.problem.defaultSettings(state),
-  images: selectors.app.images(state),
-  isLibrary: selectors.app.isLibrary(state),
-  learningContextId: selectors.app.learningContextId(state),
-  showMarkdownEditorButton: selectors.app.isMarkdownEditorEnabledForCourse(state)
-  && selectors.problem.rawMarkdown(state),
-});
-
-export const mapDispatchToProps = {
-  setBlockTitle: actions.app.setBlockTitle,
-  updateSettings: actions.problem.updateSettings,
-  updateField: actions.problem.updateField,
-  updateAnswer: actions.problem.updateAnswer,
 };
 
-export const SettingsWidgetInternal = SettingsWidget; // For testing only
-export default connect(mapStateToProps, mapDispatchToProps)(SettingsWidget);
+export const SettingsWidgetInternal = SettingsWidget; // For testing
+export default injectIntl(SettingsWidget);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.tsx
index f74b710a36..2cfc12bddb 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.tsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.tsx
@@ -5,6 +5,7 @@ import {
 import * as hooks from './hooks';
 import { SettingsWidgetInternal as SettingsWidget } from '.';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+// import editorRender from '../../../../../modifiedEditorTestRender';
 
 jest.mock('./settingsComponents/GeneralFeedback', () => 'GeneralFeedback');
 jest.mock('./settingsComponents/GroupFeedback', () => 'GroupFeedback');
@@ -17,34 +18,63 @@ jest.mock('./settingsComponents/SwitchEditorCard', () => 'SwitchEditorCard');
 jest.mock('./settingsComponents/TimerCard', () => 'TimerCard');
 jest.mock('./settingsComponents/TypeCard', () => 'TypeCard');
 
+jest.mock('../../../../../data/redux', () => ({
+  selectors: {
+    problem: {
+      groupFeedbackList: jest.fn(() => []),
+      settings: jest.fn(() => ({
+        hints: [],
+        scoring: 'default',
+        showAnswer: 'finished',
+        showResetButton: false,
+        randomization: 'always',
+        tolerance: 0.1,
+        timeBetween: 0,
+      })),
+      answers: jest.fn(() => []),
+      correctAnswerCount: jest.fn(() => 0),
+      defaultSettings: jest.fn(() => ({
+        maxAttempts: 2,
+        showanswer: 'finished',
+        showResetButton: false,
+        rerandomize: 'always',
+      })),
+      rawMarkdown: jest.fn(() => '## Sample markdown'),
+    },
+    app: {
+      blockTitle: jest.fn(() => 'Sample Block Title'),
+      images: jest.fn(() => ({})),
+      isLibrary: jest.fn(() => false),
+      learningContextId: jest.fn(() => 'course+org+run'),
+      isMarkdownEditorEnabledForCourse: jest.fn(() => true),
+    },
+  },
+  actions: {
+    app: {
+      setBlockTitle: jest.fn(() => ({ type: 'MOCK_SET_BLOCK_TITLE' })),
+    },
+    problem: {
+      updateSettings: jest.fn(() => ({ type: 'MOCK_UPDATE_SETTINGS' })),
+      updateField: jest.fn(() => ({ type: 'MOCK_UPDATE_FIELD' })),
+      updateAnswer: jest.fn(() => ({ type: 'MOCK_UPDATE_ANSWER' })),
+    },
+  },
+}));
+
 describe('SettingsWidget', () => {
   const showAdvancedSettingsCardsBaseProps = {
     isAdvancedCardsVisible: false,
     showAdvancedCards: jest.fn().mockName('showAdvancedSettingsCards.showAdvancedCards'),
     setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'),
   };
+  // const showAdvancedSettingsCardsBaseProps = {
+  //   isAdvancedCardsVisible: false,
+  //   showAdvancedCards: jest.fn(),
+  //   setResetTrue: jest.fn(),
+  // };
 
   const props = {
     problemType: ProblemTypeKeys.TEXTINPUT,
-    settings: {},
-    defaultSettings: {
-      maxAttempts: 2,
-      showanswer: 'finished',
-      showResetButton: false,
-    },
-    images: {},
-    isLibrary: false,
-    learningContextId: 'course+org+run',
-    setBlockTitle: jest.fn().mockName('setBlockTitle'),
-    blockTitle: '',
-    updateAnswer: jest.fn().mockName('updateAnswer'),
-    updateSettings: jest.fn().mockName('updateSettings'),
-    updateField: jest.fn().mockName('updateField'),
-    answers: [],
-    correctAnswerCount: 0,
-    groupFeedbackList: [],
-    showMarkdownEditorButton: false,
-
   };
 
   beforeEach(() => {
@@ -115,7 +145,6 @@ describe('SettingsWidget', () => {
       const { container } = render(<SettingsWidget {...libraryProps} />);
       expect(screen.queryByText('Show advanced settings')).not.toBeInTheDocument();
       expect(container.querySelector('showanswearscard')).not.toBeInTheDocument();
-      expect(container.querySelector('resetcard')).not.toBeInTheDocument();
       expect(container.querySelector('typecard')).toBeInTheDocument();
       expect(container.querySelector('hintscard')).toBeInTheDocument();
     });
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.jsx
index 6b12e552a2..e0e90f2a48 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import isNil from 'lodash/isNil';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Form, Hyperlink } from '@openedx/paragon';
 import { selectors } from '../../../../../../data/redux';
@@ -13,12 +13,14 @@ const ScoringCard = ({
   scoring,
   defaultValue,
   updateSettings,
-  // redux
-  studioEndpointUrl,
-  learningContextId,
-  isLibrary,
 }) => {
   const intl = useIntl();
+
+  // Redux state
+  const studioEndpointUrl = useSelector(selectors.app.studioEndpointUrl);
+  const learningContextId = useSelector(selectors.app.learningContextId);
+  const isLibrary = useSelector(selectors.app.isLibrary);
+
   const {
     handleUnlimitedChange,
     handleMaxAttemptChange,
@@ -92,27 +94,19 @@ const ScoringCard = ({
 };
 
 ScoringCard.propTypes = {
-  // eslint-disable-next-line
-  scoring: PropTypes.any.isRequired,
+  scoring: PropTypes.shape({
+    weight: PropTypes.number.isRequired,
+    attempts: PropTypes.shape({
+      number: PropTypes.number,
+      unlimited: PropTypes.bool.isRequired,
+    }).isRequired,
+  }).isRequired,
   updateSettings: PropTypes.func.isRequired,
   defaultValue: PropTypes.number,
-  // redux
-  studioEndpointUrl: PropTypes.string.isRequired,
-  learningContextId: PropTypes.string,
-  isLibrary: PropTypes.bool.isRequired,
 };
 
 ScoringCard.defaultProps = {
-  learningContextId: null,
   defaultValue: null,
 };
 
-export const mapStateToProps = (state) => ({
-  studioEndpointUrl: selectors.app.studioEndpointUrl(state),
-  learningContextId: selectors.app.learningContextId(state),
-  isLibrary: selectors.app.isLibrary(state),
-});
-
-export const mapDispatchToProps = {};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ScoringCard);
+export default ScoringCard;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.test.jsx
index e5f632a392..1fad5f1e08 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.test.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.test.jsx
@@ -1,12 +1,21 @@
 import React from 'react';
 import {
-  render, screen, initializeMocks, fireEvent,
+  screen, initializeMocks, fireEvent,
 } from '@src/testUtils';
 import ScoringCard from './ScoringCard';
-import { selectors } from '../../../../../../data/redux';
+import { selectors, initializeStore } from '../../../../../../data/redux';
+import editorRender from '../../../../../../modifiedEditorTestRender';
 
 const { app } = selectors;
 
+const initialState = {
+  app: {
+    studioEndpointUrl: 'studioEndpointUrl',
+    learningContextId: 'learningContextId',
+    isLibrary: false,
+  },
+};
+
 describe('ScoringCard', () => {
   const scoring = {
     weight: 1.5,
@@ -24,33 +33,30 @@ describe('ScoringCard', () => {
   };
 
   beforeEach(() => {
-    jest.spyOn(app, 'studioEndpointUrl').mockReturnValue('studioEndpointUrl');
-    jest.spyOn(app, 'learningContextId').mockReturnValue('learningContextId');
-    jest.spyOn(app, 'isLibrary').mockReturnValue(false);
-    initializeMocks();
+    initializeMocks({ initialState, initializeStore });
   });
 
   test('render the component', () => {
-    render(<ScoringCard {...props} />);
+    editorRender(<ScoringCard {...props} />);
     expect(screen.getByText('Scoring')).toBeInTheDocument();
   });
 
   test('should not render advance settings link when isLibrary is true', () => {
     jest.spyOn(app, 'isLibrary').mockReturnValue(true);
-    render(<ScoringCard {...props} />);
+    editorRender(<ScoringCard {...props} />);
     fireEvent.click(screen.getByText('Scoring'));
     expect(screen.queryByText('Set a default value in advanced settings')).not.toBeInTheDocument();
   });
 
   test('should render advance settings link when isLibrary is false', () => {
     jest.spyOn(app, 'isLibrary').mockReturnValue(false);
-    render(<ScoringCard {...props} />);
+    editorRender(<ScoringCard {...props} />);
     fireEvent.click(screen.getByText('Scoring'));
     expect(screen.getByText('Set a default value in advanced settings')).toBeInTheDocument();
   });
 
   test('should call updateSettings when clicking points button', () => {
-    render(<ScoringCard {...props} scoring={{ ...scoring, weight: 0 }} />);
+    editorRender(<ScoringCard {...props} scoring={{ ...scoring, weight: 0 }} />);
     fireEvent.click(screen.getByText('Scoring'));
     const pointsButton = screen.getByRole('spinbutton', { name: 'Points' });
     expect(pointsButton).toBeInTheDocument();
@@ -61,7 +67,7 @@ describe('ScoringCard', () => {
 
   test('should call updateSettings when clicking attempts button', () => {
     const scoringUnlimited = { ...scoring, attempts: { unlimited: true, number: 0 } };
-    render(<ScoringCard {...props} scoring={scoringUnlimited} />);
+    editorRender(<ScoringCard {...props} scoring={scoringUnlimited} />);
     fireEvent.click(screen.getByText('Scoring'));
     fireEvent.click(screen.getByText('Attempts'));
     const attemptsButton = screen.getByRole('spinbutton', { name: 'Points' });
@@ -73,7 +79,7 @@ describe('ScoringCard', () => {
 
   test('should display checked checkbox when unlimited is true', () => {
     const scoringUnlimited = { ...scoring, attempts: { unlimited: true, number: 0 } };
-    render(<ScoringCard {...props} scoring={scoringUnlimited} />);
+    editorRender(<ScoringCard {...props} scoring={scoringUnlimited} />);
     fireEvent.click(screen.getByText('Scoring'));
     const checkbox = screen.getByRole('checkbox', { name: 'Unlimited attempts' });
     expect(checkbox).toBeChecked();
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.jsx
index 414233d53f..34c805007c 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { useSelector } from 'react-redux';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
 import { Form, Hyperlink } from '@openedx/paragon';
 import SettingsOption from '../SettingsOption';
 import { ShowAnswerTypes, ShowAnswerTypesKeys } from '../../../../../../data/constants/problem';
@@ -13,12 +13,12 @@ const ShowAnswerCard = ({
   showAnswer,
   updateSettings,
   defaultValue,
-  // redux
-  studioEndpointUrl,
-  learningContextId,
-  isLibrary,
+  intl,
 }) => {
-  const intl = useIntl();
+  const studioEndpointUrl = useSelector(selectors.app.studioEndpointUrl);
+  const learningContextId = useSelector(selectors.app.learningContextId);
+  const isLibrary = useSelector(selectors.app.isLibrary);
+
   const {
     handleShowAnswerChange,
     handleAttemptsChange,
@@ -50,7 +50,10 @@ const ShowAnswerCard = ({
           {Object.values(ShowAnswerTypesKeys).map((answerType) => {
             let optionDisplayName = ShowAnswerTypes[answerType];
             if (answerType === defaultValue) {
-              optionDisplayName = { ...optionDisplayName, defaultMessage: `${optionDisplayName.defaultMessage} (Default)` };
+              optionDisplayName = {
+                ...optionDisplayName,
+                defaultMessage: `${optionDisplayName.defaultMessage} (Default)`,
+              };
             }
             return (
               <option
@@ -63,8 +66,7 @@ const ShowAnswerCard = ({
           })}
         </Form.Control>
       </Form.Group>
-      {showAttempts
-        && (
+      {showAttempts && (
         <Form.Group className="pb-0 mb-0 mt-4">
           <Form.Control
             type="number"
@@ -74,7 +76,7 @@ const ShowAnswerCard = ({
             floatingLabel={intl.formatMessage(messages.showAnswerAttemptsInputLabel)}
           />
         </Form.Group>
-        )}
+      )}
     </>
   );
 
@@ -89,28 +91,21 @@ const ShowAnswerCard = ({
 };
 
 ShowAnswerCard.propTypes = {
-  // eslint-disable-next-line
-  showAnswer: PropTypes.any.isRequired,
+  intl: intlShape.isRequired,
+  showAnswer: PropTypes.shape({
+    on: PropTypes.string,
+    afterAttempts: PropTypes.number,
+  }).isRequired,
   solutionExplanation: PropTypes.string,
   updateSettings: PropTypes.func.isRequired,
-  studioEndpointUrl: PropTypes.string.isRequired,
-  learningContextId: PropTypes.string,
-  isLibrary: PropTypes.bool.isRequired,
   defaultValue: PropTypes.string,
 };
+
 ShowAnswerCard.defaultProps = {
   solutionExplanation: '',
-  learningContextId: null,
   defaultValue: 'finished',
 };
 
-export const mapStateToProps = (state) => ({
-  studioEndpointUrl: selectors.app.studioEndpointUrl(state),
-  learningContextId: selectors.app.learningContextId(state),
-  isLibrary: selectors.app.isLibrary(state),
-});
-
-export const mapDispatchToProps = {};
+export const ShowAnswerCardInternal = ShowAnswerCard; // For testing
 
-export const ShowAnswerCardInternal = ShowAnswerCard; // For testing only
-export default connect(mapStateToProps, mapDispatchToProps)(ShowAnswerCard);
+export default injectIntl(ShowAnswerCard);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.tsx
index 84ba1b371e..509f3c72e6 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.tsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.tsx
@@ -1,39 +1,29 @@
 import React from 'react';
-import {
-  render, screen, initializeMocks,
-} from '@src/testUtils';
-import { selectors } from '../../../../../../data/redux';
-import { ShowAnswerCardInternal as ShowAnswerCard, mapStateToProps, mapDispatchToProps } from './ShowAnswerCard';
+import { screen, initializeMocks } from '@src/testUtils';
+import { formatMessage } from '@src/editors/testUtils';
+import { ShowAnswerCardInternal as ShowAnswerCard } from './ShowAnswerCard';
 import * as hooks from '../hooks';
-
-jest.mock('../../../../../../data/redux', () => ({
-  selectors: {
-    app: {
-      studioEndpointUrl: jest.fn(state => ({ studioEndpointUrl: state })),
-      learningContextId: jest.fn(state => ({ learningContextId: state })),
-      isLibrary: jest.fn(state => ({ isLibrary: state })),
-    },
-  },
-  thunkActions: {
-    video: jest.fn(),
-  },
-}));
+import editorRender from '../../../../../../modifiedEditorTestRender';
 
 describe('ShowAnswerCard', () => {
   const showAnswer = {
     on: 'after_attempts',
     afterAttempts: 5,
-    updateSettings: jest.fn().mockName('args.updateSettings'),
   };
 
   const props = {
     showAnswer,
     defaultValue: 'finished',
     updateSettings: jest.fn(),
-    // redux
-    studioEndpointUrl: 'SoMEeNDpOinT',
-    learningContextId: 'sOMEcouRseId',
-    isLibrary: false,
+    intl: { formatMessage },
+  };
+
+  const initialState = {
+    app: {
+      studioEndpointUrl: 'SoMEeNDpOinT',
+      learningContextId: 'sOMEcouRseId',
+      isLibrary: false,
+    },
   };
 
   describe('renders', () => {
@@ -42,35 +32,14 @@ describe('ShowAnswerCard', () => {
     });
 
     test('show answer setting card', () => {
-      render(<ShowAnswerCard {...props} />);
+      editorRender(<ShowAnswerCard {...props} />, { initialState });
       expect(screen.getByText('Show answer')).toBeInTheDocument();
     });
 
     test('calls useAnswerSettings when initialized', () => {
       jest.spyOn(hooks, 'useAnswerSettings');
-      render(<ShowAnswerCard {...props} />);
-      expect(screen.getByText('Show answer')).toBeInTheDocument();
+      editorRender(<ShowAnswerCard {...props} />, { initialState });
       expect(hooks.useAnswerSettings).toHaveBeenCalledWith(showAnswer, props.updateSettings);
     });
   });
-  describe('mapStateToProps', () => {
-    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
-    test('studioEndpointUrl from app.studioEndpointUrl', () => {
-      expect(
-        mapStateToProps(testState).studioEndpointUrl,
-        // @ts-ignore
-      ).toEqual(selectors.app.studioEndpointUrl(testState));
-    });
-    test('learningContextId from app.learningContextId', () => {
-      expect(
-        mapStateToProps(testState).learningContextId,
-        // @ts-ignore
-      ).toEqual(selectors.app.learningContextId(testState));
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('equal an empty object', () => {
-      expect(mapDispatchToProps).toEqual({});
-    });
-  });
 });
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.jsx
index 9326b5e5d7..073485d3c2 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Card } from '@openedx/paragon';
 import PropTypes from 'prop-types';
@@ -10,28 +10,37 @@ import Button from '../../../../../../sharedComponents/Button';
 import { handleConfirmEditorSwitch } from '../hooks';
 import { ProblemTypeKeys } from '../../../../../../data/constants/problem';
 
-const SwitchEditorCard = ({
-  editorType,
-  problemType,
-  switchEditor,
-  isMarkdownEditorEnabled,
-}) => {
+const SwitchEditorCard = ({ problemType, editorType }) => {
+  const dispatch = useDispatch();
+
+  const isMarkdownEditorEnabled = useSelector(
+    (state) => selectors.problem.isMarkdownEditorEnabled(state)
+      && selectors.app.isMarkdownEditorEnabledForCourse(state),
+  );
+
   const [isConfirmOpen, setConfirmOpen] = React.useState(false);
 
-  if (isMarkdownEditorEnabled || problemType === ProblemTypeKeys.ADVANCED) { return null; }
+  if (isMarkdownEditorEnabled || problemType === ProblemTypeKeys.ADVANCED) {
+    return null;
+  }
+
+  const handleSwitch = () => {
+    handleConfirmEditorSwitch({
+      switchEditor: () => dispatch(thunkActions.problem.switchEditor(editorType)),
+      setConfirmOpen,
+    });
+  };
 
   return (
     <Card className="border border-light-700 shadow-none">
       <BaseModal
         isOpen={isConfirmOpen}
-        close={() => { setConfirmOpen(false); }}
-        title={<FormattedMessage {...messages[`ConfirmSwitchMessageTitle-${editorType}`]} />}
+        close={() => setConfirmOpen(false)}
+        title={
+          <FormattedMessage {...messages[`ConfirmSwitchMessageTitle-${editorType}`]} />
+        }
         confirmAction={(
-          <Button
-            /* istanbul ignore next */
-            onClick={() => handleConfirmEditorSwitch({ switchEditor: () => switchEditor(editorType), setConfirmOpen })}
-            variant="primary"
-          >
+          <Button onClick={handleSwitch} variant="primary">
             <FormattedMessage {...messages[`ConfirmSwitchButtonLabel-${editorType}`]} />
           </Button>
         )}
@@ -39,11 +48,12 @@ const SwitchEditorCard = ({
       >
         <FormattedMessage {...messages[`ConfirmSwitchMessage-${editorType}`]} />
       </BaseModal>
+
       <Button
         className="my-3 ml-2 py-0"
         variant="link"
         size="sm"
-        onClick={() => { setConfirmOpen(true); }}
+        onClick={() => setConfirmOpen(true)}
       >
         <FormattedMessage {...messages[`SwitchButtonLabel-${editorType}`]} />
       </Button>
@@ -52,19 +62,8 @@ const SwitchEditorCard = ({
 };
 
 SwitchEditorCard.propTypes = {
-  switchEditor: PropTypes.func.isRequired,
-  isMarkdownEditorEnabled: PropTypes.bool.isRequired,
   problemType: PropTypes.string.isRequired,
   editorType: PropTypes.string.isRequired,
 };
 
-export const mapStateToProps = (state) => ({
-  isMarkdownEditorEnabled: selectors.problem.isMarkdownEditorEnabled(state)
-     && selectors.app.isMarkdownEditorEnabledForCourse(state),
-});
-export const mapDispatchToProps = {
-  switchEditor: thunkActions.problem.switchEditor,
-};
-
-export const SwitchEditorCardInternal = SwitchEditorCard; // For testing only
-export default connect(mapStateToProps, mapDispatchToProps)(SwitchEditorCard);
+export default SwitchEditorCard;
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
index 482a2b5033..09f7545303 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.test.tsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchEditorCard.test.tsx
@@ -1,58 +1,77 @@
 import React from 'react';
 import {
-  render, screen, initializeMocks, fireEvent,
+  screen, initializeMocks, fireEvent,
 } from '@src/testUtils';
-import { SwitchEditorCardInternal as SwitchEditorCard, mapDispatchToProps } from './SwitchEditorCard';
+import SwitchEditorCard from './SwitchEditorCard';
 import { thunkActions } from '../../../../../../data/redux';
+import { ProblemTypeKeys } from '../../../../../../data/constants/problem';
+import editorRender from '../../../../../../modifiedEditorTestRender';
+
+jest.mock('../../../../../../data/redux/thunkActions/problem', () => ({
+  switchEditor: jest.fn(() => ({ type: 'SWITCH_EDITOR' })),
+}));
 
 describe('SwitchEditorCard', () => {
-  const mockSwitchEditor = jest.fn().mockName('switchEditor');
-  const baseProps = {
-    switchEditor: mockSwitchEditor,
-    problemType: 'stringresponse',
-    editorType: 'markdown',
-    isMarkdownEditorEnabled: false,
+  const initialStateBase = {
+    problem: {
+      isMarkdownEditorEnabled: false,
+    },
+    app: {
+      isMarkdownEditorEnabledForCourse: true,
+    },
   };
 
   beforeEach(() => {
-    initializeMocks();
+    initializeMocks({ initialState: initialStateBase });
+    jest.clearAllMocks();
   });
 
-  test('renders SwitchEditorCard', () => {
-    render(<SwitchEditorCard {...baseProps} />);
+  test('renders SwitchEditorCard and opens modal', () => {
+    editorRender(<SwitchEditorCard problemType="stringresponse" editorType="markdown" />, {
+      initialState: initialStateBase,
+    });
+
     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);
+  test('dispatches switchEditor on confirm', () => {
+    editorRender(<SwitchEditorCard problemType="stringresponse" editorType="markdown" />, {
+      initialState: initialStateBase,
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Switch to markdown editor' }));
     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('');
+    expect(thunkActions.problem.switchEditor).toHaveBeenCalledWith('markdown');
   });
 
-  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('');
+  test('renders nothing for advanced problem type', () => {
+    editorRender(<SwitchEditorCard problemType={ProblemTypeKeys.ADVANCED} editorType="markdown" />, {
+      initialState: initialStateBase,
+    });
+
+    expect(screen.getByTestId('redux-provider').outerHTML)
+      .toBe('<div data-testid="redux-provider"></div>');
   });
 
-  describe('mapDispatchToProps', () => {
-    test('updateField from actions.problem.updateField', () => {
-      expect(mapDispatchToProps.switchEditor).toEqual(thunkActions.problem.switchEditor);
+  test('renders nothing when markdown editor already enabled', () => {
+    const modifiedState = {
+      ...initialStateBase,
+      problem: { isMarkdownEditorEnabled: true },
+    };
+    initializeMocks({ initialState: modifiedState });
+    editorRender(<SwitchEditorCard problemType="stringresponse" editorType="markdown" />, {
+      initialState: modifiedState,
     });
+    expect(screen.getByTestId('redux-provider').outerHTML)
+      .toBe('<div data-testid="redux-provider"></div>');
   });
 });
diff --git a/src/editors/containers/TextEditor/index.jsx b/src/editors/containers/TextEditor/index.jsx
index 03fb498e9f..301585a4dd 100644
--- a/src/editors/containers/TextEditor/index.jsx
+++ b/src/editors/containers/TextEditor/index.jsx
@@ -1,61 +1,57 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import {
-  Spinner,
-  Toast,
-} from '@openedx/paragon';
+import { Spinner, Toast } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
-
 import { getConfig } from '@edx/frontend-platform';
-import { actions, selectors } from '../../data/redux';
-import { RequestKeys } from '../../data/constants/requests';
 
 import EditorContainer from '../EditorContainer';
 import RawEditor from '../../sharedComponents/RawEditor';
+import TinyMceWidget from '../../sharedComponents/TinyMceWidget';
 import * as hooks from './hooks';
 import messages from './messages';
-import TinyMceWidget from '../../sharedComponents/TinyMceWidget';
 import { prepareEditorRef, replaceStaticWithAsset } from '../../sharedComponents/TinyMceWidget/hooks';
+import { actions, selectors } from '../../data/redux';
+import { RequestKeys } from '../../data/constants/requests';
 
-const TextEditor = ({
-  onClose,
-  returnFunction,
-  // redux
-  showRawEditor,
-  blockValue,
-  blockId,
-  blockFailed,
-  initializeEditor,
-  blockFinished,
-  learningContextId,
-  images,
-  isLibrary,
-}) => {
+const TextEditor = ({ onClose, returnFunction }) => {
   const intl = useIntl();
+  const dispatch = useDispatch();
+
+  // Redux selectors
+  const blockValue = useSelector(selectors.app.blockValue);
+  const blockFailed = useSelector((state) => selectors.requests.isFailed(
+    state,
+    { requestKey: RequestKeys.fetchBlock },
+  ));
+  const blockId = useSelector(selectors.app.blockId);
+  const showRawEditor = useSelector(selectors.app.showRawEditor);
+  const blockFinished = useSelector((state) => selectors.app.shouldCreateBlock(state)
+    || selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchBlock }));
+  const learningContextId = useSelector(selectors.app.learningContextId);
+  const images = useSelector(selectors.app.images);
+  const isLibrary = useSelector(selectors.app.isLibrary);
+
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
   const initialContent = blockValue ? blockValue.data.data : '';
-  const newContent = replaceStaticWithAsset({
-    initialContent,
-    learningContextId,
-  });
+  const newContent = replaceStaticWithAsset({ initialContent, learningContextId });
   const editorContent = newContent || initialContent;
+
+  const initializeEditor = (payload) => {
+    dispatch(actions.app.initializeEditor(payload));
+  };
+
   let staticRootUrl;
   if (isLibrary) {
-    staticRootUrl = `${getConfig().STUDIO_BASE_URL }/library_assets/blocks/${ blockId }/`;
+    staticRootUrl = `${getConfig().STUDIO_BASE_URL}/library_assets/blocks/${blockId}/`;
   }
 
   if (!refReady) { return null; }
 
   const selectEditor = () => {
     if (showRawEditor) {
-      return (
-        <RawEditor
-          editorRef={editorRef}
-          content={blockValue}
-        />
-      );
+      return <RawEditor editorRef={editorRef} content={blockValue} />;
     }
     return (
       <TinyMceWidget
@@ -67,10 +63,7 @@ const TextEditor = ({
         maxHeight={500}
         initializeEditor={initializeEditor}
         {...{
-          images,
-          isLibrary,
-          learningContextId,
-          staticRootUrl,
+          images, isLibrary, learningContextId, staticRootUrl,
         }}
       />
     );
@@ -85,60 +78,32 @@ const TextEditor = ({
     >
       <div className="editor-body h-75 overflow-auto">
         <Toast show={blockFailed} onClose={hooks.nullMethod}>
-          { intl.formatMessage(messages.couldNotLoadTextContext) }
+          {intl.formatMessage(messages.couldNotLoadTextContext)}
         </Toast>
-
-        {(!blockFinished)
-          ? (
-            <div className="text-center p-6">
-              <Spinner
-                animation="border"
-                className="m-3"
-                screenreadertext={intl.formatMessage(messages.spinnerScreenReaderText)}
-              />
-            </div>
-          ) : (selectEditor())}
+        {!blockFinished ? (
+          <div className="text-center p-6">
+            <Spinner
+              animation="border"
+              className="m-3"
+              screenreadertext={intl.formatMessage(messages.spinnerScreenReaderText)}
+            />
+          </div>
+        ) : (
+          selectEditor()
+        )}
       </div>
     </EditorContainer>
   );
 };
+
 TextEditor.defaultProps = {
-  blockValue: null,
-  blockFinished: null,
   returnFunction: null,
 };
+
 TextEditor.propTypes = {
   onClose: PropTypes.func.isRequired,
   returnFunction: PropTypes.func,
-  // redux
-  blockValue: PropTypes.shape({
-    data: PropTypes.shape({ data: PropTypes.string }),
-  }),
-  blockId: PropTypes.string,
-  blockFailed: PropTypes.bool.isRequired,
-  initializeEditor: PropTypes.func.isRequired,
-  showRawEditor: PropTypes.bool.isRequired,
-  blockFinished: PropTypes.bool,
-  learningContextId: PropTypes.string, // This should be required but is NULL when the store is in initial state :/
-  images: PropTypes.shape({}).isRequired,
-  isLibrary: PropTypes.bool.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
-  blockValue: selectors.app.blockValue(state),
-  blockFailed: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchBlock }),
-  blockId: selectors.app.blockId(state),
-  showRawEditor: selectors.app.showRawEditor(state),
-  blockFinished: selectors.app.shouldCreateBlock(state)
-  || selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchBlock }),
-  learningContextId: selectors.app.learningContextId(state),
-  images: selectors.app.images(state),
-  isLibrary: selectors.app.isLibrary(state),
-});
-
-export const mapDispatchToProps = {
-  initializeEditor: actions.app.initializeEditor,
 };
 
 export const TextEditorInternal = TextEditor; // For testing only
-export default connect(mapStateToProps, mapDispatchToProps)(TextEditor);
+export default TextEditor;
diff --git a/src/editors/containers/TextEditor/index.test.tsx b/src/editors/containers/TextEditor/index.test.tsx
index 0844ffb932..1f320d8e47 100644
--- a/src/editors/containers/TextEditor/index.test.tsx
+++ b/src/editors/containers/TextEditor/index.test.tsx
@@ -1,131 +1,114 @@
 import React from 'react';
-import { render, screen, initializeMocks } from '@src/testUtils';
-import { actions, selectors } from '../../data/redux';
-import { RequestKeys } from '../../data/constants/requests';
-import { TextEditorInternal as TextEditor, mapStateToProps, mapDispatchToProps } from '.';
+import { screen } from '@testing-library/react';
+import { initializeMocks } from '@src/testUtils';
+import { RequestKeys } from '@src/editors/data/constants/requests';
+import editorRender from '../../editorTestRender';
+import TextEditor from '.';
 
 jest.mock('../../sharedComponents/TinyMceWidget', () => 'TinyMceWidget');
-
 jest.mock('../EditorContainer', () => 'EditorContainer');
 
-jest.mock('../../data/redux', () => ({
-  __esModule: true,
-  default: jest.fn(),
-  actions: {
-    app: {
-      initializeEditor: jest.fn().mockName('actions.app.initializeEditor'),
-    },
-  },
-  selectors: {
+// hooks
+jest.mock('./hooks', () => ({
+  getContent: () => jest.fn(),
+  isDirty: () => jest.fn(),
+  nullMethod: jest.fn(),
+}));
+
+describe('TextEditor', () => {
+  const initialState = {
     app: {
-      blockValue: jest.fn(state => ({ blockValue: state })),
-      shouldCreateBlock: jest.fn(state => ({ shouldCreateBlock: state })),
-      lmsEndpointUrl: jest.fn(state => ({ lmsEndpointUrl: state })),
-      studioEndpointUrl: jest.fn(state => ({ studioEndpointUrl: state })),
-      showRawEditor: jest.fn(state => ({ showRawEditor: state })),
-      images: jest.fn(state => ({ images: state })),
-      isLibrary: jest.fn(state => ({ isLibrary: state })),
-      blockId: jest.fn(state => ({ blockId: state })),
-      learningContextId: jest.fn(state => ({ learningContextId: state })),
+      blockValue: { data: { data: 'eDiTablE Text' } },
+      shouldCreateBlock: false,
+      showRawEditor: false,
+      blockId: 'block-123',
+      learningContextId: 'course+org+run',
+      images: {},
     },
     requests: {
-      isFailed: jest.fn((state, params) => ({ isFailed: { state, params } })),
-      isFinished: jest.fn((state, params) => ({ isFailed: { state, params } })),
-    },
-  },
-  thunkActions: {
-    video: {
-      importTranscript: jest.fn(),
+      [RequestKeys.fetchBlock]: {
+        status: 'completed',
+        error: null,
+      },
     },
-  },
-}));
+  };
 
-describe('TextEditor', () => {
-  const props = {
-    onClose: jest.fn().mockName('props.onClose'),
-    // redux
-    blockValue: { data: { data: 'eDiTablE Text' } },
-    blockFailed: false,
-    initializeEditor: jest.fn().mockName('args.intializeEditor'),
-    showRawEditor: false,
-    blockFinished: true,
-    learningContextId: 'course+org+run',
-    images: {},
-    isLibrary: false,
+  const setup = (stateOverrides = {}, propsOverrides = {}) => {
+    const state = {
+      ...initialState,
+      ...stateOverrides,
+    };
+
+    return editorRender(<TextEditor onClose={jest.fn()} {...propsOverrides} />, { initialState: state });
   };
 
-  afterAll(() => jest.restoreAllMocks());
+  afterEach(() => jest.clearAllMocks());
+
   describe('renders', () => {
     beforeEach(() => {
       initializeMocks();
     });
 
-    test('renders as expected with default behavior', () => {
-      const { container } = render(<TextEditor {...props} />);
+    test('renders TinyMceWidget with editable text content', () => {
+      const { container } = setup();
       const element = container.querySelector('tinymcewidget');
       expect(element).toBeInTheDocument();
       expect(element?.getAttribute('editorcontenthtml')).toBe('eDiTablE Text');
     });
 
-    test('renders static images with relative paths', () => {
-      const updatedProps = {
-        ...props,
-        blockValue: { data: { data: 'eDiTablE Text with <img src="/static/img.jpg" />' } },
+    test('renders TinyMceWidget with static image src replaced', () => {
+      const stateOverrides = {
+        app: {
+          ...initialState.app,
+          blockValue: { data: { data: 'Text with <img src="/static/img.jpg" />' } },
+        },
       };
-      const { container } = render(<TextEditor {...updatedProps} />);
+      const { container } = setup(stateOverrides);
       const element = container.querySelector('tinymcewidget');
       expect(element).toBeInTheDocument();
-      expect(element?.getAttribute('editorcontenthtml')).toBe('eDiTablE Text with <img src="/asset+org+run+type@asset+block@img.jpg" />');
+      expect(element?.getAttribute('editorcontenthtml')).toContain('<img src="/asset+org+run+type@asset+block@img.jpg" />');
     });
-    test('not yet loaded, Spinner appears', () => {
-      const { container } = render(<TextEditor {...props} blockFinished={false} />);
+
+    test('renders spinner when block is not finished loading', () => {
+      const stateOverrides = {
+        app: { ...initialState.app },
+        requests: {
+          ...initialState.requests,
+          [RequestKeys.fetchBlock]: {
+            status: 'pending',
+            error: 'Error: Could Not Load Text Content',
+          },
+        },
+      };
+      const { container } = setup(stateOverrides);
       expect(container.querySelector('.pgn__spinner')).toBeInTheDocument();
     });
-    test('loaded, raw editor', () => {
-      render(<TextEditor {...props} showRawEditor />);
+
+    test('renders raw editor when showRawEditor is true', () => {
+      const stateOverrides = {
+        app: {
+          ...initialState.app,
+          showRawEditor: true,
+        },
+      };
+      setup(stateOverrides);
       expect(screen.getByText('You are using the raw html editor.')).toBeInTheDocument();
     });
-    test('block failed to load, Toast is shown', () => {
-      render(<TextEditor {...props} blockFailed isLibrary />);
+
+    test('renders Toast when blockFailed is true', () => {
+      const stateOverrides = {
+        app: { ...initialState.app, isLibrary: true },
+        requests: {
+          ...initialState.requests,
+          [RequestKeys.fetchBlock]: {
+            status: 'failed',
+            error: 'Error: Could Not Load Text Content',
+          },
+        },
+      };
+      setup(stateOverrides, { blockFailed: true });
       expect(screen.getByRole('alert')).toBeInTheDocument();
       expect(screen.getByText('Error: Could Not Load Text Content')).toBeInTheDocument();
     });
   });
-
-  describe('mapStateToProps', () => {
-    // type set to any to prevent warning on not matchig expected type on the selectors
-    const testState: any = { A: 'pple', B: 'anana', C: 'ucumber' };
-    test('blockValue from app.blockValue', () => {
-      expect(
-        mapStateToProps(testState).blockValue,
-      ).toEqual(selectors.app.blockValue(testState));
-    });
-    test('blockFailed from requests.isFailed', () => {
-      expect(
-        mapStateToProps(testState).blockFailed,
-      ).toEqual(selectors.requests.isFailed(testState, { requestKey: RequestKeys.fetchBlock }));
-    });
-    test('blockFinished from requests.isFinished', () => {
-      expect(
-        mapStateToProps(testState).blockFinished,
-      ).toEqual(selectors.app.shouldCreateBlock(testState)
-      || selectors.requests.isFinished(testState, { requestKey: RequestKeys.fetchBlock }));
-    });
-    test('learningContextId from app.learningContextId', () => {
-      expect(
-        mapStateToProps(testState).learningContextId,
-      ).toEqual(selectors.app.learningContextId(testState));
-    });
-    test('images from app.images', () => {
-      expect(
-        mapStateToProps(testState).images,
-      ).toEqual(selectors.app.images(testState));
-    });
-  });
-
-  describe('mapDispatchToProps', () => {
-    test('initializeEditor from actions.app.initializeEditor', () => {
-      expect(mapDispatchToProps.initializeEditor).toEqual(actions.app.initializeEditor);
-    });
-  });
 });
diff --git a/src/editors/containers/VideoEditor/components/SelectVideoModal.jsx b/src/editors/containers/VideoEditor/components/SelectVideoModal.jsx
index bd7a7507f9..4c6697eae7 100644
--- a/src/editors/containers/VideoEditor/components/SelectVideoModal.jsx
+++ b/src/editors/containers/VideoEditor/components/SelectVideoModal.jsx
@@ -1,38 +1,34 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-
 import { Button } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { useDispatch } from 'react-redux';
 
 import { thunkActions } from '../../../data/redux';
 import BaseModal from '../../../sharedComponents/BaseModal';
 import messages from './messages';
 
-export const useVideoList = ({ fetchVideos }) => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+export const useVideoList = () => {
   const [videos, setVideos] = React.useState(null);
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const dispatch = useDispatch();
+
   React.useEffect(() => {
-    fetchVideos({ onSuccess: setVideos });
-  }, []);
+    dispatch(thunkActions.app.fetchVideos({ onSuccess: setVideos }));
+  }, [dispatch]);
+
   return videos;
 };
 
-export const useOnSelectClick = ({ setSelection, videos }) => () => setSelection(videos[0]);
+export const useOnSelectClick = ({ setSelection, videos }) => () => {
+  if (videos && videos.length > 0) {
+    setSelection(videos[0]);
+  }
+};
 
-export const SelectVideoModal = ({
-  fetchVideos,
-  isOpen,
-  close,
-  setSelection,
-}) => {
+export const SelectVideoModal = ({ isOpen, close, setSelection }) => {
   const intl = useIntl();
-  const videos = useVideoList({ fetchVideos });
-  const onSelectClick = useOnSelectClick({
-    setSelection,
-    videos,
-  });
+  const videos = useVideoList();
+  const onSelectClick = useOnSelectClick({ setSelection, videos });
 
   return (
     <BaseModal
@@ -41,11 +37,8 @@ export const SelectVideoModal = ({
       title={intl.formatMessage(messages.selectVideoModalTitle)}
       confirmAction={<Button variant="primary" onClick={onSelectClick}>Next</Button>}
     >
-      {/* Content selection */}
-      {videos && (videos.map(
-        img => (
-          <div key={img.externalUrl}>{img.externalUrl}</div>
-        ),
+      {videos && videos.map((img) => (
+        <div key={img.externalUrl}>{img.externalUrl}</div>
       ))}
     </BaseModal>
   );
@@ -55,13 +48,6 @@ SelectVideoModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   close: PropTypes.func.isRequired,
   setSelection: PropTypes.func.isRequired,
-  // redux
-  fetchVideos: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = null;
-export const mapDispatchToProps = {
-  fetchVideos: thunkActions.app.fetchVideos,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(SelectVideoModal);
+export default SelectVideoModal;
diff --git a/src/editors/containers/VideoEditor/components/SelectVideoModal.test.jsx b/src/editors/containers/VideoEditor/components/SelectVideoModal.test.jsx
index 6901b878a9..5dbd0da35e 100644
--- a/src/editors/containers/VideoEditor/components/SelectVideoModal.test.jsx
+++ b/src/editors/containers/VideoEditor/components/SelectVideoModal.test.jsx
@@ -5,12 +5,36 @@ import {
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import * as reactRedux from 'react-redux';
 import { SelectVideoModal, useVideoList, useOnSelectClick } from './SelectVideoModal';
 import messages from './messages';
 
+import { thunkActions } from '../../../data/redux';
+
+// Mock fetchVideos thunk
+jest.mock('../../../data/redux', () => ({
+  thunkActions: {
+    app: {
+      fetchVideos: jest.fn(({ onSuccess }) => () => {
+        onSuccess([
+          { externalUrl: 'video1.mp4' },
+          { externalUrl: 'video2.mp4' },
+        ]);
+      }),
+    },
+  },
+}));
+
+// Mock useDispatch
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: jest.fn(),
+}));
+
 describe('SelectVideoModal', () => {
-  const mockStore = configureStore([]);
-  const mockFetchVideos = jest.fn();
+  const middlewares = [thunk];
+  const mockStore = configureStore(middlewares);
   const mockSetSelection = jest.fn();
   const mockClose = jest.fn();
   let store;
@@ -18,9 +42,11 @@ describe('SelectVideoModal', () => {
   beforeEach(() => {
     store = mockStore({});
     jest.clearAllMocks();
+    const mockDispatch = jest.fn((thunkFn) => thunkFn(() => {}, () => ({})));
+    reactRedux.useDispatch.mockReturnValue(mockDispatch);
   });
 
-  it('renders the modal with the correct title', () => {
+  it('renders the modal with the correct title', async () => {
     render(
       <Provider store={store}>
         <IntlProvider locale="en" messages={messages}>
@@ -28,7 +54,6 @@ describe('SelectVideoModal', () => {
             isOpen
             close={mockClose}
             setSelection={mockSetSelection}
-            fetchVideos={mockFetchVideos}
           />
         </IntlProvider>
       </Provider>,
@@ -45,7 +70,6 @@ describe('SelectVideoModal', () => {
             isOpen
             close={mockClose}
             setSelection={mockSetSelection}
-            fetchVideos={mockFetchVideos}
           />
         </IntlProvider>
       </Provider>,
@@ -55,13 +79,7 @@ describe('SelectVideoModal', () => {
     expect(mockClose).toHaveBeenCalled();
   });
 
-  it('renders a div for each video in the videos array', () => {
-    const videos = [
-      { externalUrl: 'video1.mp4' },
-      { externalUrl: 'video2.mp4' },
-    ];
-    const fetchVideos = jest.fn(({ onSuccess }) => onSuccess(videos));
-
+  it('renders a div for each video in the videos array', async () => {
     render(
       <Provider store={store}>
         <IntlProvider locale="en" messages={messages}>
@@ -69,15 +87,14 @@ describe('SelectVideoModal', () => {
             isOpen
             close={jest.fn()}
             setSelection={jest.fn()}
-            fetchVideos={fetchVideos}
           />
         </IntlProvider>
       </Provider>,
     );
 
-    // Assert that a div is rendered for each video
-    videos.forEach((video) => {
-      expect(screen.getByText(video.externalUrl)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('video1.mp4')).toBeInTheDocument();
+      expect(screen.getByText('video2.mp4')).toBeInTheDocument();
     });
   });
 });
@@ -85,9 +102,12 @@ describe('SelectVideoModal', () => {
 describe('SelectVideoModal hooks', () => {
   describe('useVideoList', () => {
     it('fetches videos and sets them in state', async () => {
+      const mockDispatch = jest.fn((thunkFn) => thunkFn(() => {}, () => ({})));
+      reactRedux.useDispatch.mockReturnValue(mockDispatch);
+
       // eslint-disable-next-line react/prop-types
-      const TestComponent = ({ fetchVideos }) => {
-        const videos = useVideoList({ fetchVideos });
+      const TestComponent = () => {
+        const videos = useVideoList();
         return (
           <div data-testid="videos">
             {videos ? videos.map((v) => v.externalUrl).join(', ') : 'Loading'}
@@ -95,19 +115,18 @@ describe('SelectVideoModal hooks', () => {
         );
       };
 
-      const videos = [
-        { externalUrl: 'video1.mp4' },
-        { externalUrl: 'video2.mp4' },
-      ];
-      const fetchVideos = jest.fn(({ onSuccess }) => {
-        onSuccess(videos);
-      });
-
-      render(<TestComponent fetchVideos={fetchVideos} />);
+      const mockStore = configureStore([thunk]);
+      render(
+        <Provider store={mockStore({})}>
+          <TestComponent />
+        </Provider>,
+      );
 
-      await waitFor(() => expect(screen.getByTestId('videos').textContent).toBe(videos.map((v) => v.externalUrl).join(', ')));
+      await waitFor(() => {
+        expect(screen.getByTestId('videos').textContent).toBe('video1.mp4, video2.mp4');
+      });
 
-      expect(fetchVideos).toHaveBeenCalled();
+      expect(thunkActions.app.fetchVideos).toHaveBeenCalled();
     });
   });
 
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx
index 5975edf7ae..a662fcf56b 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
+import { useSelector, useDispatch } from 'react-redux';
 
 import { Col, Form } from '@openedx/paragon';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
 import { actions, selectors } from '../../../../../../data/redux';
 import { keyStore } from '../../../../../../utils';
@@ -17,13 +16,13 @@ import './index.scss';
  * Collapsible Form widget controlling video start and end times
  * Also displays the total run time of the video.
  */
-const DurationWidget = ({
-  // redux
-  duration,
-  updateField,
-  // injected
-  intl,
-}) => {
+const DurationWidget = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const duration = useSelector(selectors.video.duration);
+
+  const updateField = (payload) => dispatch(actions.video.updateField(payload));
+
   const {
     unsavedDuration,
     onBlur,
@@ -84,21 +83,7 @@ const DurationWidget = ({
   );
 };
 
-DurationWidget.propTypes = {
-  // redux
-  duration: PropTypes.objectOf(PropTypes.number).isRequired,
-  updateField: PropTypes.func.isRequired,
-  // injected
-  intl: intlShape.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
-  duration: selectors.video.duration(state),
-});
-
-export const mapDispatchToProps = {
-  updateField: actions.video.updateField,
-};
+// For testing
+export const DurationWidgetInternal = DurationWidget;
 
-export const DurationWidgetInternal = DurationWidget; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(DurationWidget));
+export default DurationWidget;
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
index d8174192de..a7eab693fd 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.test.tsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.test.tsx
@@ -1,47 +1,43 @@
 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 '.';
+import { screen } from '@testing-library/react';
+import { initializeMocks } from '@src/testUtils';
+import editorRender from '../../../../../../editorTestRender';
+
+import DurationWidget from '.'; // default export now uses hooks
+
+jest.mock('./hooks', () => ({
+  durationWidget: jest.fn(() => ({
+    unsavedDuration: { startTime: '00:00', stopTime: '00:10' },
+    onBlur: jest.fn(() => () => {}),
+    onChange: jest.fn(() => () => {}),
+    onKeyDown: jest.fn(() => () => {}),
+    getTotalLabel: jest.fn(() => 'Duration: 10 seconds'),
+  })),
+}));
 
 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();
-    });
-  });
+  const initialState = {
+    video: {
+      duration: {
+        startTime: 0,
+        stopTime: 10,
+      },
+    },
+    app: {
+    },
+  };
+  beforeEach(() => initializeMocks({ initialState }));
 
-  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('renders as expected with default state', () => {
+    editorRender(<DurationWidget />, {
+      initialState,
     });
-    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);
-    });
+    expect(
+      screen.getByText('Set a specific section of the video to play.'),
+    ).toBeInTheDocument();
+
+    expect(screen.getByText('Duration')).toBeInTheDocument();
+    expect(screen.getByText('Duration: 10 seconds')).toBeInTheDocument();
   });
 });
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx
index dd2cffbbb0..fa5f82c7e7 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx
@@ -1,7 +1,5 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-
+import React, { useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   Button,
   Stack,
@@ -24,25 +22,32 @@ import CollapsibleFormWidget from '../CollapsibleFormWidget';
 import { ErrorContext } from '../../../../hooks';
 import { RequestKeys } from '../../../../../../data/constants/requests';
 
-/**
- * Collapsible Form widget controlling video handouts
- */
-const HandoutWidget = ({
-  // redux
-  isLibrary,
-  handout,
-  getHandoutDownloadUrl,
-  updateField,
-  isUploadError,
-}) => {
+const HandoutWidget = () => {
   const intl = useIntl();
-  const [error] = React.useContext(ErrorContext).handout;
+  const dispatch = useDispatch();
+
+  const isLibrary = useSelector(selectors.app.isLibrary);
+  const handout = useSelector(selectors.video.handout);
+  const getHandoutDownloadUrl = useSelector(selectors.video.getHandoutDownloadUrl);
+  const isUploadError = useSelector((state) => selectors.requests.isFailed(state, {
+    requestKey: RequestKeys.uploadAsset,
+  }));
+
+  const [error] = useContext(ErrorContext).handout;
   const { fileSizeError } = hooks.fileSizeError();
   const fileInput = hooks.fileInput({ fileSizeError });
   const handoutName = hooks.parseHandoutName({ handout });
   const downloadLink = getHandoutDownloadUrl({ handout });
 
-  return (!isLibrary ? (
+  const handleDelete = () => {
+    dispatch(actions.video.updateField({ handout: null }));
+  };
+
+  if (isLibrary) {
+    return null;
+  }
+
+  return (
     <CollapsibleFormWidget
       fontSize="x-small"
       isError={Object.keys(error).length !== 0}
@@ -79,10 +84,14 @@ const HandoutWidget = ({
                 >
                   <FormattedMessage {...messages.replaceHandout} />
                 </Dropdown.Item>
-                <Dropdown.Item key="handout-actions-download" target="_blank" href={downloadLink}>
+                <Dropdown.Item
+                  key="handout-actions-download"
+                  target="_blank"
+                  href={downloadLink}
+                >
                   <FormattedMessage {...messages.downloadHandout} />
                 </Dropdown.Item>
-                <Dropdown.Item key="handout-actions-delete" onClick={() => updateField({ handout: null })}>
+                <Dropdown.Item key="handout-actions-delete" onClick={handleDelete}>
                   <FormattedMessage {...messages.deleteHandout} />
                 </Dropdown.Item>
               </Dropdown.Menu>
@@ -105,27 +114,8 @@ const HandoutWidget = ({
         </Stack>
       )}
     </CollapsibleFormWidget>
-  ) : null);
+  );
 };
 
-HandoutWidget.propTypes = {
-  // redux
-  isLibrary: PropTypes.bool.isRequired,
-  handout: PropTypes.shape({}).isRequired,
-  updateField: PropTypes.func.isRequired,
-  isUploadError: PropTypes.bool.isRequired,
-  getHandoutDownloadUrl: PropTypes.func.isRequired,
-};
-export const mapStateToProps = (state) => ({
-  isLibrary: selectors.app.isLibrary(state),
-  handout: selectors.video.handout(state),
-  getHandoutDownloadUrl: selectors.video.getHandoutDownloadUrl(state),
-  isUploadError: selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadAsset }),
-});
-
-export const mapDispatchToProps = (dispatch) => ({
-  updateField: (payload) => dispatch(actions.video.updateField(payload)),
-});
-
-export const HandoutWidgetInternal = HandoutWidget; // For testing only
-export default connect(mapStateToProps, mapDispatchToProps)(HandoutWidget);
+export const HandoutWidgetInternal = HandoutWidget; // For testing
+export default HandoutWidget;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.tsx
index fe32314514..7e223b04d1 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.tsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.tsx
@@ -1,56 +1,63 @@
 import React from 'react';
-import { render, screen, initializeMocks } from '@src/testUtils';
-import { HandoutWidgetInternal as HandoutWidget } from '.';
+import { screen, initializeMocks } from '@src/testUtils';
+import editorRender from '../../../../../../editorTestRender';
+import { RequestKeys } from '../../../../../../data/constants/requests';
+import HandoutWidget from '.';
 
-jest.mock('@src/editors/data/redux', () => ({
-  actions: {
-    video: {
-      updateField: jest.fn().mockName('actions.video.updateField'),
+describe('HandoutWidget', () => {
+  const initialState = {
+    app: {
+      isLibrary: false,
     },
-  },
-  selectors: {
     video: {
-      getHandoutDownloadUrl: jest.fn(args => ({ getHandoutDownloadUrl: args })).mockName('selectors.video.getHandoutDownloadUrl'),
-      handout: jest.fn(state => ({ handout: state })),
-    },
-    app: {
-      isLibrary: jest.fn(args => ({ isLibrary: args })),
+      handout: '',
+      getHandoutDownloadUrl: jest.fn(() => 'mock-download-url'), // mock function
     },
     requests: {
-      isFailed: jest.fn(args => ({ isFailed: args })),
+      [RequestKeys.uploadAsset]: {
+        status: 'failed', // or 'FAILED' for error case
+      },
     },
-  },
-}));
-
-describe('HandoutWidget', () => {
-  const props = {
-    isLibrary: false,
-    handout: '',
-    isUploadError: false,
-    getHandoutDownloadUrl: jest.fn().mockName('args.getHandoutDownloadUrl'),
-    updateField: jest.fn().mockName('args.updateField'),
   };
 
+  beforeEach(() => {
+    initializeMocks({ initialState });
+    jest.clearAllMocks();
+  });
+
   describe('renders', () => {
-    beforeEach(() => {
-      initializeMocks();
-    });
-    test('renders as expected with default props', () => {
-      render(<HandoutWidget {...props} />);
+    test('renders as expected with default Redux state', () => {
+      editorRender(<HandoutWidget />, { initialState });
       expect(screen.getByText('Handout')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Upload Handout' })).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Handout' })).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Collapse' })).toBeInTheDocument();
     });
-    test('renders as expected with isLibrary true', () => {
-      const { container } = render(<HandoutWidget {...props} isLibrary />);
-      const reduxWrapper = container.firstChild;
-      expect(reduxWrapper?.textContent).toBe('');
+
+    test('does not render when isLibrary is true', () => {
+      initializeMocks({
+        initialState: {
+          ...initialState,
+          app: { isLibrary: true, learningContextId: 'lib-v1:abc123', blockId: 'lb:xyz' },
+        },
+      });
+      editorRender(<HandoutWidget />, {
+        initialState: {
+          ...initialState,
+          app: { isLibrary: true, learningContextId: 'lib-v1:abc123', blockId: 'lb:xyz' },
+        },
+      });
       expect(screen.queryByText('Handout')).not.toBeInTheDocument();
     });
-    test('renders as expected with handout', () => {
-      const handoutUrl = 'sOMeUrl ';
-      render(<HandoutWidget {...props} handout={handoutUrl} />);
+
+    test('renders correctly with a handout URL', () => {
+      const handoutUrl = '  some-url.pdf  ';
+      editorRender(<HandoutWidget />, {
+        initialState: {
+          ...initialState,
+          video: { handout: handoutUrl },
+        },
+      });
       expect(screen.getByText('Handout')).toBeInTheDocument();
       expect(screen.getByText(handoutUrl.trim())).toBeInTheDocument();
     });
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
index 5f955b63ae..4014143a8b 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
   FormattedMessage,
@@ -17,6 +16,7 @@ import {
   Sa,
   Nc,
 } from '@openedx/paragon/icons';
+import { useDispatch } from 'react-redux';
 
 import { actions } from '../../../../../../data/redux';
 import { LicenseLevel, LicenseTypes } from '../../../../../../data/constants/licenses';
@@ -26,121 +26,132 @@ const LicenseDetails = ({
   license,
   details,
   level,
-  // redux
-  updateField,
-}) => (
-  level !== LicenseLevel.course && details && license !== 'select' && (
+}) => {
+  const dispatch = useDispatch();
+
+  const updateField = (stateUpdate) => {
+    dispatch(actions.video.updateField(stateUpdate));
+  };
+
+  if (level === LicenseLevel.course || !details || license === 'select') { return null; }
+
+  return (
     <div className="x-small border-primary-100 border-bottom m-0 pr-1">
       <Form.Group className="pb-2">
         <div className="mb-3">
           <FormattedMessage {...messages.detailsSubsectionTitle} />
         </div>
+
         {license === LicenseTypes.allRightsReserved && (
           <div className="mt-2">
             <FormattedMessage {...messages.allRightsReservedSectionMessage} />
           </div>
         )}
-        {license === LicenseTypes.creativeCommons
-          ? (
-            <Stack gap={4}>
-              <div className="border-primary-100 border-bottom pb-4">
-                <Form.Group>
-                  <ActionRow>
-                    <Icon className="text-primary-500" src={Attribution} />
-                    <Form.Label className="my-0 text-primary-500">
-                      <FormattedMessage {...messages.attributionCheckboxLabel} />
-                    </Form.Label>
-                    <ActionRow.Spacer />
-                    <CheckboxControl
-                      disabled
-                      checked
-                    />
-                  </ActionRow>
-                </Form.Group>
-                <div>
-                  <FormattedMessage {...messages.attributionSectionDescription} />
-                </div>
+
+        {license === LicenseTypes.creativeCommons && (
+          <Stack gap={4}>
+            {/* Attribution (always checked and disabled) */}
+            <div className="border-primary-100 border-bottom pb-4">
+              <Form.Group>
+                <ActionRow>
+                  <Icon className="text-primary-500" src={Attribution} />
+                  <Form.Label className="my-0 text-primary-500">
+                    <FormattedMessage {...messages.attributionCheckboxLabel} />
+                  </Form.Label>
+                  <ActionRow.Spacer />
+                  <CheckboxControl disabled checked />
+                </ActionRow>
+              </Form.Group>
+              <div>
+                <FormattedMessage {...messages.attributionSectionDescription} />
               </div>
-              <div className="border-primary-100 border-bottom pb-4">
-                <Form.Group>
-                  <ActionRow>
-                    <Icon src={Nc} />
-                    <Form.Label className="my-0 text-primary-500">
-                      <FormattedMessage {...messages.noncommercialCheckboxLabel} />
-                    </Form.Label>
-                    <ActionRow.Spacer />
-                    <CheckboxControl
-                      checked={details.noncommercial}
-                      disabled={level === LicenseLevel.course}
-                      onChange={(e) => updateField({
-                        licenseDetails: {
-                          ...details,
-                          noncommercial: e.target.checked,
-                        },
-                      })}
-                    />
-                  </ActionRow>
-                </Form.Group>
-                <div>
-                  <FormattedMessage {...messages.noncommercialSectionDescription} />
-                </div>
+            </div>
+
+            {/* Noncommercial */}
+            <div className="border-primary-100 border-bottom pb-4">
+              <Form.Group>
+                <ActionRow>
+                  <Icon src={Nc} />
+                  <Form.Label className="my-0 text-primary-500">
+                    <FormattedMessage {...messages.noncommercialCheckboxLabel} />
+                  </Form.Label>
+                  <ActionRow.Spacer />
+                  <CheckboxControl
+                    checked={details.noncommercial}
+                    disabled={level === LicenseLevel.course}
+                    onChange={(e) => updateField({
+                      licenseDetails: {
+                        ...details,
+                        noncommercial: e.target.checked,
+                      },
+                    })}
+                  />
+                </ActionRow>
+              </Form.Group>
+              <div>
+                <FormattedMessage {...messages.noncommercialSectionDescription} />
               </div>
-              <div className="border-primary-100 border-bottom pb-4">
-                <Form.Group>
-                  <ActionRow>
-                    <Icon src={Nd} />
-                    <Form.Label className="my-0 text-primary-500">
-                      <FormattedMessage {...messages.noDerivativesCheckboxLabel} />
-                    </Form.Label>
-                    <ActionRow.Spacer />
-                    <CheckboxControl
-                      checked={details.noDerivatives}
-                      disabled={level === LicenseLevel.course}
-                      onChange={(e) => updateField({
-                        licenseDetails: {
-                          ...details,
-                          noDerivatives: e.target.checked,
-                          shareAlike: e.target.checked ? false : details.shareAlike,
-                        },
-                      })}
-                    />
-                  </ActionRow>
-                </Form.Group>
-                <div>
-                  <FormattedMessage {...messages.noDerivativesSectionDescription} />
-                </div>
+            </div>
+
+            {/* No Derivatives */}
+            <div className="border-primary-100 border-bottom pb-4">
+              <Form.Group>
+                <ActionRow>
+                  <Icon src={Nd} />
+                  <Form.Label className="my-0 text-primary-500">
+                    <FormattedMessage {...messages.noDerivativesCheckboxLabel} />
+                  </Form.Label>
+                  <ActionRow.Spacer />
+                  <CheckboxControl
+                    checked={details.noDerivatives}
+                    disabled={level === LicenseLevel.course}
+                    onChange={(e) => updateField({
+                      licenseDetails: {
+                        ...details,
+                        noDerivatives: e.target.checked,
+                        shareAlike: e.target.checked ? false : details.shareAlike,
+                      },
+                    })}
+                  />
+                </ActionRow>
+              </Form.Group>
+              <div>
+                <FormattedMessage {...messages.noDerivativesSectionDescription} />
               </div>
+            </div>
+
+            {/* Share Alike */}
+            <div>
+              <Form.Group>
+                <ActionRow>
+                  <Icon src={Sa} />
+                  <Form.Label className="my-0 text-primary-500">
+                    <FormattedMessage {...messages.shareAlikeCheckboxLabel} />
+                  </Form.Label>
+                  <ActionRow.Spacer />
+                  <CheckboxControl
+                    checked={details.shareAlike}
+                    disabled={level === LicenseLevel.course}
+                    onChange={(e) => updateField({
+                      licenseDetails: {
+                        ...details,
+                        shareAlike: e.target.checked,
+                        noDerivatives: e.target.checked ? false : details.noDerivatives,
+                      },
+                    })}
+                  />
+                </ActionRow>
+              </Form.Group>
               <div>
-                <Form.Group>
-                  <ActionRow>
-                    <Icon src={Sa} />
-                    <Form.Label className="my-0 text-primary-500">
-                      <FormattedMessage {...messages.shareAlikeCheckboxLabel} />
-                    </Form.Label>
-                    <ActionRow.Spacer />
-                    <CheckboxControl
-                      checked={details.shareAlike}
-                      disabled={level === LicenseLevel.course}
-                      onChange={(e) => updateField({
-                        licenseDetails: {
-                          ...details,
-                          shareAlike: e.target.checked,
-                          noDerivatives: e.target.checked ? false : details.noDerivatives,
-                        },
-                      })}
-                    />
-                  </ActionRow>
-                </Form.Group>
-                <div>
-                  <FormattedMessage {...messages.shareAlikeSectionDescription} />
-                </div>
+                <FormattedMessage {...messages.shareAlikeSectionDescription} />
               </div>
-            </Stack>
-          ) : null}
+            </div>
+          </Stack>
+        )}
       </Form.Group>
     </div>
-  )
-);
+  );
+};
 
 LicenseDetails.propTypes = {
   license: PropTypes.string.isRequired,
@@ -151,15 +162,6 @@ LicenseDetails.propTypes = {
     shareAlike: PropTypes.bool.isRequired,
   }).isRequired,
   level: PropTypes.string.isRequired,
-  // redux
-  updateField: PropTypes.func.isRequired,
 };
 
-export const mapStateToProps = () => ({});
-
-export const mapDispatchToProps = (dispatch) => ({
-  updateField: (stateUpdate) => dispatch(actions.video.updateField(stateUpdate)),
-});
-
-export const LicenseDetailsInternal = LicenseDetails; // For testing only
-export default connect(mapStateToProps, mapDispatchToProps)(LicenseDetails);
+export default LicenseDetails;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.tsx
index 0bf69f8ac6..5013e500f3 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.tsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.tsx
@@ -1,20 +1,31 @@
 import React from 'react';
 import {
-  render, screen, initializeMocks,
+  render, screen, initializeMocks, fireEvent,
 } from '@src/testUtils';
-
+import { useDispatch } from 'react-redux';
 import { actions } from '../../../../../../data/redux';
-import { LicenseDetailsInternal as LicenseDetails, mapStateToProps, mapDispatchToProps } from './LicenseDetails';
+import LicenseDetails from './LicenseDetails';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: jest.fn(),
+}));
 
 jest.mock('../../../../../../data/redux', () => ({
   actions: {
     video: {
-      updateField: jest.fn().mockName('actions.video.updateField'),
+      updateField: jest.fn().mockImplementation((payload) => ({
+        type: 'video/updateField',
+        payload,
+      })),
     },
   },
 }));
 
 describe('LicenseDetails', () => {
+  const mockDispatch = jest.fn();
+  const mockUpdateField = actions.video.updateField as unknown as jest.Mock;
+
   const props = {
     license: '',
     details: {
@@ -24,17 +35,18 @@ describe('LicenseDetails', () => {
       shareAlike: false,
     },
     level: 'course',
-    updateField: jest.fn().mockName('args.updateField'),
   };
 
   beforeEach(() => {
     initializeMocks();
+    jest.clearAllMocks();
+    (useDispatch as jest.Mock).mockReturnValue(mockDispatch);
   });
 
   describe('renders', () => {
     test('renders as expected with default props', () => {
       const { container } = render(<LicenseDetails {...props} />);
-      const reduxWrapper = (container.firstChild as HTMLElement);
+      const reduxWrapper = container.firstChild as HTMLElement;
       expect(reduxWrapper?.innerHTML).toBe('');
       expect(screen.queryByText('License Details')).not.toBeInTheDocument();
     });
@@ -46,38 +58,56 @@ describe('LicenseDetails', () => {
 
     test('renders as expected with level set to block and license set to select', () => {
       const { container } = render(<LicenseDetails {...props} level="block" license="select" />);
-      const reduxWrapper = (container.firstChild as HTMLElement);
+      const reduxWrapper = container.firstChild as HTMLElement;
       expect(reduxWrapper?.innerHTML).toBe('');
       expect(screen.queryByText('License Details')).not.toBeInTheDocument();
     });
 
-    test('renders as expected with level set to block and license set to all rights reserved', () => {
-      render(<LicenseDetails {...props} level="block" license="all-rights-reserved" />);
-      expect(screen.queryByText('License Details')).toBeInTheDocument();
-      expect(screen.queryByText('You reserve all rights for your work.')).toBeInTheDocument();
-    });
-
-    test('renders as expected with level set to block and license set to Creative Commons', () => {
+    test('clicking checkbox dispatches updateField', () => {
       render(<LicenseDetails {...props} level="block" license="creative-commons" />);
-      expect(screen.queryByText('License Details')).toBeInTheDocument();
-      expect(screen.getByRole('checkbox', { name: 'Attribution' })).toBeInTheDocument();
-      expect(screen.getByRole('checkbox', { name: 'Noncommercial' })).toBeInTheDocument();
-      expect(screen.getByRole('checkbox', { name: 'Share Alike' })).toBeInTheDocument();
-      expect(screen.getByRole('checkbox', { name: 'No Derivatives' })).toBeInTheDocument();
-    });
-  });
-  describe('mapStateToProps', () => {
-    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
-    test('mapStateToProps equals an empty object', () => {
-      // @ts-ignore-next-line
-      expect(mapStateToProps(testState)).toEqual({});
+
+      const checkbox = screen.getByRole('checkbox', { name: 'Noncommercial' });
+      fireEvent.click(checkbox);
+
+      const expectedPayload = {
+        licenseDetails: {
+          ...props.details,
+          noncommercial: true,
+        },
+      };
+
+      expect(mockUpdateField).toHaveBeenCalledWith(expectedPayload);
+      expect(mockDispatch).toHaveBeenCalledWith({
+        type: 'video/updateField',
+        payload: expectedPayload,
+      });
     });
-  });
-  describe('mapDispatchToProps', () => {
-    const dispatch = jest.fn();
-    test('updateField from actions.video.updateField', () => {
-      // @ts-ignore-next-line
-      expect(mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField));
+
+    test('clicking ShareAlike disables NoDerivatives', () => {
+      render(<LicenseDetails
+        {...props}
+        level="block"
+        license="creative-commons"
+        details={{ ...props.details, noDerivatives: true }}
+      />);
+
+      const shareAlikeCheckbox = screen.getByRole('checkbox', { name: 'Share Alike' });
+      fireEvent.click(shareAlikeCheckbox);
+
+      const expectedPayload = {
+        licenseDetails: {
+          attribution: false,
+          noncommercial: false,
+          shareAlike: true,
+          noDerivatives: false,
+        },
+      };
+
+      expect(mockUpdateField).toHaveBeenCalledWith(expectedPayload);
+      expect(mockDispatch).toHaveBeenCalledWith({
+        type: 'video/updateField',
+        payload: expectedPayload,
+      });
     });
   });
 });
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
index 7e21f5df30..59666104e4 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { connect, useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
   FormattedMessage,
@@ -21,14 +21,15 @@ import { LicenseLevel, LicenseNames, LicenseTypes } from '../../../../../../data
 const LicenseSelector = ({
   license,
   level,
-  // redux
-  courseLicenseType,
-  updateField,
 }) => {
   const intl = useIntl();
-  const { levelDescription } = hooks.determineText({ level });
-  const onLicenseChange = hooks.onSelectLicense({ dispatch: useDispatch() });
+  const dispatch = useDispatch();
   const ref = React.useRef();
+
+  const courseLicenseType = useSelector(selectors.video.courseLicenseType);
+  const { levelDescription } = hooks.determineText({ level });
+  const onLicenseChange = hooks.onSelectLicense({ dispatch });
+
   return (
     <>
       <ActionRow>
@@ -42,9 +43,25 @@ const LicenseSelector = ({
           onChange={(e) => onLicenseChange(e.target.value)}
         >
           {Object.entries(LicenseNames).map(([key, text]) => {
-            if (license === key) { return (<option value={LicenseTypes[key]} selected>{text}</option>); }
-            if (key === LicenseTypes.select) { return (<option hidden>{text}</option>); }
-            return (<option value={LicenseTypes[key]}>{text}</option>);
+            if (license === key) {
+              return (
+                <option key={key} value={LicenseTypes[key]} selected>
+                  {text}
+                </option>
+              );
+            }
+            if (key === LicenseTypes.select) {
+              return (
+                <option key={key} hidden>
+                  {text}
+                </option>
+              );
+            }
+            return (
+              <option key={key} value={LicenseTypes[key]}>
+                {text}
+              </option>
+            );
           })}
         </Form.Control>
         {level !== LicenseLevel.course ? (
@@ -55,7 +72,10 @@ const LicenseSelector = ({
               src={DeleteOutline}
               onClick={() => {
                 ref.current.value = courseLicenseType;
-                updateField({ licenseType: '', licenseDetails: {} });
+                dispatch(actions.video.updateField({
+                  licenseType: '',
+                  licenseDetails: {},
+                }));
               }}
               tooltipPlacement="top"
               tooltipContent={<FormattedMessage {...messages.deleteLicenseSelection} />}
@@ -72,18 +92,7 @@ const LicenseSelector = ({
 LicenseSelector.propTypes = {
   license: PropTypes.string.isRequired,
   level: PropTypes.string.isRequired,
-  // redux
-  courseLicenseType: PropTypes.string.isRequired,
-  updateField: PropTypes.func.isRequired,
 };
 
-export const mapStateToProps = (state) => ({
-  courseLicenseType: selectors.video.courseLicenseType(state),
-});
-
-export const mapDispatchToProps = (dispatch) => ({
-  updateField: (stateUpdate) => dispatch(actions.video.updateField(stateUpdate)),
-});
-
-export const LicenseSelectorInternal = LicenseSelector; // For testing only
-export default connect(mapStateToProps, mapDispatchToProps)(LicenseSelector);
+export const LicenseSelectorInternal = LicenseSelector; // For testing
+export default LicenseSelector;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.test.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.test.tsx
index b85057bb38..1a75da955f 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.test.tsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.test.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import {
-  render, fireEvent, screen, initializeMocks,
+  fireEvent, screen, initializeMocks,
 } from '@src/testUtils';
+import * as redux from 'react-redux';
+import editorRender from '../../../../../../editorTestRender';
 import { LicenseSelectorInternal } from './LicenseSelector';
 import * as hooks from './hooks';
+import { actions } from '../../../../../../data/redux';
 
 jest.mock('./hooks', () => ({
   determineText: jest.fn(() => ({ levelDescription: 'Test level description' })),
@@ -17,24 +20,31 @@ const LicenseTypes = {
 };
 const LicenseLevel = { course: 'course', video: 'video' };
 
-describe('LicenseSelectorInternal', () => {
-  const updateField = jest.fn();
+describe('LicenseSelectorInternal (with hooks)', () => {
   const onLicenseChange = jest.fn();
+  const dispatch = jest.fn();
+
   const props = {
     license: LicenseTypes.select,
     level: LicenseLevel.video,
-    courseLicenseType: LicenseTypes.select,
-    updateField,
+  };
+
+  const initialState = {
+    video: {
+      courseLicenseType: LicenseTypes.select,
+    },
   };
 
   beforeEach(() => {
     initializeMocks();
     (hooks.onSelectLicense as jest.Mock).mockReturnValue(onLicenseChange);
     (hooks.determineText as jest.Mock).mockReturnValue({ levelDescription: 'Test level description' });
+
+    jest.spyOn(redux, 'useDispatch').mockReturnValue(dispatch);
   });
 
   it('renders select with correct options and default value', () => {
-    render(<LicenseSelectorInternal {...props} />);
+    editorRender(<LicenseSelectorInternal {...props} />, { initialState });
     const select = screen.getByRole('combobox');
     expect(select).toBeInTheDocument();
     expect((select as HTMLSelectElement).value).toBe(props.license);
@@ -43,44 +53,51 @@ describe('LicenseSelectorInternal', () => {
   });
 
   it('disables select when level is course', () => {
-    render(<LicenseSelectorInternal {...props} level={LicenseLevel.course} />);
+    editorRender(<LicenseSelectorInternal {...props} level={LicenseLevel.course} />, { initialState });
     expect(screen.getByRole('combobox')).toBeDisabled();
   });
 
   it('shows delete button when level is not course', () => {
-    render(<LicenseSelectorInternal {...props} />);
+    editorRender(<LicenseSelectorInternal {...props} />, { initialState });
     expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
   it('does not show delete button when level is course', () => {
-    render(<LicenseSelectorInternal {...props} level={LicenseLevel.course} />);
+    editorRender(<LicenseSelectorInternal {...props} level={LicenseLevel.course} />, { initialState });
     expect(screen.queryByRole('button')).not.toBeInTheDocument();
   });
 
   it('calls onLicenseChange when select changes', () => {
-    render(<LicenseSelectorInternal {...props} />);
+    editorRender(<LicenseSelectorInternal {...props} />, { initialState });
     fireEvent.change(screen.getByRole('combobox'), { target: { value: LicenseTypes.select } });
     expect(onLicenseChange).toHaveBeenCalledWith(LicenseTypes.select);
   });
 
-  it('calls updateField and resets select when delete button clicked', () => {
-    render(<LicenseSelectorInternal {...props} />);
+  it('dispatches updateField and resets select when delete button clicked', () => {
+    editorRender(<LicenseSelectorInternal {...props} />, { initialState });
     fireEvent.click(screen.getByRole('button'));
-    expect(updateField).toHaveBeenCalledWith({ licenseType: '', licenseDetails: {} });
+
+    expect(dispatch).toHaveBeenCalledWith(actions.video.updateField({
+      licenseType: '',
+      licenseDetails: {},
+    }));
   });
 
   it('renders level description', () => {
-    render(<LicenseSelectorInternal {...props} />);
+    editorRender(<LicenseSelectorInternal {...props} />, { initialState });
     expect(screen.getByText('Test level description')).toBeInTheDocument();
   });
 
   it('renders border when license is not select', () => {
-    const { container } = render(<LicenseSelectorInternal {...props} license={LicenseTypes.allRightsReserved} />);
+    const { container } = editorRender(
+      <LicenseSelectorInternal {...props} license={LicenseTypes.allRightsReserved} />,
+      { initialState },
+    );
     expect(container.querySelector('.border-primary-100')).toBeInTheDocument();
   });
 
   it('does not render border when license is select', () => {
-    const { container } = render(<LicenseSelectorInternal {...props} license={LicenseTypes.select} />);
+    const { container } = editorRender(<LicenseSelectorInternal {...props} />, { initialState });
     expect(container.querySelector('.border-primary-100')).not.toBeInTheDocument();
   });
 });
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx
index 9a7af9ae6e..3bf573afc5 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx
@@ -1,14 +1,8 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import {
-  FormattedMessage,
-  useIntl,
-} from '@edx/frontend-platform/i18n';
-import {
-  Button,
-  Stack,
-} from '@openedx/paragon';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { Button, Stack } from '@openedx/paragon';
 import { Add } from '@openedx/paragon/icons';
 
 import { actions, selectors } from '../../../../../../data/redux';
@@ -20,19 +14,23 @@ import LicenseSelector from './LicenseSelector';
 import LicenseDetails from './LicenseDetails';
 import LicenseDisplay from './LicenseDisplay';
 
-/**
- * Collapsible Form widget controlling video license type and details
- */
-const LicenseWidget = ({
-  // redux
-  isLibrary,
-  licenseType,
-  licenseDetails,
-  courseLicenseType,
-  courseLicenseDetails,
-  updateField,
-}) => {
+const LicenseWidget = () => {
   const intl = useIntl();
+  const dispatch = useDispatch();
+
+  // Redux state selectors
+  const isLibrary = useSelector(selectors.app.isLibrary);
+  const licenseType = useSelector(selectors.video.licenseType);
+  const licenseDetails = useSelector(selectors.video.licenseDetails);
+  const courseLicenseType = useSelector(selectors.video.courseLicenseType);
+  const courseLicenseDetails = useSelector(selectors.video.courseLicenseDetails);
+
+  // Dispatch action
+  const updateField = (stateUpdate) => {
+    dispatch(actions.video.updateField(stateUpdate));
+  };
+
+  // Business logic hooks
   const { license, details, level } = hooks.determineLicense({
     isLibrary,
     licenseType,
@@ -41,6 +39,7 @@ const LicenseWidget = ({
     courseLicenseDetails,
   });
   const { licenseDescription, levelDescription } = hooks.determineText({ level });
+
   return (
     <CollapsibleFormWidget
       subtitle={(
@@ -83,26 +82,13 @@ const LicenseWidget = ({
 };
 
 LicenseWidget.propTypes = {
-  // redux
-  isLibrary: PropTypes.bool.isRequired,
-  licenseType: PropTypes.string.isRequired,
-  licenseDetails: PropTypes.shape({}).isRequired,
-  courseLicenseType: PropTypes.string.isRequired,
-  courseLicenseDetails: PropTypes.shape({}).isRequired,
-  updateField: PropTypes.func.isRequired,
+  // If needed for test or wrapper use
+  isLibrary: PropTypes.bool,
+  licenseType: PropTypes.string,
+  licenseDetails: PropTypes.shape({}),
+  courseLicenseType: PropTypes.string,
+  courseLicenseDetails: PropTypes.shape({}),
+  updateField: PropTypes.func,
 };
 
-export const mapStateToProps = (state) => ({
-  isLibrary: selectors.app.isLibrary(state),
-  licenseType: selectors.video.licenseType(state),
-  licenseDetails: selectors.video.licenseDetails(state),
-  courseLicenseType: selectors.video.courseLicenseType(state),
-  courseLicenseDetails: selectors.video.courseLicenseDetails(state),
-});
-
-export const mapDispatchToProps = (dispatch) => ({
-  updateField: (stateUpdate) => dispatch(actions.video.updateField(stateUpdate)),
-});
-
-export const LicenseWidgetInternal = LicenseWidget; // For testing only
-export default connect(mapStateToProps, mapDispatchToProps)(LicenseWidget);
+export default LicenseWidget;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.test.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.test.tsx
index 8ca13fc092..61f2ce83eb 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.test.tsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.test.tsx
@@ -1,55 +1,71 @@
 import React from 'react';
-import { render, screen, initializeMocks } from '@src/testUtils';
-import { formatMessage } from '../../../../../../testUtils';
-import { LicenseWidgetInternal as LicenseWidget } from '.';
+import { screen } from '@testing-library/react';
+import { initializeMocks } from '@src/testUtils';
+import editorRender from '../../../../../../editorTestRender';
+import LicenseWidget from '.';
 
-jest.mock('../../../../../../data/redux', () => ({
-  actions: {
-    video: {
-      updateField: jest.fn().mockName('actions.video.updateField'),
-    },
-  },
-  selectors: {
+describe('LicenseWidget', () => {
+  const baseState = {
     app: {
-      isLibrary: jest.fn(state => ({ isLibrary: state })),
+      learningContextId: 'random-id', // not a library ID, so isLibrary returns false
+      blockId: null,
     },
     video: {
-      licenseType: jest.fn(state => ({ licenseType: state })),
-      licenseDetails: jest.fn(state => ({ licenseDetails: state })),
-      courseLicenseType: jest.fn(state => ({ courseLicenseType: state })),
-      courseLicenseDetails: jest.fn(state => ({ courseLicenseDetails: state })),
+      licenseType: '',
+      licenseDetails: {},
+      courseLicenseType: 'all-rights-reserved',
+      courseLicenseDetails: {},
     },
-  },
-}));
-
-describe('LicenseWidget', () => {
-  const props = {
-    intl: { formatMessage },
-    isLibrary: false,
-    licenseType: '',
-    licenseDetails: {},
-    courseLicenseType: 'all-rights-reserved',
-    courseLicenseDetails: {},
-    updateField: jest.fn().mockName('args.updateField'),
+    requests: {},
   };
-
   beforeEach(() => {
-    initializeMocks();
+    initializeMocks({ initialState: baseState });
   });
 
-  test('renders as expected with default props', () => {
-    render(<LicenseWidget {...props} />);
+  test('renders as expected with default props (no license)', () => {
+    editorRender(<LicenseWidget />, { initialState: baseState });
+
     expect(screen.getByText('License')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Add a license for this video' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Add a license for this video' }),
+    ).toBeInTheDocument();
   });
-  test('renders as expected with isLibrary true', () => {
-    render(<LicenseWidget {...props} isLibrary licenseType="all-rights-reserved" />);
+
+  test('renders without add button when isLibrary is true', () => {
+    const isLibraryState = {
+      ...baseState,
+      app: {
+        ...baseState.app,
+        learningContextId: 'library-v1:abc123', // will trigger isLibrary selector
+      },
+      video: {
+        ...baseState.video,
+        licenseType: 'all-rights-reserved',
+      },
+    };
+
+    editorRender(<LicenseWidget />, { initialState: isLibraryState });
+
     expect(screen.getByText('License')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Add a license for this video' })).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Add a license for this video' }),
+    ).not.toBeInTheDocument();
   });
-  test('renders as expected with licenseType defined', () => {
-    render(<LicenseWidget {...props} licenseType="all-rights-reserved" />);
+
+  test('renders as expected when licenseType is defined', () => {
+    const licenseTypeState = {
+      ...baseState,
+      video: {
+        ...baseState.video,
+        licenseType: 'all-rights-reserved',
+      },
+    };
+
+    editorRender(<LicenseWidget />, { initialState: licenseTypeState });
+
     expect(screen.getByText('License')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Add a license for this video' })).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Add a license for this video' }),
+    ).not.toBeInTheDocument();
   });
 });
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx
index 253d3bcbfe..6575e9d098 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx
@@ -1,15 +1,7 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import {
-  FormattedMessage,
-  injectIntl,
-  intlShape,
-} from '@edx/frontend-platform/i18n';
-import {
-  Hyperlink,
-  Form,
-} from '@openedx/paragon';
+import { useSelector, useDispatch } from 'react-redux';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Form } from '@openedx/paragon';
 
 import { selectors, actions } from '../../../../../../data/redux';
 import CollapsibleFormWidget from '../CollapsibleFormWidget';
@@ -19,30 +11,31 @@ import * as hooks from './hooks';
 /**
  * Collapsible Form widget controlling video thumbnail
  */
-const SocialShareWidget = ({
-  // injected
-  intl,
-  // redux
-  allowVideoSharing,
-  isLibrary,
-  videoSharingEnabledForAll,
-  videoSharingEnabledForCourse,
-  videoSharingLearnMoreLink,
-  updateField,
-}) => {
+const SocialShareWidget = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const allowVideoSharing = useSelector(selectors.video.allowVideoSharing);
+  const isLibrary = useSelector(selectors.app.isLibrary);
+  const videoSharingLearnMoreLink = useSelector(selectors.video.videoSharingLearnMoreLink);
+  const videoSharingEnabledForAll = useSelector(selectors.video.videoSharingEnabledForAll);
+  const videoSharingEnabledForCourse = useSelector(selectors.video.videoSharingEnabledForCourse);
+
   const isSetByCourse = allowVideoSharing.level === 'course';
   const videoSharingEnabled = isLibrary ? videoSharingEnabledForAll : videoSharingEnabledForCourse;
   const learnMoreLink = videoSharingLearnMoreLink || 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/social_sharing.html';
-  const onSocialSharingCheckboxChange = hooks.useTrackSocialSharingChange({ updateField });
 
-  const getSubtitle = () => {
-    if (allowVideoSharing.value) {
-      return intl.formatMessage(messages.enabledSubtitle);
-    }
-    return intl.formatMessage(messages.disabledSubtitle);
-  };
+  const onSocialSharingCheckboxChange = hooks.useTrackSocialSharingChange({
+    updateField: (stateUpdate) => dispatch(actions.video.updateField(stateUpdate)),
+  });
+
+  const getSubtitle = () => (allowVideoSharing.value
+    ? intl.formatMessage(messages.enabledSubtitle)
+    : intl.formatMessage(messages.disabledSubtitle));
 
-  return (videoSharingEnabled ? (
+  if (!videoSharingEnabled) { return null; }
+
+  return (
     <CollapsibleFormWidget
       fontSize="x-small"
       title={intl.formatMessage(messages.title)}
@@ -72,49 +65,16 @@ const SocialShareWidget = ({
         </>
       )}
       <div className="mt-3">
-        <Hyperlink className="text-primary-500" destination={learnMoreLink} target="_blank">
+        <Hyperlink
+          className="text-primary-500"
+          destination={learnMoreLink}
+          target="_blank"
+        >
           {intl.formatMessage(messages.learnMoreLinkLabel)}
         </Hyperlink>
       </div>
     </CollapsibleFormWidget>
-  ) : null);
-};
-
-SocialShareWidget.defaultProps = {
-  allowVideoSharing: {
-    level: 'block',
-    value: false,
-  },
-  videoSharingEnabledForCourse: false,
-  videoSharingEnabledForAll: false,
-};
-
-SocialShareWidget.propTypes = {
-  // injected
-  intl: intlShape.isRequired,
-  // redux
-  allowVideoSharing: PropTypes.shape({
-    level: PropTypes.string.isRequired,
-    value: PropTypes.bool.isRequired,
-  }),
-  isLibrary: PropTypes.bool.isRequired,
-  videoSharingEnabledForAll: PropTypes.bool,
-  videoSharingEnabledForCourse: PropTypes.bool,
-  videoSharingLearnMoreLink: PropTypes.string.isRequired,
-  updateField: PropTypes.func.isRequired,
+  );
 };
 
-export const mapStateToProps = (state) => ({
-  allowVideoSharing: selectors.video.allowVideoSharing(state),
-  isLibrary: selectors.app.isLibrary(state),
-  videoSharingLearnMoreLink: selectors.video.videoSharingLearnMoreLink(state),
-  videoSharingEnabledForAll: selectors.video.videoSharingEnabledForAll(state),
-  videoSharingEnabledForCourse: selectors.video.videoSharingEnabledForCourse(state),
-});
-
-export const mapDispatchToProps = (dispatch) => ({
-  updateField: (stateUpdate) => dispatch(actions.video.updateField(stateUpdate)),
-});
-
-export const SocialShareWidgetInternal = SocialShareWidget; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SocialShareWidget));
+export default SocialShareWidget;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.tsx
index b93e847a1d..ace64fe75a 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.tsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.tsx
@@ -1,63 +1,55 @@
 import React from 'react';
 import {
-  render, screen, initializeMocks,
+  screen, initializeMocks,
   fireEvent,
 } from '@src/testUtils';
 
-import { formatMessage } from '../../../../../../testUtils';
-import { SocialShareWidgetInternal as SocialShareWidget } from '.';
+import SocialShareWidget from '.';
 import * as hooks from './hooks';
+import editorRender from '../../../../../../editorTestRender';
+import { initializeStore } from '../../../../../../data/redux';
 
-jest.mock('../../../../../../data/redux', () => ({
-  actions: {
+describe('SocialShareWidget', () => {
+  const initialState = {
     video: {
-      updateField: jest.fn().mockName('actions.video.updateField'),
+      allowVideoSharing: { level: 'block', value: false },
+      videoSharingEnabledForAll: false,
+      videoSharingEnabledForCourse: false,
+      videoSharingLearnMoreLink: 'sOMeURl.cOM',
     },
-  },
-  selectors: {
     app: {
-      isLibrary: jest.fn(state => ({ isLibrary: state })),
-    },
-    video: {
-      allowVideoSharing: jest.fn(state => ({ allowVideoSharing: state })),
-      videoSharingEnabledForAll: jest.fn(state => ({ videoSharingEnabledForAll: state })),
-      videoSharingEnabledForCourse: jest.fn(state => ({ videoSharingEnabledForCourse: state })),
-      videoSharingLearnMoreLink: jest.fn(state => ({ videoSharingLearnMoreLink: state })),
-    },
-  },
-}));
-
-describe('SocialShareWidget', () => {
-  const props = {
-    intl: { formatMessage },
-    videoSharingEnabledForCourse: false,
-    videoSharingEnabledForAll: false,
-    isLibrary: false,
-    allowVideoSharing: {
-      level: 'block',
-      value: false,
+      isLibrary: false,
     },
-    videoSharingLearnMoreLink: 'sOMeURl.cOM',
-    updateField: jest.fn().mockName('args.updateField'),
   };
 
   beforeEach(() => {
-    initializeMocks();
+    initializeMocks({ initialState, initializeStore });
     jest.spyOn(hooks, 'useTrackSocialSharingChange').mockReturnValue(jest.fn());
   });
 
   describe('rendered with videoSharingEnabled false', () => {
     describe('with default props', () => {
       it('should return null', () => {
-        const { container } = render(<SocialShareWidget {...props} />);
+        const { container } = editorRender(<SocialShareWidget />, { initialState });
         const reduxWrapper = container.firstChild;
         expect(reduxWrapper?.textContent).toBe('');
       });
     });
 
     describe('with videoSharingEnabledForAll false and isLibrary true', () => {
-      it('should return null', () => {
-        const { container } = render(<SocialShareWidget {...props} isLibrary />);
+      it('should return null when sharing is disabled', () => {
+        const modifiedInitialState = {
+          ...initialState,
+          app: {
+            isLibrary: true,
+          },
+          video: {
+            ...initialState.video,
+            videoSharingEnabledForAll: false,
+            videoSharingEnabledForCourse: false,
+          },
+        };
+        const { container } = editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
         const reduxWrapper = container.firstChild;
         expect(reduxWrapper?.textContent).toBe('');
       });
@@ -65,7 +57,18 @@ describe('SocialShareWidget', () => {
 
     describe('with videoSharingEnabledForCourse and isLibrary false and videoSharingEnabledForAll true', () => {
       it('should return null', () => {
-        const { container } = render(<SocialShareWidget {...props} videoSharingEnabledForAll />);
+        const modifiedInitialState = {
+          ...initialState,
+          app: {
+            isLibrary: true,
+          },
+          video: {
+            ...initialState.video,
+            videoSharingEnabledForAll: true,
+            videoSharingEnabledForCourse: false,
+          },
+        };
+        const { container } = editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
         const reduxWrapper = container.firstChild;
         expect(reduxWrapper?.textContent).toBe('');
       });
@@ -76,25 +79,27 @@ describe('SocialShareWidget', () => {
     describe('and allowVideoSharing value equals true', () => {
       describe(' with level equal to course', () => {
         it('should have setting location message', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForCourse
-            allowVideoSharing={{
-              level: 'course',
-              value: true,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'course', value: true },
+              videoSharingEnabledForCourse: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           expect(screen.getByText('Change this setting on the course outline page.')).toBeInTheDocument();
         });
         it('should have checkbox disabled prop equal true', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForCourse
-            allowVideoSharing={{
-              level: 'course',
-              value: true,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'course', value: true },
+              videoSharingEnabledForCourse: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' });
           expect(checkbox).toBeInTheDocument();
           expect(checkbox).toBeDisabled();
@@ -102,36 +107,39 @@ describe('SocialShareWidget', () => {
       });
       describe(' with level equal to block', () => {
         it('should not have setting location message', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForCourse
-            allowVideoSharing={{
-              level: 'block',
-              value: true,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'block', value: true },
+              videoSharingEnabledForCourse: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           expect(screen.queryByText('Change this setting on the course outline page.')).not.toBeInTheDocument();
         });
         it('should not have override note', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForCourse
-            allowVideoSharing={{
-              level: 'block',
-              value: true,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'block', value: true },
+              videoSharingEnabledForCourse: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           expect(screen.queryByText('Note: This setting is overridden by the course outline page.')).not.toBeInTheDocument();
         });
         it('should have checkbox disabled prop equal false', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForCourse
-            allowVideoSharing={{
-              level: 'block',
-              value: true,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'block', value: true },
+              videoSharingEnabledForCourse: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' });
           expect(checkbox).toBeInTheDocument();
           expect(checkbox).not.toBeDisabled();
@@ -139,53 +147,64 @@ describe('SocialShareWidget', () => {
       });
       describe('isLibrary equals true', () => {
         it('should not have setting location message', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForAll
-            isLibrary
-            allowVideoSharing={{
-              level: 'block',
-              value: true,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            app: {
+              isLibrary: true,
+            },
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'block', value: true },
+              videoSharingEnabledForAll: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           expect(screen.queryByText('Change this setting on the course outline page.')).not.toBeInTheDocument();
         });
         it('should not have override note', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForAll
-            isLibrary
-            allowVideoSharing={{
-              level: 'block',
-              value: true,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            app: {
+              isLibrary: true,
+            },
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'block', value: true },
+              videoSharingEnabledForAll: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           expect(screen.queryByText('Note: This setting is overridden by the course outline page.')).not.toBeInTheDocument();
         });
         it('should have checkbox disabled prop equal false', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForAll
-            isLibrary
-            allowVideoSharing={{
-              level: 'block',
-              value: true,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            app: {
+              isLibrary: true, learningContextId: 'lib-v1:abc123', blockId: 'lb:xyz',
+            },
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'block', value: true },
+              videoSharingEnabledForAll: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' });
           expect(checkbox).toBeInTheDocument();
           expect(checkbox).not.toBeDisabled();
         });
       });
       it('should have subtitle with text that reads Enabled', () => {
-        render(<SocialShareWidget
-          {...props}
-          videoSharingEnabledForCourse
-          allowVideoSharing={{
-            level: 'block',
-            value: true,
-          }}
-        />);
+        const modifiedInitialState = {
+          ...initialState,
+
+          video: {
+            ...initialState.video,
+            allowVideoSharing: { level: 'block', value: true },
+            videoSharingEnabledForCourse: true,
+          },
+        };
+        editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
         expect(screen.getByText('Social Sharing')).toBeInTheDocument();
         fireEvent.click(screen.getByText('Social Sharing'));
         const subtitle = screen.getByText('Enabled');
@@ -196,25 +215,27 @@ describe('SocialShareWidget', () => {
     describe('and allowVideoSharing value equals false', () => {
       describe(' with level equal to course', () => {
         it('should have setting location message', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForCourse
-            allowVideoSharing={{
-              level: 'course',
-              value: false,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'course', value: true },
+              videoSharingEnabledForCourse: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           expect(screen.getByText('Change this setting on the course outline page.')).toBeInTheDocument();
         });
         it('should have checkbox disabled prop equal true', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForCourse
-            allowVideoSharing={{
-              level: 'course',
-              value: false,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'course', value: true },
+              videoSharingEnabledForCourse: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' });
           expect(checkbox).toBeInTheDocument();
           expect(checkbox).toBeDisabled();
@@ -223,36 +244,39 @@ describe('SocialShareWidget', () => {
 
       describe(' with level equal to block', () => {
         it('should not have setting location message', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForCourse
-            allowVideoSharing={{
-              level: 'block',
-              value: false,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'block', value: false },
+              videoSharingEnabledForCourse: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           expect(screen.queryByText('Change this setting on the course outline page.')).not.toBeInTheDocument();
         });
         it('should not have override note', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForCourse
-            allowVideoSharing={{
-              level: 'block',
-              value: false,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'block', value: false },
+              videoSharingEnabledForCourse: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           expect(screen.queryByText('Note: This setting is overridden by the course outline page.')).not.toBeInTheDocument();
         });
         it('should have checkbox disabled prop equal false', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForCourse
-            allowVideoSharing={{
-              level: 'block',
-              value: false,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'block', value: false },
+              videoSharingEnabledForCourse: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' });
           expect(checkbox).toBeInTheDocument();
           expect(checkbox).toBeEnabled();
@@ -261,53 +285,63 @@ describe('SocialShareWidget', () => {
 
       describe('isLibrary equals true', () => {
         it('should not have setting location message', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForAll
-            isLibrary
-            allowVideoSharing={{
-              level: 'block',
-              value: false,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            app: {
+              isLibrary: true, learningContextId: 'lib-v1:abc123', blockId: 'lb:xyz',
+            },
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'block', value: false },
+              videoSharingEnabledForAll: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           expect(screen.queryByText('Change this setting on the course outline page.')).not.toBeInTheDocument();
         });
         it('should not have override note', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForAll
-            isLibrary
-            allowVideoSharing={{
-              level: 'block',
-              value: false,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            app: {
+              isLibrary: true, learningContextId: 'lib-v1:abc123', blockId: 'lb:xyz',
+            },
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'block', value: false },
+              videoSharingEnabledForAll: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           expect(screen.queryByText('Note: This setting is overridden by the course outline page.')).not.toBeInTheDocument();
         });
         it('should have checkbox disabled prop equal false', () => {
-          render(<SocialShareWidget
-            {...props}
-            videoSharingEnabledForAll
-            isLibrary
-            allowVideoSharing={{
-              level: 'block',
-              value: false,
-            }}
-          />);
+          const modifiedInitialState = {
+            ...initialState,
+            app: {
+              isLibrary: true, learningContextId: 'lib-v1:abc123', blockId: 'lb:xyz',
+            },
+            video: {
+              ...initialState.video,
+              allowVideoSharing: { level: 'block', value: false },
+              videoSharingEnabledForAll: true,
+            },
+          };
+          editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
           const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' });
           expect(checkbox).toBeInTheDocument();
           expect(checkbox).toBeEnabled();
         });
       });
       it('should have subtitle with text that reads Enabled', () => {
-        render(<SocialShareWidget
-          {...props}
-          videoSharingEnabledForCourse
-          allowVideoSharing={{
-            level: 'block',
-            value: false,
-          }}
-        />);
+        const modifiedInitialState = {
+          ...initialState,
+          video: {
+            ...initialState.video,
+            allowVideoSharing: { level: 'block', value: false },
+            videoSharingEnabledForCourse: true,
+          },
+        };
+        editorRender(<SocialShareWidget />, { initialState: modifiedInitialState });
         expect(screen.getByText('Social Sharing')).toBeInTheDocument();
         fireEvent.click(screen.getByText('Social Sharing'));
         const subtitle = screen.getByText('Disabled');
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
index 47e66306c4..d3ff97483b 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import { connect, useDispatch } from 'react-redux';
-import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   FormattedMessage,
-  injectIntl,
-  intlShape,
+  useIntl,
 } from '@edx/frontend-platform/i18n';
 import {
   Image,
@@ -28,30 +26,30 @@ import { FileInput } from '../../../../../../sharedComponents/FileInput';
 import ErrorAlert from '../../../../../../sharedComponents/ErrorAlerts/ErrorAlert';
 import { ErrorContext } from '../../../../hooks';
 
-/**
- * Collapsible Form widget controlling video thumbnail
- */
-const ThumbnailWidget = ({
-  // injected
-  intl,
-  // redux
-  isLibrary,
-  allowThumbnailUpload,
-  thumbnail,
-  videoId,
-}) => {
+const ThumbnailWidget = () => {
   const dispatch = useDispatch();
+  const intl = useIntl();
+
+  // Redux selectors
+  const isLibrary = useSelector(selectors.app.isLibrary);
+  const allowThumbnailUpload = useSelector(selectors.video.allowThumbnailUpload);
+  const thumbnail = useSelector(selectors.video.thumbnail);
+  const videoId = useSelector(selectors.video.videoId);
+
   const [error] = React.useContext(ErrorContext).thumbnail;
   const imgRef = React.useRef();
   const [thumbnailSrc, setThumbnailSrc] = React.useState(thumbnail);
+
   const { fileSizeError } = hooks.fileSizeError();
   const fileInput = hooks.fileInput({
     setThumbnailSrc,
     imgRef,
     fileSizeError,
   });
+
   const edxVideo = isEdxVideo(videoId);
   const deleteThumbnail = hooks.deleteThumbnail({ dispatch });
+
   const getSubtitle = () => {
     if (edxVideo) {
       if (thumbnail) {
@@ -61,6 +59,7 @@ const ThumbnailWidget = ({
     }
     return intl.formatMessage(messages.unavailableSubtitle);
   };
+
   return (!isLibrary && edxVideo ? (
     <CollapsibleFormWidget
       fontSize="x-small"
@@ -75,11 +74,13 @@ const ThumbnailWidget = ({
       >
         <FormattedMessage {...messages.fileSizeError} />
       </ErrorAlert>
+
       {!allowThumbnailUpload && (
         <Alert variant="light">
           <FormattedMessage {...messages.unavailableMessage} />
         </Alert>
       )}
+
       {thumbnail ? (
         <Stack direction="horizontal" gap={3}>
           <Image
@@ -125,23 +126,6 @@ const ThumbnailWidget = ({
   ) : null);
 };
 
-ThumbnailWidget.propTypes = {
-  // injected
-  intl: intlShape.isRequired,
-  // redux
-  isLibrary: PropTypes.bool.isRequired,
-  allowThumbnailUpload: PropTypes.bool.isRequired,
-  thumbnail: PropTypes.string.isRequired,
-  videoId: PropTypes.string.isRequired,
-};
-export const mapStateToProps = (state) => ({
-  isLibrary: selectors.app.isLibrary(state),
-  allowThumbnailUpload: selectors.video.allowThumbnailUpload(state),
-  thumbnail: selectors.video.thumbnail(state),
-  videoId: selectors.video.videoId(state),
-});
-
-export const mapDispatchToProps = {};
+ThumbnailWidget.propTypes = {};
 
-export const ThumbnailWidgetInternal = ThumbnailWidget; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ThumbnailWidget));
+export default ThumbnailWidget;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.test.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.test.tsx
index 3042763775..91cfe19fac 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.test.tsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.test.tsx
@@ -1,25 +1,9 @@
 import React from 'react';
-import { render, screen, initializeMocks } from '@src/testUtils';
+import { screen, initializeMocks } from '@src/testUtils';
 import { formatMessage } from '../../../../../../testUtils';
-import { ThumbnailWidgetInternal as ThumbnailWidget } from '.';
-
-jest.mock('../../../../../../data/redux', () => ({
-  actions: {
-    video: {
-      updateField: jest.fn().mockName('actions.video.updateField'),
-    },
-  },
-  selectors: {
-    video: {
-      allowThumbnailUpload: jest.fn(state => ({ allowThumbnailUpload: state })),
-      thumbnail: jest.fn(state => ({ thumbnail: state })),
-      videoId: jest.fn(state => ({ videoId: state })),
-    },
-    app: {
-      isLibrary: jest.fn(state => ({ isLibrary: state })),
-    },
-  },
-}));
+import ThumbnailWidget from '.';
+import editorRender from '../../../../../../editorTestRender';
+import { initializeStore } from '../../../../../../data/redux';
 
 jest.mock('../../../../../../data/services/cms/api', () => ({
   isEdxVideo: (args) => (args),
@@ -36,38 +20,89 @@ describe('ThumbnailWidget', () => {
     videoId: '',
     updateField: jest.fn().mockName('args.updateField'),
   };
+  const initialState = {
+    app: {
+      isLibrary: false,
+    },
+    video: {
+      allowThumbnailUpload: false,
+      thumbnail: '',
+      videoId: '',
+    },
+  };
 
   beforeEach(() => {
-    initializeMocks();
+    initializeMocks({ initialState, initializeStore });
   });
 
   describe('snapshots', () => {
     test('snapshots: renders as expected with default props', () => {
-      const { container } = render(<ThumbnailWidget {...props} />);
+      const { container } = editorRender(<ThumbnailWidget />, { initialState });
       const reduxWrapper = container.getRootNode();
       expect(reduxWrapper.textContent).toBe(null);
     });
     test('snapshots: renders as expected with isLibrary true', () => {
-      const { container } = render(<ThumbnailWidget {...props} isLibrary />);
+      const modifiedInitialState = {
+        ...initialState,
+        app: {
+          ...initialState.app,
+          isLibrary: true,
+          learningContextId: 'lib-v1:abc123',
+          blockId: 'lb:xyz',
+        },
+      };
+      const { container } = editorRender(<ThumbnailWidget />, { initialState: modifiedInitialState });
       const reduxWrapper = container.getRootNode();
       expect(reduxWrapper.textContent).toBe(null);
     });
     test('snapshots: renders as expected with a thumbnail provided', () => {
-      render(<ThumbnailWidget {...props} thumbnail="sOMeUrl" videoId="sOMeViDEoID" />);
+      const modifiedInitialState = {
+        ...initialState,
+        video: {
+          allowThumbnailUpload: false,
+          thumbnail: 'sOMeUrl',
+          videoId: 'sOMeViDEoID',
+        },
+      };
+      editorRender(<ThumbnailWidget />, { initialState: modifiedInitialState });
       expect(screen.getByRole('img', { name: 'Image used as thumbnail for video' })).toBeInTheDocument();
     });
     test('snapshots: renders as expected where thumbnail uploads are allowed', () => {
-      const { container } = render(<ThumbnailWidget {...props} thumbnail="sOMeUrl" videoId="sOMeViDEoID" allowThumbnailUpload />);
+      const modifiedInitialState = {
+        ...initialState,
+        video: {
+          allowThumbnailUpload: true,
+          thumbnail: 'sOMeUrl',
+          videoId: 'sOMeViDEoID',
+        },
+      };
+      const { container } = editorRender(<ThumbnailWidget />, { initialState: modifiedInitialState });
       const reduxWrapper = container.getRootNode();
       expect(reduxWrapper.textContent).toBe(null);
     });
     test('snapshots: renders as expected where videoId is valid', () => {
-      render(<ThumbnailWidget {...props} thumbnail="sOMeUrl" allowThumbnailUpload videoId="sOMeViDEoID" />);
+      const modifiedInitialState = {
+        ...initialState,
+        video: {
+          allowThumbnailUpload: true,
+          thumbnail: 'sOMeUrl',
+          videoId: 'sOMeViDEoID',
+        },
+      };
+      editorRender(<ThumbnailWidget {...props} />, { initialState: modifiedInitialState });
       expect(screen.getByRole('img', { name: 'Image used as thumbnail for video' })).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Thumbnail' })).toBeInTheDocument();
     });
     test('snapshots: renders as expected where videoId is valid and no thumbnail', () => {
-      render(<ThumbnailWidget {...props} allowThumbnailUpload videoId="sOMeViDEoID" />);
+      const modifiedInitialState = {
+        ...initialState,
+        video: {
+          allowThumbnailUpload: true,
+          thumbnail: '',
+          videoId: 'sOMeViDEoID',
+        },
+      };
+      editorRender(<ThumbnailWidget />, { initialState: modifiedInitialState });
       expect(screen.getByRole('button', { name: 'Thumbnail' })).toBeInTheDocument();
       expect(screen.queryByRole('img', { name: 'Image used as thumbnail for video' })).not.toBeInTheDocument();
     });
diff --git a/src/editors/data/redux/index.ts b/src/editors/data/redux/index.ts
index eaaf510b62..c6704174e0 100644
--- a/src/editors/data/redux/index.ts
+++ b/src/editors/data/redux/index.ts
@@ -12,7 +12,7 @@ import type { RequestKeys, RequestStates } from '../constants/requests';
 import { AdvancedProblemType, ProblemType } from '../constants/problem';
 
 export { default as thunkActions } from './thunkActions';
-
+// editor redux store
 const editorReducer = combineReducers({
   app: app.reducer,
   requests: requests.reducer,
diff --git a/src/editors/modifiedEditorTestRender.jsx b/src/editors/modifiedEditorTestRender.jsx
new file mode 100644
index 0000000000..b04917e0a1
--- /dev/null
+++ b/src/editors/modifiedEditorTestRender.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render as baseRender } from '../testUtils';
+import { EditorContextProvider } from './EditorContext';
+import { initializeStore } from './data/redux'; // adjust path if needed
+
+/**
+ * Custom render function for testing React components with the editor context and Redux store.
+ *
+ * Wraps the provided UI in both the EditorContextProvider and Redux Provider,
+ * ensuring that components under test have access to the necessary context and store.
+ *
+ * @param {React.ReactElement} ui - The React element to render.
+ * @param {object} [options] - Optional parameters.
+ * @param {object} [options.initialState] - Optional initial state for the store.
+ * @param {string} [options.learningContextId] - Optional learning context ID.
+ * @returns {RenderResult} The result of the render, as returned by RTL render.
+ */
+const editorRender = (
+  ui,
+  {
+    initialState = {},
+    learningContextId = 'course-v1:Org+COURSE+RUN',
+  } = {},
+) => {
+  const store = initializeStore(initialState);
+
+  return baseRender(ui, {
+    extraWrapper: ({ children }) => (
+      <EditorContextProvider learningContextId={learningContextId}>
+        <Provider store={store}>
+          {children}
+        </Provider>
+      </EditorContextProvider>
+    ),
+  });
+};
+
+export default editorRender;
diff --git a/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx
index 36e7614ffe..3ec95856bf 100644
--- a/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx
+++ b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx
@@ -1,29 +1,31 @@
-import { connect } from 'react-redux';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Button, Container, Row, Col,
 } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { useSelector } from 'react-redux';
+
 import messages from './messages';
 import { isLibraryV1Key } from '../../../generic/key-utils';
 import { navigateTo } from '../../hooks';
 import { selectors } from '../../data/redux';
 
 /**
- * An error page that displays a generic message for unexpected errors.  Also contains a "Try
- * Again" button to refresh the page.
+ * An error page that displays a generic message for unexpected errors.
+ * Also contains a "Try Again" button to refresh the page.
  */
 const ErrorPage = ({
   message,
   studioEndpointUrl,
   learningContextId,
-  // redux
-  unitData,
 }) => {
   const intl = useIntl();
+  const unitData = useSelector(selectors.app.unitUrl);
+
   const outlineType = isLibraryV1Key(learningContextId) ? 'library' : 'course';
   const outlineUrl = `${studioEndpointUrl}/${outlineType}/${learningContextId}`;
-  const unitUrl = unitData?.data ? `${studioEndpointUrl}/container/${unitData?.data.ancestors[0].id}` : null;
+  const unitUrl = unitData?.data ? `${studioEndpointUrl}/container/${unitData.data.ancestors[0].id}` : null;
 
   return (
     <Container fluid className="py-5 justify-content-center align-items-start text-center">
@@ -61,26 +63,10 @@ ErrorPage.propTypes = {
   message: PropTypes.string,
   learningContextId: PropTypes.string.isRequired,
   studioEndpointUrl: PropTypes.string.isRequired,
-  // redux
-  unitData: PropTypes.shape({
-    data: PropTypes.shape({
-      ancestors: PropTypes.arrayOf(
-        PropTypes.shape({
-          id: PropTypes.string,
-        }),
-      ),
-    }),
-  }),
 };
 
 ErrorPage.defaultProps = {
   message: null,
-  unitData: null,
 };
 
-export const mapStateToProps = (state) => ({
-  unitData: selectors.app.unitUrl(state),
-});
-
-export const ErrorPageInternal = ErrorPage; // For testing only
-export default connect(mapStateToProps)(ErrorPage);
+export default ErrorPage;
diff --git a/src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.tsx b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.tsx
index 1782b1dd82..5a5242fb65 100644
--- a/src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.tsx
+++ b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.tsx
@@ -1,14 +1,8 @@
 import React from 'react';
 import { render, screen, initializeMocks } from '@src/testUtils';
-import { ErrorPageInternal as ErrorPage } from './ErrorPage';
-
-jest.mock('../../data/redux', () => ({
-  selectors: {
-    app: {
-      unitUrl: jest.fn(state => ({ unitUrl: state })),
-    },
-  },
-}));
+import ErrorPage from './ErrorPage';
+import editorRender from '../../editorTestRender';
+import { initializeStore } from '../../data/redux';
 
 describe('Editor Page', () => {
   const emptyProps = {
@@ -20,14 +14,18 @@ describe('Editor Page', () => {
     studioEndpointUrl: 'fakeurl.com',
     message: 'cUStomMEssagE',
   };
-  const unitData = {
-    data: {
-      ancestors: [{ id: 'SomeID' }],
+  const initialState = {
+    app: {
+      unitUrl: {
+        data: {
+          ancestors: [{ id: 'SomeID' }],
+        },
+      },
     },
   };
 
   beforeEach(() => {
-    initializeMocks();
+    initializeMocks({ initialState, initializeStore });
   });
 
   describe('rendered with empty props', () => {
@@ -40,14 +38,22 @@ describe('Editor Page', () => {
   describe('rendered with pass through props defined', () => {
     describe('shows two buttons', () => {
       it('the first button should correspond to returning to the course outline', () => {
-        render(<ErrorPage {...passedProps} />);
+        const modifiedInitialState = {
+          ...initialState,
+          app: {
+            unitUrl: {
+
+            },
+          },
+        };
+        editorRender(<ErrorPage {...passedProps} />, { initialState: modifiedInitialState });
         const firstButton = screen.getByRole('button', { name: 'Return to course outline' });
         const secondButton = screen.getByRole('button', { name: 'Try again' });
         expect(firstButton).toBeInTheDocument();
         expect(secondButton).toBeInTheDocument();
       });
       it('the first button should correspond to returning to the unit page', () => {
-        render(<ErrorPage {...passedProps} unitData={unitData} />);
+        editorRender(<ErrorPage {...passedProps} />, { initialState });
         const firstButton = screen.getByRole('button', { name: 'Return to unit page' });
         const secondButton = screen.getByRole('button', { name: 'Try again' });
         expect(firstButton).toBeInTheDocument();
diff --git a/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx
index 0e0439a58b..61b5afdcf3 100644
--- a/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx
@@ -1,5 +1,6 @@
+import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import * as hooks from './hooks';
 import { acceptedImgKeys } from './utils';
 import SelectionModal from '../../SelectionModal';
@@ -13,13 +14,23 @@ const SelectImageModal = ({
   setSelection,
   clearSelection,
   images,
-  // redux
-  isLoaded,
-  isFetchError,
-  isUploadError,
-  isLibrary,
-  imageCount,
 }) => {
+  // Redux state using useSelector
+  const isLoaded = useSelector((state) => selectors.requests.isFinished(
+    state,
+    { requestKey: RequestKeys.fetchImages },
+  ));
+  const isFetchError = useSelector((state) => selectors.requests.isFailed(
+    state,
+    { requestKey: RequestKeys.fetchImages },
+  ));
+  const isUploadError = useSelector((state) => selectors.requests.isFailed(
+    state,
+    { requestKey: RequestKeys.uploadAsset },
+  ));
+  const isLibrary = useSelector(selectors.app.isLibrary);
+  const imageCount = useSelector((state) => state.app.imageCount);
+
   const {
     galleryError,
     inputError,
@@ -70,23 +81,7 @@ SelectImageModal.propTypes = {
   setSelection: PropTypes.func.isRequired,
   clearSelection: PropTypes.func.isRequired,
   images: PropTypes.arrayOf(PropTypes.string).isRequired,
-  // redux
-  isLoaded: PropTypes.bool.isRequired,
-  isFetchError: PropTypes.bool.isRequired,
-  isUploadError: PropTypes.bool.isRequired,
-  imageCount: PropTypes.number.isRequired,
-  isLibrary: PropTypes.bool,
 };
 
-export const mapStateToProps = (state) => ({
-  isLoaded: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchImages }),
-  isFetchError: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchImages }),
-  isUploadError: selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadAsset }),
-  isLibrary: selectors.app.isLibrary(state),
-  imageCount: state.app.imageCount,
-});
-
-export const mapDispatchToProps = {};
-
-export const SelectImageModalInternal = SelectImageModal; // For testing only
-export default connect(mapStateToProps, mapDispatchToProps)(SelectImageModal);
+export const SelectImageModalInternal = SelectImageModal; // For testing
+export default SelectImageModal;
diff --git a/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.test.tsx b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.test.tsx
index ace4f06210..489de1b2ec 100644
--- a/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.test.tsx
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.test.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { render, initializeMocks } from '@src/testUtils';
-import { formatMessage } from '@src/editors/testUtils';
+import { initializeMocks } from '@src/testUtils';
+import { RequestKeys } from '@src/editors/data/constants/requests';
 import { SelectImageModalInternal as SelectImageModal } from '.';
+import editorRender from '../../../editorTestRender';
 
 jest.mock('../../BaseModal', () => 'BaseModal');
 jest.mock('../../FileInput', () => 'FileInput');
@@ -45,49 +46,52 @@ jest.mock('./hooks', () => ({
   })),
 }));
 
-jest.mock('../../../data/redux', () => ({
-  selectors: {
+describe('SelectImageModal', () => {
+  const initialState = {
+    app: {
+      imageCount: 1,
+      learningContextId: 'library-v1:abc123', // so isLibrary returns true
+      blockId: null, // optional since contextId alone is enough
+    },
     requests: {
-      isPending: (state, { requestKey }) => ({ isPending: { state, requestKey } }),
+      [RequestKeys.fetchImages]: {
+        status: 'completed', // or 'FAILED' for error case
+      },
+      [RequestKeys.uploadAsset]: {
+        status: 'completed', // or 'FAILED' for error case
+      },
     },
-  },
-}));
+  };
 
-describe('SelectImageModal', () => {
   describe('component', () => {
     const props = {
       isOpen: true,
       close: jest.fn().mockName('props.close'),
       setSelection: jest.fn().mockName('props.setSelection'),
       clearSelection: jest.fn().mockName('props.clearSelection'),
-      isLoaded: true,
-      isFetchError: false,
-      isUploadError: false,
-      imageCount: 1,
       images: ['image.pgn'],
-      intl: { formatMessage },
     };
     beforeEach(() => {
-      initializeMocks();
+      initializeMocks({ initialState });
     });
     test('renders correctly', () => {
-      const { container } = render(<SelectImageModal {...props} />);
+      const { container } = editorRender(<SelectImageModal {...props} />, { initialState });
       expect(container.querySelector('SelectionModal')).toBeInTheDocument();
     });
     it('provides confirm action, forwarding selectBtnProps from imgHooks', () => {
-      const { container } = render(<SelectImageModal {...props} />);
+      const { container } = editorRender(<SelectImageModal {...props} />, { initialState });
       expect(container.querySelector('SelectionModal')?.getAttribute('selectBtnProps')).toBeTruthy();
     });
     it('provides file upload button linked to fileInput.click', () => {
-      const { container } = render(<SelectImageModal {...props} />);
+      const { container } = editorRender(<SelectImageModal {...props} />, { initialState });
       expect(container.querySelector('SelectionModal')?.getAttribute('fileInput')).toBeTruthy();
     });
     it('provides a SearchSort component with searchSortProps from imgHooks', () => {
-      const { container } = render(<SelectImageModal {...props} />);
+      const { container } = editorRender(<SelectImageModal {...props} />, { initialState });
       expect(container.querySelector('SelectionModal')?.getAttribute('searchSortProps')).toBeTruthy();
     });
     it('provides a Gallery component with galleryProps from imgHooks', () => {
-      const { container } = render(<SelectImageModal {...props} />);
+      const { container } = editorRender(<SelectImageModal {...props} />, { initialState });
       expect(container.querySelector('SelectionModal')?.getAttribute('galleryProps')).toBeTruthy();
     });
   });