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/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/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();
     });
   });