test: Deprecate react-unit-test-utils 8/15 (#664)

2025-06-24 11:38:13 -05:00
parent ab0f139d75
commit 6ae8180f99
10 changed files with 178 additions and 643 deletions
--- a/src/containers/CoursesPanel/snapshots/index.test.jsx.snap
+++ b/src/containers/CoursesPanel/snapshots/index.test.jsx.snap
@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CoursesPanel no courses snapshot 1`] = `
-<div
-  className="course-list-container"
->
-  <div
-    className="course-list-heading-container"
-  >
-    <h2
-      className="course-list-title"
-    >
-      My Courses
-    </h2>
-    <div
-      className="course-filter-controls-container"
-    >
-      <CourseFilterControls />
-    </div>
-  </div>
-  <NoCoursesViewSlot />
-</div>
-`;
-
-exports[`CoursesPanel with courses snapshot 1`] = `
-<div
-  className="course-list-container"
->
-  <div
-    className="course-list-heading-container"
-  >
-    <h2
-      className="course-list-title"
-    >
-      My Courses
-    </h2>
-    <div
-      className="course-filter-controls-container"
-    >
-      <CourseFilterControls />
-    </div>
-  </div>
-  <CourseListSlot
-    courseListData={
-      {
-        "filterOptions": {},
-        "numPages": 1,
-        "setPageNumber": [MockFunction setPageNumber],
-        "showFilters": false,
-        "visibleList": [],
-      }
-    }
-  />
-</div>
-`;
--- a/src/containers/CoursesPanel/index.test.jsx
+++ b/src/containers/CoursesPanel/index.test.jsx
@@ -1,32 +1,49 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { FilterKeys } from 'data/constants/app';
 import { reduxHooks } from 'hooks';
+
+import messagesNoCourses from 'containers/CoursesPanel/NoCoursesView/messages';
 import { useCourseListData } from './hooks';
 import CoursesPanel from '.';
+import messages from './messages';
+
+const courseSearchUrl = '/course-search-url';

 jest.mock('hooks', () => ({
-  reduxHooks: { useHasCourses: jest.fn() },
+  reduxHooks: {
+    useHasCourses: jest.fn(),
+    usePlatformSettingsData: jest.fn(() => ({
+      courseSearchUrl,
+    })),
+  },
 }));

 jest.mock('./hooks', () => ({
  useCourseListData: jest.fn(),
 }));

-jest.mock('containers/CourseCard', () => 'CourseCard');
+jest.mock('containers/CourseCard', () => jest.fn(() => <div>CourseCard</div>));
 jest.mock('containers/CourseFilterControls', () => ({
-  ActiveCourseFilters: 'ActiveCourseFilters',
-  CourseFilterControls: 'CourseFilterControls',
+  ActiveCourseFilters: jest.fn(() => <div>ActiveCourseFilters</div>),
+  CourseFilterControls: jest.fn(() => <div>CourseFilterControls</div>),
 }));
+
 jest.mock('@openedx/frontend-plugin-framework', () => ({
  PluginSlot: 'PluginSlot',
 }));
-jest.mock('./CourseList', () => 'CourseList');
+
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
+const filters = Object.values(FilterKeys);

 reduxHooks.useHasCourses.mockReturnValue(true);

 describe('CoursesPanel', () => {
  const defaultCourseListData = {
-    filterOptions: {},
+    filterOptions: { filters, handleRemoveFilter: jest.fn() },
    numPages: 1,
    setPageNumber: jest.fn().mockName('setPageNumber'),
    showFilters: false,
@@ -34,25 +51,43 @@ describe('CoursesPanel', () => {
  };

  const createWrapper = (courseListData) => {
-    useCourseListData.mockReturnValueOnce({
+    useCourseListData.mockReturnValue({
      ...defaultCourseListData,
      ...courseListData,
    });
-    return shallow(<CoursesPanel />);
+    return render(<IntlProvider locale="en"><CoursesPanel /></IntlProvider>);
  };

  describe('no courses', () => {
-    test('snapshot', () => {
+    it('should render no courses view slot', () => {
      reduxHooks.useHasCourses.mockReturnValue(false);
-      const wrapper = createWrapper();
-      expect(wrapper.snapshot).toMatchSnapshot();
+      createWrapper();
+      const imgNoCourses = screen.getByRole('img', { name: messagesNoCourses.bannerAlt.defaultMessage });
+      expect(imgNoCourses).toBeInTheDocument();
+      const courseCard = screen.queryByText('CourseCard');
+      expect(courseCard).toBeNull();
    });
  });
  describe('with courses', () => {
-    test('snapshot', () => {
+    it('should render courselist', () => {
+      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
      reduxHooks.useHasCourses.mockReturnValue(true);
-      const wrapper = createWrapper();
-      expect(wrapper.snapshot).toMatchSnapshot();
+      createWrapper({ visibleList });
+      const courseCards = screen.getAllByText('CourseCard');
+      expect(courseCards.length).toEqual(visibleList.length);
+    });
+    it('displays course filter controls', () => {
+      reduxHooks.useHasCourses.mockReturnValue(true);
+      createWrapper();
+      expect(screen.getByText('CourseFilterControls')).toBeInTheDocument();
+    });
+
+    it('displays course list slot when courses exist', () => {
+      reduxHooks.useHasCourses.mockReturnValue(true);
+      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
+      createWrapper({ visibleList });
+      const heading = screen.getByText(messages.myCourses.defaultMessage);
+      expect(heading).toBeInTheDocument();
    });
  });
 });
--- a/src/containers/Dashboard/DashboardLayout.test.jsx
+++ b/src/containers/Dashboard/DashboardLayout.test.jsx
@@ -1,14 +1,21 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-import { Col, Row } from '@openedx/paragon';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';

 import hooks from './hooks';
-import DashboardLayout, { columnConfig } from './DashboardLayout';
+import DashboardLayout from './DashboardLayout';

 jest.mock('./hooks', () => ({
  useDashboardLayoutData: jest.fn(),
 }));

+jest.mock('@openedx/frontend-plugin-framework', () => ({
+  PluginSlot: 'PluginSlot',
+}));
+
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 const hookProps = {
  isCollapsed: true,
  sidebarShowing: false,
@@ -16,50 +23,49 @@ const hookProps = {
 };
 hooks.useDashboardLayoutData.mockReturnValue(hookProps);

-const children = 'test-children';
+const children = <div>test children</div>;

-let el;
 describe('DashboardLayout', () => {
  beforeEach(() => {
    jest.clearAllMocks();
-    el = shallow(<DashboardLayout>{children}</DashboardLayout>);
+    render(<IntlProvider locale="en"><DashboardLayout>{children}</DashboardLayout></IntlProvider>);
  });

  const testColumns = () => {
-    it('loads courseList and sidebar column layout', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      Object.keys(columnConfig.sidebar).forEach(size => {
-        expect(columns[1].props[size]).toEqual(columnConfig.sidebar[size]);
-      });
+    it('loads courseList and sidebar column layout with corresponding children', () => {
+      const courseChildren = screen.getByText('test children');
+      const courseListCol = courseChildren.parentElement;
+      const sidebarCol = courseListCol.nextSibling;
+      expect(courseListCol).toHaveClass('course-list-column');
+      expect(sidebarCol).toHaveClass('sidebar-column');
    });
    it('displays children in first column', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      expect(columns[0].children).not.toHaveLength(0);
+      const courseChildren = screen.getByText('test children');
+      const courseListCol = courseChildren.parentElement;
+      expect(courseChildren).toBeInTheDocument();
+      expect(courseListCol).toHaveClass('course-list-column');
    });
    it('displays WidgetSidebarSlot in second column', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      expect(columns[1].findByType('WidgetSidebarSlot')).toHaveLength(1);
+      const courseListCol = screen.getByText('test children').parentElement;
+      const sidebarCol = courseListCol.nextSibling;
+      expect(sidebarCol).toHaveClass('sidebar-column');
+      expect(sidebarCol.children[0]).toHaveAttribute('id', 'org.openedx.frontend.learner_dashboard.widget_sidebar.v1');
    });
  };
-  const testSidebarLayout = () => {
+  const testSidebarLayout = ({ isCollapsed }) => {
    it('displays withSidebar width for course list column', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      Object.keys(columnConfig.courseList.withSidebar).forEach(size => {
-        expect(columns[0].props[size]).toEqual(columnConfig.courseList.withSidebar[size]);
-      });
+      const courseListCol = screen.getByText('test children').parentElement;
+      expect(courseListCol).toHaveClass('col-xl-8');
+      const sidebarCol = courseListCol.nextSibling;
+      expect(sidebarCol).toHaveClass('sidebar-column', !isCollapsed && 'not-collapsed');
    });
  };
-  const testNoSidebarLayout = () => {
+  const testNoSidebarLayout = ({ isCollapsed }) => {
    it('displays noSidebar width for course list column', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      Object.keys(columnConfig.courseList.noSidebar).forEach(size => {
-        expect(columns[0].props[size]).toEqual(columnConfig.courseList.noSidebar[size]);
-      });
-    });
-  };
-  const testSnapshot = () => {
-    test('snapshot', () => {
-      expect(el.snapshot).toMatchSnapshot();
+      const courseListCol = screen.getByText('test children').parentElement;
+      expect(courseListCol).toHaveClass('col-xl-12');
+      const sidebarCol = courseListCol.nextSibling;
+      expect(sidebarCol).toHaveClass('sidebar-column', !isCollapsed && 'not-collapsed');
    });
  };
  describe('collapsed', () => {
@@ -68,27 +74,18 @@ describe('DashboardLayout', () => {
        hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps, sidebarShowing: true });
      });
      testColumns();
-      testSnapshot();
-      testSidebarLayout();
+      testSidebarLayout({ isCollapsed: true });
    });
    describe('sidebar not showing', () => {
+      beforeEach(() => {
+        hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps });
+      });
      testColumns();
-      testSnapshot();
-      testNoSidebarLayout();
-    });
-    it('does not show spacer component above widget sidebar', () => {
-      const columns = el.instance.findByType(Col);
-      expect(columns[1].findByType('h2').length).toEqual(0);
+      testNoSidebarLayout({ isCollapsed: true });
    });
  });

  describe('not collapsed', () => {
-    const testWidgetSpacing = () => {
-      it('shows not-collapsed class on widget sidebar', () => {
-        const columns = el.instance.findByType(Col);
-        expect(columns[1].props.className).toContain('not-collapsed');
-      });
-    };
    describe('sidebar showing', () => {
      beforeEach(() => {
        hooks.useDashboardLayoutData.mockReturnValueOnce({
@@ -98,18 +95,14 @@ describe('DashboardLayout', () => {
        });
      });
      testColumns();
-      testSnapshot();
-      testSidebarLayout();
-      testWidgetSpacing();
+      testSidebarLayout({ isCollapsed: false });
    });
    describe('sidebar not showing', () => {
      beforeEach(() => {
        hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps, isCollapsed: false });
      });
      testColumns();
-      testSnapshot();
-      testNoSidebarLayout();
-      testWidgetSpacing();
+      testNoSidebarLayout({ isCollapsed: false });
    });
  });
 });
--- a/src/containers/Dashboard/LoadingView.test.jsx
+++ b/src/containers/Dashboard/LoadingView.test.jsx
@@ -1,5 +1,4 @@
-import { shallow } from '@edx/react-unit-test-utils';
-import { Spinner } from '@openedx/paragon';
+import { render, screen } from '@testing-library/react';

 import hooks from './hooks';
 import LoadingView from './LoadingView';
@@ -8,16 +7,16 @@ jest.mock('./hooks', () => ({
  useDashboardMessages: jest.fn(),
 }));

+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 const spinnerScreenReaderText = 'test-sr-text';
 describe('LoadingView', () => {
-  beforeEach(() => {
-    hooks.useDashboardMessages.mockReturnValueOnce({ spinnerScreenReaderText });
-  });
-  test('snapshot', () => {
-    expect(shallow(<LoadingView />).snapshot).toMatchSnapshot();
-  });
  it('renders spinner component with associated screen reader text', () => {
-    const wrapper = shallow(<LoadingView />);
-    expect(wrapper.instance.findByType(Spinner)[0].props.screenReaderText).toEqual(spinnerScreenReaderText);
+    hooks.useDashboardMessages.mockReturnValueOnce({ spinnerScreenReaderText });
+    render(<LoadingView />);
+    const loader = screen.getByRole('status');
+    expect(loader.children[0].innerHTML).toBe(spinnerScreenReaderText);
  });
 });
--- a/src/containers/Dashboard/snapshots/DashboardLayout.test.jsx.snap
+++ b/src/containers/Dashboard/snapshots/DashboardLayout.test.jsx.snap
@@ -1,197 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DashboardLayout collapsed sidebar not showing snapshot 1`] = `
-<Container
-  fluid={true}
-  size="xl"
->
-  <Row>
-    <Col
-      className="course-list-column"
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-    >
-      test-children
-    </Col>
-    <Col
-      className={
-        [
-          "sidebar-column",
-          false,
-        ]
-      }
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 4,
-        }
-      }
-    >
-      <WidgetSidebarSlot />
-    </Col>
-  </Row>
-</Container>
-`;
-
-exports[`DashboardLayout collapsed sidebar showing snapshot 1`] = `
-<Container
-  fluid={true}
-  size="xl"
->
-  <Row>
-    <Col
-      className="course-list-column"
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 8,
-        }
-      }
-    >
-      test-children
-    </Col>
-    <Col
-      className={
-        [
-          "sidebar-column",
-          false,
-        ]
-      }
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 4,
-        }
-      }
-    >
-      <WidgetSidebarSlot />
-    </Col>
-  </Row>
-</Container>
-`;
-
-exports[`DashboardLayout not collapsed sidebar not showing snapshot 1`] = `
-<Container
-  fluid={true}
-  size="xl"
->
-  <Row>
-    <Col
-      className="course-list-column"
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-    >
-      test-children
-    </Col>
-    <Col
-      className={
-        [
-          "sidebar-column",
-          "not-collapsed",
-        ]
-      }
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 4,
-        }
-      }
-    >
-      <WidgetSidebarSlot />
-    </Col>
-  </Row>
-</Container>
-`;
-
-exports[`DashboardLayout not collapsed sidebar showing snapshot 1`] = `
-<Container
-  fluid={true}
-  size="xl"
->
-  <Row>
-    <Col
-      className="course-list-column"
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 8,
-        }
-      }
-    >
-      test-children
-    </Col>
-    <Col
-      className={
-        [
-          "sidebar-column",
-          "not-collapsed",
-        ]
-      }
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 4,
-        }
-      }
-    >
-      <WidgetSidebarSlot />
-    </Col>
-  </Row>
-</Container>
-`;
--- a/src/containers/Dashboard/snapshots/LoadingView.test.jsx.snap
+++ b/src/containers/Dashboard/snapshots/LoadingView.test.jsx.snap
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LoadingView snapshot 1`] = `
-<div
-  className="course-list-loading"
->
-  <Spinner
-    animation="border"
-    className="mie-3"
-    screenReaderText="test-sr-text"
-  />
-</div>
-`;
--- a/src/containers/Dashboard/snapshots/index.test.jsx.snap
+++ b/src/containers/Dashboard/snapshots/index.test.jsx.snap
@@ -1,69 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Dashboard snapshots courses loaded, show select session modal snapshot 1`] = `
-<div
-  className="d-flex flex-column p-2 pt-0"
-  id="dashboard-container"
->
-  <h1
-    className="sr-only"
-  >
-    test-page-title
-  </h1>
-  <Fragment>
-    <DashboardModalSlot />
-    <SelectSessionModal />
-  </Fragment>
-  <div
-    data-testid="dashboard-content"
-    id="dashboard-content"
-  >
-    <DashboardLayout>
-      <CoursesPanel />
-    </DashboardLayout>
-  </div>
-</div>
-`;
-
-exports[`Dashboard snapshots courses still loading snapshot 1`] = `
-<div
-  className="d-flex flex-column p-2 pt-0"
-  id="dashboard-container"
->
-  <h1
-    className="sr-only"
-  >
-    test-page-title
-  </h1>
-  <div
-    data-testid="dashboard-content"
-    id="dashboard-content"
-  >
-    <LoadingView />
-  </div>
-</div>
-`;
-
-exports[`Dashboard snapshots there are no courses snapshot 1`] = `
-<div
-  className="d-flex flex-column p-2 pt-0"
-  id="dashboard-container"
->
-  <h1
-    className="sr-only"
-  >
-    test-page-title
-  </h1>
-  <Fragment>
-    <DashboardModalSlot />
-  </Fragment>
-  <div
-    data-testid="dashboard-content"
-    id="dashboard-content"
-  >
-    <DashboardLayout>
-      <CoursesPanel />
-    </DashboardLayout>
-  </div>
-</div>
-`;
--- a/src/containers/Dashboard/index.test.jsx
+++ b/src/containers/Dashboard/index.test.jsx
@@ -1,12 +1,7 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';

 import { reduxHooks } from 'hooks';
