test: replacing snapshot tests with rtl tests part 12

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import {
+  render, screen, initializeMocks,
+} from '@src/testUtils';
+import * as hooks from './hooks';
+import { SettingsWidgetInternal as SettingsWidget } from '.';
+import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+
+jest.mock('./settingsComponents/GeneralFeedback', () => 'GeneralFeedback');
+jest.mock('./settingsComponents/GroupFeedback', () => 'GroupFeedback');
+jest.mock('./settingsComponents/Randomization', () => 'Randomization');
+jest.mock('./settingsComponents/HintsCard', () => 'HintsCard');
+jest.mock('./settingsComponents/ResetCard', () => 'ResetCard');
+jest.mock('./settingsComponents/ScoringCard', () => 'ScoringCard');
+jest.mock('./settingsComponents/ShowAnswerCard', () => 'ShowAnswerCard');
+jest.mock('./settingsComponents/SwitchEditorCard', () => 'SwitchEditorCard');
+jest.mock('./settingsComponents/TimerCard', () => 'TimerCard');
+jest.mock('./settingsComponents/TypeCard', () => 'TypeCard');
+
+describe('SettingsWidget', () => {
+  const showAdvancedSettingsCardsBaseProps = {
+    isAdvancedCardsVisible: false,
+    showAdvancedCards: jest.fn().mockName('showAdvancedSettingsCards.showAdvancedCards'),
+    setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'),
+  };
+
+  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(() => {
+    initializeMocks();
+  });
+
+  describe('behavior', () => {
+    it('calls showAdvancedSettingsCards when initialized', () => {
+      jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsBaseProps);
+      render(<SettingsWidget {...props} />);
+      expect(hooks.showAdvancedSettingsCards).toHaveBeenCalled();
+    });
+  });
+
+  describe('renders', () => {
+    test('renders Settings widget page', () => {
+      jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsBaseProps);
+      render(<SettingsWidget {...props} />);
+      expect(screen.getByText('Show advanced settings')).toBeInTheDocument();
+    });
+
+    test('renders Settings widget page advanced settings visible', () => {
+      const showAdvancedSettingsCardsProps = {
+        ...showAdvancedSettingsCardsBaseProps,
+        isAdvancedCardsVisible: true,
+      };
+      jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsProps);
+      const { container } = render(<SettingsWidget {...props} />);
+      expect(screen.queryByText('Show advanced settings')).not.toBeInTheDocument();
+      expect(container.querySelector('showanswercard')).toBeInTheDocument();
+      expect(container.querySelector('resetcard')).toBeInTheDocument();
+    });
+
+    test('renders Settings widget for Advanced Problem with correct widgets', () => {
+      const showAdvancedSettingsCardsProps = {
+        ...showAdvancedSettingsCardsBaseProps,
+        isAdvancedCardsVisible: true,
+      };
+      jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsProps);
+      const { container } = render(
+        <SettingsWidget {...props} problemType={ProblemTypeKeys.ADVANCED} />,
+      );
+      expect(container.querySelector('randomization')).toBeInTheDocument();
+    });
+  });
+
+  describe('isLibrary', () => {
+    const libraryProps = {
+      ...props,
+      isLibrary: true,
+    };
+    test('renders Settings widget page', () => {
+      jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsBaseProps);
+      const { container } = render(<SettingsWidget {...libraryProps} />);
+      expect(container.querySelector('timercard')).not.toBeInTheDocument();
+      expect(container.querySelector('resetcard')).not.toBeInTheDocument();
+      expect(container.querySelector('typecard')).toBeInTheDocument();
+      expect(container.querySelector('hintscard')).toBeInTheDocument();
+      expect(screen.getByText('Show advanced settings')).toBeInTheDocument();
+    });
+
+    test('renders Settings widget page advanced settings visible', () => {
+      const showAdvancedSettingsCardsProps = {
+        ...showAdvancedSettingsCardsBaseProps,
+        isAdvancedCardsVisible: true,
+      };
+      jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsProps);
+      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();
+    });
+
+    test('renders Settings widget for Advanced Problem with correct widgets', () => {
+      const showAdvancedSettingsCardsProps = {
+        ...showAdvancedSettingsCardsBaseProps,
+        isAdvancedCardsVisible: true,
+      };
+      jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsProps);
+      const { container } = render(<SettingsWidget {...libraryProps} problemType={ProblemTypeKeys.ADVANCED} />);
+      expect(container.querySelector('randomization')).toBeInTheDocument();
+    });
+  });
+});

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  render, screen, initializeMocks, fireEvent,
+} from '@src/testUtils';
+import { formatMessage } from '@src/editors/testUtils';
+import { RandomizationCard } from './index';
+import * as hooks from './hooks';
+
+describe('RandomizationCard', () => {
+  const props = {
+    randomization: 'per_student',
+    defaultValue: 'always',
+    updateSettings: jest.fn().mockName('args.updateSettings'),
+    intl: { formatMessage },
+  };
+
+  const randomizationCardHooksProps = {
+    summary: { message: { defaultMessage: 'sUmmary' } },
+    handleChange: jest.fn().mockName('randomizationCardHooks.handleChange'),
+  };
+
+  jest.spyOn(hooks, 'useRandomizationSettingStatus').mockReturnValue(randomizationCardHooksProps);
+
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  describe('behavior', () => {
+    it('calls useRandomizationSettingStatus when initialized', () => {
+      render(<RandomizationCard {...props} />);
+      expect(hooks.useRandomizationSettingStatus).toHaveBeenCalledWith(
+        { updateSettings: props.updateSettings, randomization: props.randomization },
+      );
+    });
+  });
+
+  describe('renders', () => {
+    test('renders randomization setting card with randomization defined', () => {
+      render(<RandomizationCard {...props} />);
+      expect(screen.getByText('sUmmary')).toBeInTheDocument();
+      expect(screen.getByText('Randomization')).toBeInTheDocument();
+      fireEvent.click(screen.getByRole('button', { name: 'Randomization' }));
+      expect(screen.getByRole('combobox')).toHaveValue(props.randomization);
+    });
+
+    test('renders randomization setting card with default randomization', () => {
+      render(<RandomizationCard {...props} randomization="" />);
+      expect(screen.getByText('sUmmary')).toBeInTheDocument();
+      expect(screen.getByText('Randomization')).toBeInTheDocument();
+      fireEvent.click(screen.getByRole('button', { name: 'Randomization' }));
+      expect(screen.getByRole('combobox')).toHaveValue(props.defaultValue);
+    });
+
+    test('renders randomization setting card with randomization null', () => {
+      render(<RandomizationCard {...props} randomization="" defaultValue="" />);
+      fireEvent.click(screen.getByRole('button', { name: 'Randomization' }));
+      expect(screen.getByRole('combobox')).toHaveValue('never');
+    });
+  });
+});

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import {
+  render, screen, initializeMocks,
+} from '@src/testUtils';
+
+import { actions } from '../../../../../../data/redux';
+import { LicenseDetailsInternal as LicenseDetails, mapStateToProps, mapDispatchToProps } from './LicenseDetails';
+
+jest.mock('../../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: jest.fn().mockName('actions.video.updateField'),
+    },
+  },
+}));
+
+describe('LicenseDetails', () => {
+  const props = {
+    license: '',
+    details: {
+      attribution: false,
+      noncommercial: false,
+      noDerivatives: false,
+      shareAlike: false,
+    },
+    level: 'course',
+    updateField: jest.fn().mockName('args.updateField'),
+  };
+
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  describe('renders', () => {
+    test('renders as expected with default props', () => {
+      const { container } = render(<LicenseDetails {...props} />);
+      const reduxWrapper = (container.firstChild as HTMLElement);
+      expect(reduxWrapper?.innerHTML).toBe('');
+      expect(screen.queryByText('License Details')).not.toBeInTheDocument();
+    });
+
+    test('renders as expected with level set to library', () => {
+      render(<LicenseDetails {...props} level="library" />);
+      expect(screen.queryByText('License Details')).toBeInTheDocument();
+    });
+
+    test('renders as expected with level set to block and license set to select', () => {
+      const { container } = render(<LicenseDetails {...props} level="block" license="select" />);
+      const reduxWrapper = (container.firstChild as HTMLElement);
+      expect(reduxWrapper?.innerHTML).toBe('');
+      expect(screen.queryByText('License Details')).not.toBeInTheDocument();
+    });
+
+    test('renders as expected with level set to block and license set to all rights reserved', () => {
+      render(<LicenseDetails {...props} level="block" license="all-rights-reserved" />);
+      expect(screen.queryByText('License Details')).toBeInTheDocument();
+      expect(screen.queryByText('You reserve all rights for your work.')).toBeInTheDocument();
+    });
+
+    test('renders as expected with level set to block and license set to Creative Commons', () => {
+      render(<LicenseDetails {...props} level="block" license="creative-commons" />);
+      expect(screen.queryByText('License Details')).toBeInTheDocument();
+      expect(screen.getByRole('checkbox', { name: 'Attribution' })).toBeInTheDocument();
+      expect(screen.getByRole('checkbox', { name: 'Noncommercial' })).toBeInTheDocument();
+      expect(screen.getByRole('checkbox', { name: 'Share Alike' })).toBeInTheDocument();
+      expect(screen.getByRole('checkbox', { name: 'No Derivatives' })).toBeInTheDocument();
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('mapStateToProps equals an empty object', () => {
+      // @ts-ignore-next-line
+      expect(mapStateToProps(testState)).toEqual({});
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    const dispatch = jest.fn();
+    test('updateField from actions.video.updateField', () => {
+      // @ts-ignore-next-line
+      expect(mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField));
+    });
+  });
+});

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.tsx

@@ -0,0 +1,318 @@
+import React from 'react';
+import {
+  render, screen, initializeMocks,
+  fireEvent,
+} from '@src/testUtils';
+
+import { formatMessage } from '../../../../../../testUtils';
+import { SocialShareWidgetInternal as SocialShareWidget } from '.';
+import * as hooks from './hooks';
+
+jest.mock('../../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: jest.fn().mockName('actions.video.updateField'),
+    },
+  },
+  selectors: {
+    app: {
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+    },
+    video: {
+      allowVideoSharing: jest.fn(state => ({ allowVideoSharing: state })),
+      videoSharingEnabledForAll: jest.fn(state => ({ videoSharingEnabledForAll: state })),
+      videoSharingEnabledForCourse: jest.fn(state => ({ videoSharingEnabledForCourse: state })),
+      videoSharingLearnMoreLink: jest.fn(state => ({ videoSharingLearnMoreLink: state })),
+    },
+  },
+}));
+
+describe('SocialShareWidget', () => {
+  const props = {
+    intl: { formatMessage },
+    videoSharingEnabledForCourse: false,
+    videoSharingEnabledForAll: false,
+    isLibrary: false,
+    allowVideoSharing: {
+      level: 'block',
+      value: false,
+    },
+    videoSharingLearnMoreLink: 'sOMeURl.cOM',
+    updateField: jest.fn().mockName('args.updateField'),
+  };
+
+  beforeEach(() => {
+    initializeMocks();
+    jest.spyOn(hooks, 'useTrackSocialSharingChange').mockReturnValue(jest.fn());
+  });
+
+  describe('rendered with videoSharingEnabled false', () => {
+    describe('with default props', () => {
+      it('should return null', () => {
+        const { container } = render(<SocialShareWidget {...props} />);
+        const reduxWrapper = container.firstChild;
+        expect(reduxWrapper?.textContent).toBe('');
+      });
+    });
+
+    describe('with videoSharingEnabledForAll false and isLibrary true', () => {
+      it('should return null', () => {
+        const { container } = render(<SocialShareWidget {...props} isLibrary />);
+        const reduxWrapper = container.firstChild;
+        expect(reduxWrapper?.textContent).toBe('');
+      });
+    });
+
+    describe('with videoSharingEnabledForCourse and isLibrary false and videoSharingEnabledForAll true', () => {
+      it('should return null', () => {
+        const { container } = render(<SocialShareWidget {...props} videoSharingEnabledForAll />);
+        const reduxWrapper = container.firstChild;
+        expect(reduxWrapper?.textContent).toBe('');
+      });
+    });
+  });
+
+  describe('rendered with videoSharingEnabled true', () => {
+    describe('and allowVideoSharing value equals true', () => {
+      describe(' with level equal to course', () => {
+        it('should have setting location message', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForCourse
+            allowVideoSharing={{
+              level: 'course',
+              value: true,
+            }}
+          />);
+          expect(screen.getByText('Change this setting on the course outline page.')).toBeInTheDocument();
+        });
+        it('should have checkbox disabled prop equal true', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForCourse
+            allowVideoSharing={{
+              level: 'course',
+              value: true,
+            }}
+          />);
+          const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' });
+          expect(checkbox).toBeInTheDocument();
+          expect(checkbox).toBeDisabled();
+        });
+      });
+      describe(' with level equal to block', () => {
+        it('should not have setting location message', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForCourse
+            allowVideoSharing={{
+              level: 'block',
+              value: true,
+            }}
+          />);
+          expect(screen.queryByText('Change this setting on the course outline page.')).not.toBeInTheDocument();
+        });
+        it('should not have override note', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForCourse
+            allowVideoSharing={{
+              level: 'block',
+              value: true,
+            }}
+          />);
+          expect(screen.queryByText('Note: This setting is overridden by the course outline page.')).not.toBeInTheDocument();
+        });
+        it('should have checkbox disabled prop equal false', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForCourse
+            allowVideoSharing={{
+              level: 'block',
+              value: true,
+            }}
+          />);
+          const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' });
+          expect(checkbox).toBeInTheDocument();
+          expect(checkbox).not.toBeDisabled();
+        });
+      });
+      describe('isLibrary equals true', () => {
+        it('should not have setting location message', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForAll
+            isLibrary
+            allowVideoSharing={{
+              level: 'block',
+              value: true,
+            }}
+          />);
+          expect(screen.queryByText('Change this setting on the course outline page.')).not.toBeInTheDocument();
+        });
+        it('should not have override note', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForAll
+            isLibrary
+            allowVideoSharing={{
+              level: 'block',
+              value: true,
+            }}
+          />);
+          expect(screen.queryByText('Note: This setting is overridden by the course outline page.')).not.toBeInTheDocument();
+        });
+        it('should have checkbox disabled prop equal false', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForAll
+            isLibrary
+            allowVideoSharing={{
+              level: 'block',
+              value: true,
+            }}
+          />);
+          const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' });
+          expect(checkbox).toBeInTheDocument();
+          expect(checkbox).not.toBeDisabled();
+        });
+      });
+      it('should have subtitle with text that reads Enabled', () => {
+        render(<SocialShareWidget
+          {...props}
+          videoSharingEnabledForCourse
+          allowVideoSharing={{
+            level: 'block',
+            value: true,
+          }}
+        />);
+        expect(screen.getByText('Social Sharing')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('Social Sharing'));
+        const subtitle = screen.getByText('Enabled');
+        expect(subtitle).toBeInTheDocument();
+      });
+    });
+
+    describe('and allowVideoSharing value equals false', () => {
+      describe(' with level equal to course', () => {
+        it('should have setting location message', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForCourse
+            allowVideoSharing={{
+              level: 'course',
+              value: false,
+            }}
+          />);
+          expect(screen.getByText('Change this setting on the course outline page.')).toBeInTheDocument();
+        });
+        it('should have checkbox disabled prop equal true', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForCourse
+            allowVideoSharing={{
+              level: 'course',
+              value: false,
+            }}
+          />);
+          const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' });
+          expect(checkbox).toBeInTheDocument();
+          expect(checkbox).toBeDisabled();
+        });
+      });
+
+      describe(' with level equal to block', () => {
+        it('should not have setting location message', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForCourse
+            allowVideoSharing={{
+              level: 'block',
+              value: false,
+            }}
+          />);
+          expect(screen.queryByText('Change this setting on the course outline page.')).not.toBeInTheDocument();
+        });
+        it('should not have override note', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForCourse
+            allowVideoSharing={{
+              level: 'block',
+              value: false,
+            }}
+          />);
+          expect(screen.queryByText('Note: This setting is overridden by the course outline page.')).not.toBeInTheDocument();
+        });
+        it('should have checkbox disabled prop equal false', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForCourse
+            allowVideoSharing={{
+              level: 'block',
+              value: false,
+            }}
+          />);
+          const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' });
+          expect(checkbox).toBeInTheDocument();
+          expect(checkbox).toBeEnabled();
+        });
+      });
+
+      describe('isLibrary equals true', () => {
+        it('should not have setting location message', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForAll
+            isLibrary
+            allowVideoSharing={{
+              level: 'block',
+              value: false,
+            }}
+          />);
+          expect(screen.queryByText('Change this setting on the course outline page.')).not.toBeInTheDocument();
+        });
+        it('should not have override note', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForAll
+            isLibrary
+            allowVideoSharing={{
+              level: 'block',
+              value: false,
+            }}
+          />);
+          expect(screen.queryByText('Note: This setting is overridden by the course outline page.')).not.toBeInTheDocument();
+        });
+        it('should have checkbox disabled prop equal false', () => {
+          render(<SocialShareWidget
+            {...props}
+            videoSharingEnabledForAll
+            isLibrary
+            allowVideoSharing={{
+              level: 'block',
+              value: false,
+            }}
+          />);
+          const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' });
+          expect(checkbox).toBeInTheDocument();
+          expect(checkbox).toBeEnabled();
+        });
+      });
+      it('should have subtitle with text that reads Enabled', () => {
+        render(<SocialShareWidget
+          {...props}
+          videoSharingEnabledForCourse
+          allowVideoSharing={{
+            level: 'block',
+            value: false,
+          }}
+        />);
+        expect(screen.getByText('Social Sharing')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('Social Sharing'));
+        const subtitle = screen.getByText('Disabled');
+        expect(subtitle).toBeInTheDocument();
+      });
+    });
+  });
+});

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.test.jsx → src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.test.tsx

