feat: migrate enzyme to edx react-unit-test-utils

src/editors/sharedComponents/BaseModal/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import BaseModal from '.';
 
@@ -13,6 +13,6 @@ describe('BaseModal ImageUploadModal template component', () => {
       confirmAction: 'props.confirmAction node',
       footerAction: 'props.footerAction node',
     };
-    expect(shallow(<BaseModal {...props} />)).toMatchSnapshot();
+    expect(shallow(<BaseModal {...props} />).snapshot).toMatchSnapshot();
   });
 });

src/editors/sharedComponents/CodeEditor/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
@@ -171,7 +171,7 @@ describe('CodeEditor', () => {
       test('Renders and calls Hooks ', () => {
         jest.spyOn(hooks, 'prepareShowBtnEscapeHTML').mockImplementation(() => ({ showBtnEscapeHTML: true, hideBtn: mockHideBtn }));
         // Note: ref won't show up as it is not acutaly a DOM attribute.
-        expect(shallow(<module.CodeEditor {...props} />)).toMatchSnapshot();
+        expect(shallow(<module.CodeEditor {...props} />).snapshot).toMatchSnapshot();
         expect(hooks.createCodeMirrorDomNode).toHaveBeenCalled();
       });
     });

src/editors/sharedComponents/ErrorAlerts/ErrorAlert.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import * as module from './ErrorAlert';
 import { MockUseState } from '../../../testUtils';
 
@@ -70,13 +70,15 @@ describe('ErrorAlert component', () => {
         jest.clearAllMocks();
       });
       test('snapshot: is Null when no error (ErrorAlert)', () => {
-        expect(shallow(<ErrorAlert {...props}> <p> An Error Message </p> </ErrorAlert>)).toMatchSnapshot();
+        expect(shallow(<ErrorAlert {...props}> <p> An Error Message </p> </ErrorAlert>).snapshot).toMatchSnapshot();
       });
       test('snapshot: Loads children and component when error (ErrorAlert)', () => {
-        expect(shallow(<ErrorAlert {...props} isError hideHeading={false}>{msg}</ErrorAlert>)).toMatchSnapshot();
+        expect(
+          shallow(<ErrorAlert {...props} isError hideHeading={false}>{msg}</ErrorAlert>).snapshot,
+        ).toMatchSnapshot();
       });
       test('snapshot: Does not load heading when hideHeading is true', () => {
-        expect(shallow(<ErrorAlert {...props} isError hideHeading>{msg}</ErrorAlert>)).toMatchSnapshot();
+        expect(shallow(<ErrorAlert {...props} isError hideHeading>{msg}</ErrorAlert>).snapshot).toMatchSnapshot();
       });
     });
   });