-
-import SelectSessionModal from 'containers/SelectSessionModal';
-import CoursesPanel from 'containers/CoursesPanel';
-
-import DashboardLayout from './DashboardLayout';
-import LoadingView from './LoadingView';
 import hooks from './hooks';
 import Dashboard from '.';

@@ -18,104 +13,63 @@ jest.mock('hooks', () => ({
  },
 }));

-jest.mock('plugin-slots/DashboardModalSlot', () => 'DashboardModalSlot');
-jest.mock('containers/CoursesPanel', () => 'CoursesPanel');
-jest.mock('./LoadingView', () => 'LoadingView');
-jest.mock('./DashboardLayout', () => 'DashboardLayout');
-
 jest.mock('./hooks', () => ({
  useInitializeDashboard: jest.fn(),
  useDashboardMessages: jest.fn(),
 }));

+jest.mock('plugin-slots/DashboardModalSlot', () => jest.fn(() => <div>DashboardModalSlot</div>));
+jest.mock('containers/CoursesPanel', () => jest.fn(() => <div>CoursesPanel</div>));
+jest.mock('./LoadingView', () => jest.fn(() => <div>LoadingView</div>));
+jest.mock('containers/SelectSessionModal', () => jest.fn(() => <div>SelectSessionModal</div>));
+jest.mock('./DashboardLayout', () => jest.fn(() => <div>DashboardLayout</div>));
+
 const pageTitle = 'test-page-title';

 describe('Dashboard', () => {
-  beforeEach(() => {
+  const createWrapper = (props = {}) => {
+    const {
+      hasCourses = true,
+      initIsPending = true,
+      showSelectSessionModal = true,
+    } = props;
    hooks.useDashboardMessages.mockReturnValue({ pageTitle });
-  });
-  const createWrapper = ({
-    hasCourses,
-    initIsPending,
-    showSelectSessionModal,
-  }) => {
-    reduxHooks.useHasCourses.mockReturnValueOnce(hasCourses);
-    reduxHooks.useRequestIsPending.mockReturnValueOnce(initIsPending);
-    reduxHooks.useShowSelectSessionModal.mockReturnValueOnce(showSelectSessionModal);
-    return shallow(<Dashboard />);
+    reduxHooks.useHasCourses.mockReturnValue(hasCourses);
+    reduxHooks.useRequestIsPending.mockReturnValue(initIsPending);
+    reduxHooks.useShowSelectSessionModal.mockReturnValue(showSelectSessionModal);
+    return render(<IntlProvider locale="en"><Dashboard /></IntlProvider>);
  };

-  let wrapper;
-  describe('snapshots', () => {
-    const testTitle = () => {
-      test('page title is displayed in sr-only h1 tag', () => {
-        const heading = wrapper.instance.findByType('h1')[0];
-        expect(heading.props.className).toEqual('sr-only');
-        expect(heading.children[0].el).toEqual(pageTitle);
+  describe('render', () => {
+    it('page title is displayed in sr-only h1 tag', () => {
+      createWrapper();
+      const heading = screen.getByText(pageTitle);
+      expect(heading).toHaveClass('sr-only');
+    });
+    describe('initIsPending false', () => {
+      it('should render DashboardModalSlot', () => {
+        createWrapper({ initIsPending: false });
+        const dashboardModalSlot = screen.getByText('DashboardModalSlot');
+        expect(dashboardModalSlot).toBeInTheDocument();
      });
-    };
-    const testSnapshot = () => {
-      test('snapshot', () => {
-        expect(wrapper.snapshot).toMatchSnapshot();
+      it('should render SelectSessionModal', () => {
+        createWrapper({ initIsPending: false });
+        const selectSessionModal = screen.getByText('SelectSessionModal');
+        expect(selectSessionModal).toBeInTheDocument();
      });
-    };
-    const testContent = (el) => {
-      expect(wrapper.instance.findByTestId('dashboard-content')[0].children[0]).toMatchObject(shallow(el));
-    };
-
-    const renderString = (show) => (show ? 'renders' : 'does not render');
-    const testView = ({
-      props,
-      content: [contentName, contentEl],
-      showSelectSessionModal,
-    }) => {
-      beforeEach(() => { wrapper = createWrapper(props); });
-      testTitle();
-      testSnapshot();
-      it(`renders ${contentName}`, () => {
-        testContent(contentEl);
-      });
-      it(`${renderString(showSelectSessionModal)} select session modal`, () => {
-        expect(wrapper.instance.findByType(SelectSessionModal).length).toEqual(showSelectSessionModal ? 1 : 0);
-      });
-    };
+    });
    describe('courses still loading', () => {
-      testView({
-        props: {
-          hasCourses: false,
-          initIsPending: true,
-          showSelectSessionModal: false,
-        },
-        content: ['LoadingView', <LoadingView />],
-        showSelectSessionModal: false,
+      it('should render LoadingView', () => {
+        createWrapper({ hasCourses: false });
+        const loadingView = screen.getByText('LoadingView');
+        expect(loadingView).toBeInTheDocument();
      });
    });
-
-    describe('courses loaded, show select session modal', () => {
-      testView({
-        props: {
-          hasCourses: true,
-          initIsPending: false,
-          showSelectSessionModal: true,
-        },
-        content: ['LoadedView', (
-          <DashboardLayout><CoursesPanel /></DashboardLayout>
-        )],
-        showSelectSessionModal: true,
-      });
-    });
-
-    describe('there are no courses', () => {
-      testView({
-        props: {
-          hasCourses: false,
-          initIsPending: false,
-          showSelectSessionModal: false,
-        },
-        content: ['Dashboard layout with no courses sidebar and content', (
-          <DashboardLayout><CoursesPanel /></DashboardLayout>
-        )],
-        showSelectSessionModal: false,
+    describe('courses loaded', () => {
+      it('should show dashboard layout', () => {
+        createWrapper({ initIsPending: false });
+        const dashboardLayout = screen.getByText('DashboardLayout');
+        expect(dashboardLayout).toBeInTheDocument();
      });
    });
  });
--- a/src/containers/EmailSettingsModal/snapshots/index.test.jsx.snap
+++ b/src/containers/EmailSettingsModal/snapshots/index.test.jsx.snap
@@ -1,133 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EmailSettingsModal render snapshot: emails disabled, show: false 1`] = `
-<ModalDialog
-  hasCloseButton={false}
-  isOpen={false}
-  onClose={[MockFunction utils.nullMethod]}
-  title=""
->
-  <div
-    className="bg-white p-3 rounded shadow"
-    style={
-      {
-        "textAlign": "start",
-      }
-    }
-  >
-    <h4>
-      Receive course emails?
-    </h4>
-    <Form.Switch
-      checked={false}
-      onChange={[MockFunction hooks.onToggle]}
-    >
-      Course emails are off
-    </Form.Switch>
-    <p>
-      Course emails include important information about your course from instructors.
-    </p>
-    <ActionRow>
-      <Button
-        onClick={[MockFunction closeModal]}
-        variant="tertiary"
-      >
-        Never mind
-      </Button>
-      <Button
-        onClick={[MockFunction hooks.save]}
-      >
-        Save settings
-      </Button>
-    </ActionRow>
-  </div>
-</ModalDialog>
-`;
-
-exports[`EmailSettingsModal render snapshot: emails disabled, show: true 1`] = `
-<ModalDialog
-  hasCloseButton={false}
-  isOpen={true}
-  onClose={[MockFunction utils.nullMethod]}
-  title=""
->
-  <div
-    className="bg-white p-3 rounded shadow"
-    style={
-      {
-        "textAlign": "start",
-      }
-    }
-  >
-    <h4>
-      Receive course emails?
-    </h4>
-    <Form.Switch
-      checked={false}
-      onChange={[MockFunction hooks.onToggle]}
-    >
-      Course emails are off
-    </Form.Switch>
-    <p>
-      Course emails include important information about your course from instructors.
-    </p>
-    <ActionRow>
-      <Button
-        onClick={[MockFunction closeModal]}
-        variant="tertiary"
-      >
-        Never mind
-      </Button>
-      <Button
-        onClick={[MockFunction hooks.save]}
-      >
-        Save settings
-      </Button>
-    </ActionRow>
-  </div>
-</ModalDialog>
-`;
-
-exports[`EmailSettingsModal render snapshot: emails enabled, show: true 1`] = `
-<ModalDialog
-  hasCloseButton={false}
-  isOpen={true}
-  onClose={[MockFunction utils.nullMethod]}
-  title=""
->
-  <div
-    className="bg-white p-3 rounded shadow"
-    style={
-      {
-        "textAlign": "start",
-      }
-    }
-  >
-    <h4>
-      Receive course emails?
-    </h4>
-    <Form.Switch
-      checked={true}
-      onChange={[MockFunction hooks.onToggle]}
-    >
-      Course emails are on
-    </Form.Switch>
-    <p>
-      Course emails include important information about your course from instructors.
-    </p>
-    <ActionRow>
-      <Button
-        onClick={[MockFunction closeModal]}
-        variant="tertiary"
-      >
-        Never mind
-      </Button>
-      <Button
-        onClick={[MockFunction hooks.save]}
-      >
-        Save settings
-      </Button>
-    </ActionRow>
-  </div>
-</ModalDialog>
-`;
--- a/src/containers/EmailSettingsModal/index.test.jsx
+++ b/src/containers/EmailSettingsModal/index.test.jsx
@@ -1,14 +1,19 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';

 import hooks from './hooks';
 import EmailSettingsModal from '.';
+import messages from './messages';

 jest.mock('./hooks', () => ({
  __esModule: true,
  default: jest.fn(),
 }));

+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 const hookProps = {
  isOptedOut: true,
  onToggle: jest.fn().mockName('hooks.onToggle'),
@@ -28,7 +33,7 @@ describe('EmailSettingsModal', () => {
  describe('behavior', () => {
    beforeEach(() => {
      hooks.mockReturnValueOnce(hookProps);
-      shallow(<EmailSettingsModal {...props} />);
+      render(<IntlProvider locale="en"><EmailSettingsModal {...props} /></IntlProvider>);
    });
    it('calls hook w/ closeModal and cardId from props', () => {
      expect(hooks).toHaveBeenCalledWith({
@@ -38,20 +43,36 @@ describe('EmailSettingsModal', () => {
    });
  });
  describe('render', () => {
-    test('snapshot: emails disabled, show: false', () => {
-      hooks.mockReturnValueOnce(hookProps);
-      expect(shallow(<EmailSettingsModal {...props} show={false} />).snapshot).toMatchSnapshot();
+    it('emails disabled, show: false', () => {
+      hooks.mockReturnValue(hookProps);
+      render(<IntlProvider locale="en"><EmailSettingsModal {...props} show={false} /></IntlProvider>);
+      const modal = screen.queryByRole('dialog');
+      expect(modal).toBeNull();
    });
-    test('snapshot: emails disabled, show: true', () => {
+    it('emails disabled, show: true', () => {
      hooks.mockReturnValueOnce(hookProps);
-      expect(shallow(<EmailSettingsModal {...props} />).snapshot).toMatchSnapshot();
+      render(<IntlProvider locale="en"><EmailSettingsModal {...props} /></IntlProvider>);
+      const modal = screen.getByRole('dialog');
+      const heading = screen.getByText(messages.header.defaultMessage);
+      const emailsMsg = screen.getByText(messages.emailsOff.defaultMessage);
+      expect(modal).toBeInTheDocument();
+      expect(heading).toBeInTheDocument();
+      expect(emailsMsg).toBeInTheDocument();
    });
-    test('snapshot: emails enabled, show: true', () => {
+    it('emails enabled, show: true', () => {
      hooks.mockReturnValueOnce({
        ...hookProps,
        isOptedOut: false,
      });
-      expect(shallow(<EmailSettingsModal {...props} />).snapshot).toMatchSnapshot();
+      render(<IntlProvider locale="en"><EmailSettingsModal {...props} /></IntlProvider>);
+      const emailsMsg = screen.getByText(messages.emailsOn.defaultMessage);
+      const description = screen.getByText(messages.description.defaultMessage);
+      const buttonNeverMind = screen.getByRole('button', { name: messages.nevermind.defaultMessage });
+      const buttonSave = screen.getByRole('button', { name: messages.save.defaultMessage });
+      expect(emailsMsg).toBeInTheDocument();
+      expect(description).toBeInTheDocument();
+      expect(buttonNeverMind).toBeInTheDocument();
+      expect(buttonSave).toBeInTheDocument();
    });
  });
 });