@@ -1,24 +1,16 @@
-import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-import { useSelector } from 'react-redux';
+import {
+  render, screen, initializeMocks,
+} from '@src/testUtils';
+import * as reactredux from 'react-redux';
 
 import { RequestKeys } from '../../../../../../data/constants/requests';
 
 import { formatMessage } from '../../../../../../testUtils';
 import { actions, selectors } from '../../../../../../data/redux';
-// This 'module' self-import hack enables mocking during tests.
-// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
-// should be re-thought and cleaned up to avoid this pattern.
-// eslint-disable-next-line import/no-self-import
-import * as module from './index';
-
-const TranscriptWidget = module.TranscriptWidgetInternal;
-
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useContext: jest.fn(() => ({ transcripts: ['error.transcripts', jest.fn().mockName('error.setTranscripts')] })),
-}));
+import {
+  TranscriptWidgetInternal as TranscriptWidget, mapStateToProps, mapDispatchToProps, hooks,
+} from './index';
 
 jest.mock('../../../../../../data/redux', () => ({
   actions: {
@@ -59,48 +51,48 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
 }));
 
-useSelector.mockImplementation((selectorFn) => selectorFn({}));
+jest.spyOn(reactredux, 'useSelector').mockImplementation((selectorFn) => selectorFn({}));
 
 describe('TranscriptWidget', () => {
   beforeEach(() => {
-    selectors.app.shouldCreateBlock.mockReset();
+    jest.spyOn(selectors.app, 'shouldCreateBlock').mockReset();
   });
 
   describe('hooks', () => {
     describe('transcriptLanguages', () => {
       test('empty list of transcripts returns ', () => {
-        expect(module.hooks.transcriptLanguages([])).toEqual('None');
+        expect(hooks.transcriptLanguages([])).toEqual('None');
       });
       test('unset gives none', () => {
-        expect(module.hooks.transcriptLanguages(['', ''])).toEqual('');
+        expect(hooks.transcriptLanguages(['', ''])).toEqual('');
       });
       test('en gives English', () => {
-        expect(module.hooks.transcriptLanguages(['en'])).toEqual('English');
+        expect(hooks.transcriptLanguages(['en'])).toEqual('English');
       });
       test('en, FR gives English, French', () => {
-        expect(module.hooks.transcriptLanguages(['en', 'fr'])).toEqual('English, French');
+        expect(hooks.transcriptLanguages(['en', 'fr'])).toEqual('English, French');
       });
     });
     describe('hasTranscripts', () => {
       test('null returns false ', () => {
-        expect(module.hooks.hasTranscripts(null)).toEqual(false);
+        expect(hooks.hasTranscripts(null)).toEqual(false);
       });
       test('empty list returns false', () => {
-        expect(module.hooks.hasTranscripts([])).toEqual(false);
+        expect(hooks.hasTranscripts([])).toEqual(false);
       });
       test('content returns true', () => {
-        expect(module.hooks.hasTranscripts(['en'])).toEqual(true);
+        expect(hooks.hasTranscripts(['en'])).toEqual(true);
       });
     });
     describe('onAddNewTranscript', () => {
       const mockUpdateField = jest.fn();
       test('null returns [empty string] ', () => {
-        module.hooks.onAddNewTranscript({ transcripts: null, updateField: mockUpdateField });
+        hooks.onAddNewTranscript({ transcripts: null, updateField: mockUpdateField });
         expect(mockUpdateField).toHaveBeenCalledWith({ transcripts: [''] });
       });
       test(' transcripts return list with blank added', () => {
         const mocklist = ['en', 'fr', 3];
-        module.hooks.onAddNewTranscript({ transcripts: mocklist, updateField: mockUpdateField });
+        hooks.onAddNewTranscript({ transcripts: mocklist, updateField: mockUpdateField });
 
         expect(mockUpdateField).toHaveBeenCalledWith({ transcripts: ['en', 'fr', 3, ''] });
       });
@@ -123,96 +115,110 @@ describe('TranscriptWidget', () => {
       isDeleteError: false,
     };
 
-    describe('snapshots', () => {
-      test('snapshots: renders as expected with default props', () => {
-        expect(
-          shallow(<TranscriptWidget {...props} />).snapshot,
-        ).toMatchSnapshot();
-      });
-      test('snapshots: renders as expected with allowTranscriptImport true', () => {
-        expect(
-          shallow(<TranscriptWidget {...props} allowTranscriptImport />).snapshot,
-        ).toMatchSnapshot();
+    beforeEach(() => {
+      initializeMocks();
+    });
+
+    describe('render component', () => {
+      test('renders as expected with default props', () => {
+        const { container } = render(<TranscriptWidget {...props} />);
+        expect(container.querySelector('collapsibleformwidget')).toBeInTheDocument();
+        expect(screen.getByText('Add video transcripts (.srt files only) for improved accessibility.')).toBeInTheDocument();
       });
-      test('snapshots: renders as expected with transcripts', () => {
-        expect(
-          shallow(<TranscriptWidget {...props} transcripts={['en']} />).snapshot,
-        ).toMatchSnapshot();
+
+      test('renders as expected with allowTranscriptImport true', () => {
+        render(<TranscriptWidget {...props} allowTranscriptImport />);
+        expect(screen.getByText('We found transcript for this video on YouTube. Would you like to import it now?')).toBeInTheDocument();
       });
-      test('snapshots: renders as expected with transcript urls', () => {
-        expect(
-          shallow(<TranscriptWidget {...props} selectedVideoTranscriptUrls={{ en: 'url' }} />).snapshot,
-        ).toMatchSnapshot();
+
+      test('renders as expected with transcripts', () => {
+        const { container } = render(<TranscriptWidget {...props} transcripts={['en']} />);
+        expect(container.querySelector('transcript')).toBeInTheDocument();
+        expect(container.querySelector('transcript')).toHaveAttribute('language', 'en');
       });
-      test('snapshots: renders as expected with transcripts and urls', () => {
-        expect(
-          shallow(<TranscriptWidget {...props} transcripts={['es']} selectedVideoTranscriptUrls={{ en: 'url' }} />).snapshot,
-        ).toMatchSnapshot();
+
+      test('renders as expected with transcripts and urls', () => {
+        const { container } = render(<TranscriptWidget {...props} transcripts={['en']} selectedVideoTranscriptUrls={{ en: 'url' }} />);
+        expect(container.querySelector('transcript')).toBeInTheDocument();
+        expect(container.querySelector('transcript')).toHaveAttribute('language', 'en');
+        expect(container.querySelector('transcript')).toHaveAttribute('transcriptUrl', 'url');
       });
-      test('snapshots: renders as expected with allowTranscriptDownloads true', () => {
-        expect(
-          shallow(<TranscriptWidget {...props} allowTranscriptDownloads transcripts={['en']} />).snapshot,
-        ).toMatchSnapshot();
+
+      test('renders as expected with allowTranscriptDownloads true', () => {
+        const { container } = render(<TranscriptWidget {...props} allowTranscriptDownloads transcripts={['en']} />);
+        expect(container.querySelector('transcript')).toBeInTheDocument();
+        expect(container.querySelector('transcript')).toHaveAttribute('language', 'en');
+        const checkbox = screen.getByRole('checkbox', { name: 'Allow transcript downloads' });
+        expect(checkbox).toBeInTheDocument();
+        expect(checkbox).toBeChecked();
       });
-      test('snapshots: renders as expected with showTranscriptByDefault true', () => {
-        expect(
-          shallow(<TranscriptWidget {...props} showTranscriptByDefault transcripts={['en']} />).snapshot,
-        ).toMatchSnapshot();
+
+      test('renders as expected with showTranscriptByDefault true', () => {
+        render(<TranscriptWidget {...props} showTranscriptByDefault transcripts={['en']} />);
+        const checkbox = screen.getByRole('checkbox', { name: 'Show transcript in the video player by default' });
+        expect(checkbox).toBeInTheDocument();
+        expect(checkbox).toBeChecked();
       });
+
       test('snapshot: renders ErrorAlert with upload error message', () => {
-        expect(
-          shallow(<TranscriptWidget {...props} isUploadError transcripts={['en', 'fr']} />).snapshot,
-        ).toMatchSnapshot();
+        render(<TranscriptWidget {...props} isUploadError transcripts={['en', 'fr']} />);
+        expect(screen.getByText('Failed to upload transcript. Please try again.')).toBeInTheDocument();
       });
+
       test('snapshot: renders ErrorAlert with delete error message', () => {
-        expect(
-          shallow(<TranscriptWidget {...props} isDeleteError transcripts={['en']} />).snapshot,
-        ).toMatchSnapshot();
+        render(<TranscriptWidget {...props} isDeleteError transcripts={['en']} />);
+        expect(screen.getByText('Failed to delete transcript. Please try again.')).toBeInTheDocument();
       });
+
       test('snapshot: render when `isCreateWorkflow` is `True`', () => {
-        selectors.app.shouldCreateBlock.mockReturnValue(true);
-        expect(
-          shallow(<TranscriptWidget {...props} />).snapshot,
-        ).toMatchSnapshot();
+        jest.spyOn(selectors.app, 'shouldCreateBlock').mockReturnValue(true);
+        render(<TranscriptWidget {...props} />);
+        expect(screen.getByText('Transcripts')).toBeInTheDocument();
+        expect(screen.getByText('To add transcripts, save and reopen this video')).toBeInTheDocument();
       });
     });
     describe('mapStateToProps', () => {
       const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
       test('transcripts from video.transcript', () => {
         expect(
-          module.mapStateToProps(testState).transcripts,
+          mapStateToProps(testState).transcripts,
+          // @ts-ignore
         ).toEqual(selectors.video.transcripts(testState));
       });
       test('allowTranscriptDownloads from video.allowTranscriptDownloads', () => {
         expect(
-          module.mapStateToProps(testState).allowTranscriptDownloads,
+          mapStateToProps(testState).allowTranscriptDownloads,
+          // @ts-ignore
         ).toEqual(selectors.video.allowTranscriptDownloads(testState));
       });
       test('showTranscriptByDefault from video.showTranscriptByDefault', () => {
         expect(
-          module.mapStateToProps(testState).showTranscriptByDefault,
+          mapStateToProps(testState).showTranscriptByDefault,
+          // @ts-ignore
         ).toEqual(selectors.video.showTranscriptByDefault(testState));
       });
       test('allowTranscriptImport from video.allowTranscriptImport', () => {
         expect(
-          module.mapStateToProps(testState).allowTranscriptImport,
+          mapStateToProps(testState).allowTranscriptImport,
+          // @ts-ignore
         ).toEqual(selectors.video.allowTranscriptImport(testState));
       });
       test('isUploadError from requests.isFinished', () => {
         expect(
-          module.mapStateToProps(testState).isUploadError,
+          mapStateToProps(testState).isUploadError,
         ).toEqual(selectors.requests.isFailed(testState, { requestKey: RequestKeys.uploadTranscript }));
       });
       test('isDeleteError from requests.isFinished', () => {
         expect(
-          module.mapStateToProps(testState).isDeleteError,
+          mapStateToProps(testState).isDeleteError,
         ).toEqual(selectors.requests.isFailed(testState, { requestKey: RequestKeys.deleteTranscript }));
       });
     });
     describe('mapDispatchToProps', () => {
       const dispatch = jest.fn();
       test('updateField from actions.video.updateField', () => {
-        expect(module.mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField));
+        // @ts-ignore
+        expect(mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField));
       });
     });
   });