src/editors/sharedComponents/ErrorAlerts/FetchErrorAlert.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { FetchErrorAlert } from './FetchErrorAlert';
 
 jest.mock('../../data/redux', () => ({
@@ -13,7 +13,7 @@ jest.mock('../../data/redux', () => ({
 describe('FetchErrorAlert', () => {
   describe('Snapshots', () => {
     test('snapshot:  is ErrorAlert with Message error (ErrorAlert)', () => {
-      expect(shallow(<FetchErrorAlert isFetchError />)).toMatchSnapshot();
+      expect(shallow(<FetchErrorAlert isFetchError />).snapshot).toMatchSnapshot();
     });
   });
 });

src/editors/sharedComponents/ErrorAlerts/UploadErrorAlert.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { UploadErrorAlert } from './UploadErrorAlert';
 
 jest.mock('../../data/redux', () => ({
@@ -13,7 +13,7 @@ jest.mock('../../data/redux', () => ({
 describe('UploadErrorAlert', () => {
   describe('Snapshots', () => {
     test('snapshot:  is ErrorAlert with Message error (ErrorAlert)', () => {
-      expect(shallow(<UploadErrorAlert isUploadError />)).toMatchSnapshot();
+      expect(shallow(<UploadErrorAlert isUploadError />).snapshot).toMatchSnapshot();
     });
   });
 });

src/editors/sharedComponents/ErrorAlerts/__snapshots__/ErrorAlert.test.jsx.snap

@@ -31,4 +31,4 @@ exports[`ErrorAlert component Component Snapshots snapshot: Loads children and c
 </Alert>
 `;
 
-exports[`ErrorAlert component Component Snapshots snapshot: is Null when no error (ErrorAlert) 1`] = `""`;
+exports[`ErrorAlert component Component Snapshots snapshot: is Null when no error (ErrorAlert) 1`] = `null`;

src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { selectors } from '../../data/redux';
 import { formatMessage } from '../../../testUtils';
 import { ErrorPage, mapStateToProps } from './ErrorPage';
@@ -33,8 +33,8 @@ describe('Editor Page', () => {
   describe('rendered with empty props', () => {
     it('should only have one button (try again)', () => {
       const wrapper = shallow(<ErrorPage {...emptyProps} />);
-      const buttonText = wrapper.find('Button').text();
-      expect(wrapper).toMatchSnapshot();
+      const buttonText = wrapper.instance.findByType('Button')[0].children[0].el;
+      expect(wrapper.snapshot).toMatchSnapshot();
       expect(buttonText).toEqual('Try again');
     });
   });
@@ -43,25 +43,25 @@ describe('Editor Page', () => {
     const wrapper = shallow(<ErrorPage {...passedProps} />);
     describe('shows two buttons', () => {
       it('the first button should correspond to returning to the course outline', () => {
-        const firstButtonText = wrapper.find('Button').at(0).text();
-        const secondButtonText = wrapper.find('Button').at(1).text();
-        expect(wrapper).toMatchSnapshot();
+        const firstButtonText = wrapper.instance.findByType('Button')[0].children[0].el;
+        const secondButtonText = wrapper.instance.findByType('Button')[1].children[0].el;
+        expect(wrapper.snapshot).toMatchSnapshot();
         expect(firstButtonText).toEqual('Return to course outline');
         expect(secondButtonText).toEqual('Try again');
       });
       it('the first button should correspond to returning to the unit page', () => {
         const returnToUnitPageWrapper = shallow(<ErrorPage {...passedProps} unitData={unitData} />);
-        expect(returnToUnitPageWrapper).toMatchSnapshot();
-        const firstButtonText = returnToUnitPageWrapper.find('Button').at(0).text();
-        const secondButtonText = returnToUnitPageWrapper.find('Button').at(1).text();
-        expect(returnToUnitPageWrapper).toMatchSnapshot();
+        expect(returnToUnitPageWrapper.snapshot).toMatchSnapshot();
+        const firstButtonText = returnToUnitPageWrapper.instance.findByType('Button')[0].children[0].el;
+        const secondButtonText = returnToUnitPageWrapper.instance.findByType('Button')[1].children[0].el;
+        expect(returnToUnitPageWrapper.snapshot).toMatchSnapshot();
         expect(firstButtonText).toEqual('Return to unit page');
         expect(secondButtonText).toEqual('Try again');
       });
     });
     it('should have custom message', () => {
-      const customMessageText = wrapper.find('div').children().at(0).text();
-      expect(wrapper).toMatchSnapshot();
+      const customMessageText = wrapper.instance.findByType('div')[0].children[0].children[0].el;
+      expect(wrapper.snapshot).toMatchSnapshot();
       expect(customMessageText).toEqual('cUStomMEssagE');
     });
   });

src/editors/sharedComponents/ErrorBoundary/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import {
   logError,
@@ -22,11 +22,11 @@ describe('ErrorBoundary', () => {
         <div>Yay</div>
       </ErrorBoundary>
     );
-    const wrapper = mount(component);
-    const element = wrapper.find('div');
+    const { container } = render(component);
+    const element = container.querySelector('div');
 
     expect(logError).toHaveBeenCalledTimes(0);
-    expect(element.text()).toEqual('Yay');
+    expect(element.textContent).toEqual('Yay');
   });
 
   it('should render ErrorPage if it has an error', () => {
@@ -38,8 +38,8 @@ describe('ErrorBoundary', () => {
         <ExplodingComponent />
       </ErrorBoundary>
     );
-    const wrapper = mount(component);
-    const element = wrapper.find('p');
+    const { container } = render(component);
+    const element = container.querySelector('p');
     expect(logError).toHaveBeenCalledTimes(1);
     expect(logError).toHaveBeenCalledWith(
       new Error('booyah'),
@@ -47,6 +47,6 @@ describe('ErrorBoundary', () => {
         stack: expect.stringContaining('ExplodingComponent'),
       }),
     );
-    expect(element.text()).toEqual('Error Page');
+    expect(element.textContent).toEqual('Error Page');
   });
 });

src/editors/sharedComponents/ExpandableTextArea/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import ExpandableTextArea from '.';
 
 // Per https://github.com/tinymce/tinymce-react/issues/91 React unit testing in JSDOM is not supported by tinymce.
@@ -24,11 +24,11 @@ describe('ExpandableTextArea', () => {
   };
   describe('snapshots', () => {
     test('renders as expected with default behavior', () => {
-      expect(shallow(<ExpandableTextArea {...props} />)).toMatchSnapshot();
+      expect(shallow(<ExpandableTextArea {...props} />).snapshot).toMatchSnapshot();
     });
     test('renders error message', () => {
       const wrapper = shallow(<ExpandableTextArea {...props} error errorMessage="eRRormeSsaGE" />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 });

src/editors/sharedComponents/FileInput/__snapshots__/index.test.jsx.snap

@@ -1,20 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FileInput component snapshot 1`] = `
-<FileInput
-  acceptedFiles=".srt"
-  fileInput={
-    Object {
-      "addFile": [MockFunction props.fileInput.addFile],
-      "ref": [Function],
-    }
-  }
->
+<div>
   <input
     accept=".srt"
-    className="upload d-none"
-    onChange={[MockFunction props.fileInput.addFile]}
+    class="upload d-none"
     type="file"
   />
-</FileInput>
+</div>
 `;

src/editors/sharedComponents/FileInput/index.test.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 
 import { FileInput } from '.';
 
+const mockOnChange = jest.fn();
+
 describe('FileInput component', () => {
   let el;
   let container;
@@ -12,22 +14,23 @@ describe('FileInput component', () => {
     props = {
       acceptedFiles: '.srt',
       fileInput: {
-        addFile: jest.fn().mockName('props.fileInput.addFile'),
+        addFile: () => mockOnChange(),
         ref: (input) => { container.ref = input; },
       },
     };
-    el = mount(<FileInput {...props} />);
+    el = render(<FileInput {...props} />);
   });
   test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.container).toMatchSnapshot();
   });
   test('only accepts allowed file types', () => {
-    expect(el.find('input').props().accept).toEqual('.srt');
+    expect(el.container.querySelector('input').accept).toEqual('.srt');
   });
   test('calls fileInput.addFile onChange', () => {
-    expect(el.find('input').props().onChange).toEqual(props.fileInput.addFile);
+    fireEvent.change(el.container.querySelector('input'));
+    expect(mockOnChange).toHaveBeenCalled();
   });
   test('loads ref from fileInput.ref', () => {
-    expect(container.ref).toEqual(el.find('input').getDOMNode());
+    expect(container.ref).toEqual(el.container.querySelector('input'));
   });
 });

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from '../../../../testUtils';
 import { AltTextControls } from './AltTextControls';
@@ -23,11 +23,11 @@ describe('AltTextControls', () => {
   });
   describe('render', () => {
     test('snapshot: isDecorative=true errorProps.showAltTextSubmissionError=true', () => {
-      expect(shallow(<AltTextControls {...props} />)).toMatchSnapshot();
+      expect(shallow(<AltTextControls {...props} />).snapshot).toMatchSnapshot();
     });
     test('snapshot: isDecorative=true errorProps.showAltTextSubmissionError=false', () => {
       props.validation.show = false;
-      expect(shallow(<AltTextControls {...props} />)).toMatchSnapshot();
+      expect(shallow(<AltTextControls {...props} />).snapshot).toMatchSnapshot();
     });
   });
 });

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.test.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import * as paragon from '@edx/paragon';
 import * as icons from '@edx/paragon/icons';
 
@@ -53,16 +53,16 @@ describe('DimensionControls', () => {
       jest.spyOn(hooks, 'onInputChange').mockRestore();
     });
     test('snapshot', () => {
-      expect(shallow(<DimensionControls {...props} />)).toMatchSnapshot();
+      expect(shallow(<DimensionControls {...props} />).snapshot).toMatchSnapshot();
     });
     test('null value: empty snapshot', () => {
       const el = shallow(<DimensionControls {...props} value={null} />);
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
       expect(el.isEmptyRender()).toEqual(true);
     });
     test('unlocked dimensions', () => {
       const el = shallow(<DimensionControls {...props} isLocked={false} />);
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
   });
   describe('component tests for dimensions', () => {

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/DimensionControls.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DimensionControls render null value: empty snapshot 1`] = `""`;
+exports[`DimensionControls render null value: empty snapshot 1`] = `false`;
 
 exports[`DimensionControls render snapshot 1`] = `
 <Form.Group>

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from '../../../../testUtils';
 import { ImageSettingsModal } from '.';
@@ -43,7 +43,7 @@ describe('ImageSettingsModal', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(shallow(<ImageSettingsModal {...props} />)).toMatchSnapshot();
+      expect(shallow(<ImageSettingsModal {...props} />).snapshot).toMatchSnapshot();
     });
   });
 });

src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from '../../../../testUtils';
 import SelectionModal from '../../SelectionModal';
@@ -89,26 +89,26 @@ describe('SelectImageModal', () => {
       el = shallow(<SelectImageModal {...props} />);
     });
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     it('provides confirm action, forwarding selectBtnProps from imgHooks', () => {
-      expect(el.find(SelectionModal).props().selectBtnProps).toEqual(
+      expect(el.instance.findByType(SelectionModal)[0].props.selectBtnProps).toEqual(
         expect.objectContaining({ ...hooks.imgHooks().selectBtnProps }),
       );
     });
     it('provides file upload button linked to fileInput.click', () => {
-      expect(el.find(SelectionModal).props().fileInput.click).toEqual(
+      expect(el.instance.findByType(SelectionModal)[0].props.fileInput.click).toEqual(
         imgHooks.fileInput.click,
       );
     });
     it('provides a SearchSort component with searchSortProps from imgHooks', () => {
-      expect(el.find(SelectionModal).props().searchSortProps).toEqual(imgHooks.searchSortProps);
+      expect(el.instance.findByType(SelectionModal)[0].props.searchSortProps).toEqual(imgHooks.searchSortProps);
     });
     it('provides a Gallery component with galleryProps from imgHooks', () => {
-      expect(el.find(SelectionModal).props().galleryProps).toEqual(imgHooks.galleryProps);
+      expect(el.instance.findByType(SelectionModal)[0].props.galleryProps).toEqual(imgHooks.galleryProps);
     });
     it('provides a FileInput component with fileInput props from imgHooks', () => {
-      expect(el.find(SelectionModal).props().fileInput).toMatchObject(imgHooks.fileInput);
+      expect(el.instance.findByType(SelectionModal)[0].props.fileInput).toMatchObject(imgHooks.fileInput);
     });
   });
 });

src/editors/sharedComponents/ImageUploadModal/index.test.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-import-assign */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { keyStore } from '../../utils';
 import tinyMCEKeys from '../../data/constants/tinyMCE';
@@ -168,13 +168,13 @@ describe('ImageUploadModal', () => {
       module.hooks = hooks;
     });
     test('snapshot: with selection content (ImageSettingsUpload)', () => {
-      expect(shallow(<ImageUploadModal {...props} />)).toMatchSnapshot();
+      expect(shallow(<ImageUploadModal {...props} />).snapshot).toMatchSnapshot();
     });
     test('snapshot: selection has no externalUrl (Select Image Modal)', () => {
-      expect(shallow(<ImageUploadModal {...props} selection={null} />)).toMatchSnapshot();
+      expect(shallow(<ImageUploadModal {...props} selection={null} />).snapshot).toMatchSnapshot();
     });
     test('snapshot: no selection (Select Image Modal)', () => {
-      expect(shallow(<ImageUploadModal {...props} selection={null} />)).toMatchSnapshot();
+      expect(shallow(<ImageUploadModal {...props} selection={null} />).snapshot).toMatchSnapshot();
     });
   });
 });

src/editors/sharedComponents/RawEditor/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { RawEditor } from '.';
 
@@ -34,12 +34,12 @@ describe('RawEditor', () => {
   };
 
   test('renders as expected with default behavior', () => {
-    expect(shallow(<RawEditor {...defaultProps} />)).toMatchSnapshot();
+    expect(shallow(<RawEditor {...defaultProps} />).snapshot).toMatchSnapshot();
   });
   test('renders as expected with lang equal to xml', () => {
-    expect(shallow(<RawEditor {...xmlProps} />)).toMatchSnapshot();
+    expect(shallow(<RawEditor {...xmlProps} />).snapshot).toMatchSnapshot();
   });
   test('renders as expected with content equal to null', () => {
-    expect(shallow(<RawEditor {...noContentProps} />)).toMatchSnapshot();
+    expect(shallow(<RawEditor {...noContentProps} />).snapshot).toMatchSnapshot();
   });
 });

src/editors/sharedComponents/SelectionModal/Gallery.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
@@ -31,16 +31,16 @@ describe('TextEditor Image Gallery component', () => {
     };
     const shallowWithIntl = (component) => shallow(<IntlProvider locale="en">{component}</IntlProvider>);
     test('snapshot: not loaded, show spinner', () => {
-      expect(shallowWithIntl(<Gallery {...props} isLoaded={false} />)).toMatchSnapshot();
+      expect(shallowWithIntl(<Gallery {...props} isLoaded={false} />).snapshot).toMatchSnapshot();
     });
     test('snapshot: loaded but no images, show empty gallery', () => {
-      expect(shallowWithIntl(<Gallery {...props} galleryIsEmpty />)).toMatchSnapshot();
+      expect(shallowWithIntl(<Gallery {...props} galleryIsEmpty />).snapshot).toMatchSnapshot();
     });
     test('snapshot: loaded but search returns no images, show 0 search result gallery', () => {
-      expect(shallowWithIntl(<Gallery {...props} searchIsEmpty />)).toMatchSnapshot();
+      expect(shallowWithIntl(<Gallery {...props} searchIsEmpty />).snapshot).toMatchSnapshot();
     });
     test('snapshot: loaded, show gallery', () => {
-      expect(shallowWithIntl(<Gallery {...props} />)).toMatchSnapshot();
+      expect(shallowWithIntl(<Gallery {...props} />).snapshot).toMatchSnapshot();
     });
   });
 });

src/editors/sharedComponents/SelectionModal/GalleryCard.test.jsx

@@ -1,9 +1,16 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { Image } from '@edx/paragon';
 import { GalleryCard } from './GalleryCard';
 
+jest.mock('@edx/paragon', () => ({
+  ...jest.requireActual('@edx/paragon'),
+  Badge: 'Badge',
+  SelectableBox: 'SelectableBox',
+  Image: 'Image',
+}));
+
 describe('GalleryCard component', () => {
   const asset = {
     externalUrl: 'props.img.externalUrl',
@@ -16,30 +23,30 @@ describe('GalleryCard component', () => {
     el = shallow(<GalleryCard asset={asset} />);
   });
   test(`snapshot: dateAdded=${asset.dateAdded}`, () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   it('loads Image with src from image external url', () => {
-    expect(el.find(Image).props().src).toEqual(asset.externalUrl);
+    expect(el.instance.findByType(Image)[0].props.src).toEqual(asset.externalUrl);
   });
   it('snapshot with thumbnail fallback and load error', () => {
     el = shallow(<GalleryCard asset={asset} thumbnailFallback={thumbnailFallback} />);
-    el.find(Image).props().onError();
-    expect(el).toMatchSnapshot();
+    el.instance.findByType(Image)[0].props.onError();
+    expect(el.snapshot).toMatchSnapshot();
   });
   it('snapshot with thumbnail fallback and no error', () => {
     el = shallow(<GalleryCard asset={asset} thumbnailFallback={thumbnailFallback} />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   it('snapshot with status badge', () => {
     el = shallow(<GalleryCard asset={{ ...asset, status: 'failed', statusBadgeVariant: 'danger' }} />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   it('snapshot with duration badge', () => {
     el = shallow(<GalleryCard asset={{ ...asset, duration: 60 }} />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   it('snapshot with duration transcripts', () => {
     el = shallow(<GalleryCard asset={{ ...asset, transcripts: ['es'] }} />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
 });

src/editors/sharedComponents/SelectionModal/__snapshots__/Gallery.test.jsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextEditor Image Gallery component component snapshot: loaded but no images, show empty gallery 1`] = `
-<ContextProvider
+<[object Object]
   value={
     Object {
       "$t": [Function],
@@ -71,11 +71,11 @@ exports[`TextEditor Image Gallery component component snapshot: loaded but no im
     show={true}
     showIdsOnCards={false}
   />
-</ContextProvider>
+</[object Object]>
 `;
 
 exports[`TextEditor Image Gallery component component snapshot: loaded but search returns no images, show 0 search result gallery 1`] = `
-<ContextProvider
+<[object Object]
   value={
     Object {
       "$t": [Function],
@@ -145,11 +145,11 @@ exports[`TextEditor Image Gallery component component snapshot: loaded but searc
     show={true}
     showIdsOnCards={false}
   />
-</ContextProvider>
+</[object Object]>
 `;
 
 exports[`TextEditor Image Gallery component component snapshot: loaded, show gallery 1`] = `
-<ContextProvider
+<[object Object]
   value={
     Object {
       "$t": [Function],
@@ -219,11 +219,11 @@ exports[`TextEditor Image Gallery component component snapshot: loaded, show gal
     show={true}
     showIdsOnCards={false}
   />
-</ContextProvider>
+</[object Object]>
 `;
 
 exports[`TextEditor Image Gallery component component snapshot: not loaded, show spinner 1`] = `
-<ContextProvider
+<[object Object]
   value={
     Object {
       "$t": [Function],
@@ -293,5 +293,5 @@ exports[`TextEditor Image Gallery component component snapshot: not loaded, show
     show={true}
     showIdsOnCards={false}
   />
-</ContextProvider>
+</[object Object]>
 `;

src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap

@@ -28,7 +28,7 @@ exports[`GalleryCard component snapshot with duration badge 1`] = `
           }
         }
       />
-      <Component
+      <Badge
         style={
           Object {
             "backgroundColor": "black",
@@ -40,7 +40,7 @@ exports[`GalleryCard component snapshot with duration badge 1`] = `
         variant="dark"
       >
         01:00
-      </Component>
+      </Badge>
     </div>
     <div
       className="card-text px-3 py-2"
@@ -198,7 +198,7 @@ exports[`GalleryCard component snapshot with status badge 1`] = `
           }
         }
       />
-      <Component
+      <Badge
         style={
           Object {
             "left": "6px",
@@ -209,7 +209,7 @@ exports[`GalleryCard component snapshot with status badge 1`] = `
         variant="danger"
       >
         failed
-      </Component>
+      </Badge>
     </div>
     <div
       className="card-text px-3 py-2"
@@ -271,18 +271,17 @@ exports[`GalleryCard component snapshot with thumbnail fallback and load error 1
         }
       }
     >
-      <div
+      <Image
+        onError={[Function]}
+        src="props.img.externalUrl"
         style={
           Object {
+            "border": "none",
             "height": "100px",
             "width": "200px",
           }
         }
-      >
-        <span>
-          Image failed to load
-        </span>
-      </div>
+      />
     </div>
     <div
       className="card-text px-3 py-2"

src/editors/sharedComponents/SourceCodeModal/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import hooks from './hooks';
 import { formatMessage } from '../../../testUtils';
 
@@ -31,6 +31,6 @@ describe('SourceCodeModal', () => {
       value: mockvalue,
       ref: mockref,
     });
-    expect(shallow(<SourceCodeModal {...props} />)).toMatchSnapshot();
+    expect(shallow(<SourceCodeModal {...props} />).snapshot).toMatchSnapshot();
   });
 });

src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TinyMceWidget snapshots ImageUploadModal is not rendered 1`] = `
-<Component
+<Provider
   store={
     Object {
       "dispatch": [Function],
@@ -60,11 +60,11 @@ exports[`TinyMceWidget snapshots ImageUploadModal is not rendered 1`] = `
     id="sOMeiD"
     onEditorChange={[Function]}
   />
-</Component>
+</Provider>
 `;
 
 exports[`TinyMceWidget snapshots SourcecodeModal is not rendered 1`] = `
-<Component
+<Provider
   store={
     Object {
       "dispatch": [Function],
@@ -137,11 +137,11 @@ exports[`TinyMceWidget snapshots SourcecodeModal is not rendered 1`] = `
     id="sOMeiD"
     onEditorChange={[Function]}
   />
-</Component>
+</Provider>
 `;
 
 exports[`TinyMceWidget snapshots renders as expected with default behavior 1`] = `
-<Component
+<Provider
   store={
     Object {
       "dispatch": [Function],
@@ -225,5 +225,5 @@ exports[`TinyMceWidget snapshots renders as expected with default behavior 1`] =
     id="sOMeiD"
     onEditorChange={[Function]}
   />
-</Component>
+</Provider>
 `;

src/editors/sharedComponents/TinyMceWidget/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import { selectors } from '../../data/redux';
 import SourceCodeModal from '../SourceCodeModal';
 import ImageUploadModal from '../ImageUploadModal';
@@ -56,6 +56,15 @@ jest.mock('./hooks', () => ({
   useImages: jest.fn(() => ({ imagesRef: { current: [{ externalUrl: staticUrl }] } })),
 }));
 
+jest.mock('react-redux', () => ({
+  Provider: 'Provider',
+  connect: (mapStateToProp, mapDispatchToProps) => (component) => ({
+    mapStateToProp,
+    mapDispatchToProps,
+    component,
+  }),
+}));
+
 describe('TinyMceWidget', () => {
   const props = {
     editorType: 'text',
@@ -80,17 +89,17 @@ describe('TinyMceWidget', () => {
       closeSourceCodeModal: jest.fn().mockName('modal.closeModal'),
     });
     test('renders as expected with default behavior', () => {
-      expect(shallow(<TinyMceWidget {...props} />)).toMatchSnapshot();
+      expect(shallow(<TinyMceWidget {...props} />).snapshot).toMatchSnapshot();
     });
     test('SourcecodeModal is not rendered', () => {
       const wrapper = shallow(<TinyMceWidget {...props} editorType="problem" />);
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.find(SourceCodeModal).length).toBe(0);
+      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper.instance.findByType(SourceCodeModal).length).toBe(0);
     });
     test('ImageUploadModal is not rendered', () => {
       const wrapper = shallow(<TinyMceWidget {...props} isLibrary />);
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.find(ImageUploadModal).length).toBe(0);
+      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper.instance.findByType(ImageUploadModal).length).toBe(0);
     });
   });
   describe('mapStateToProps', () => {