@openedx/frontend-app-learner-dashboard 1.0.0-alpha.3 → 1.0.0-alpha.5

package/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';
@@ -10,14 +9,10 @@ jest.mock('./hooks', () => ({
 
 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);
   });
 });

package/src/containers/Dashboard/hooks.test.js

@@ -1,25 +1,37 @@
-import React from 'react';
-
 import { useIntl } from '@openedx/frontend-base';
 import { useWindowSize, breakpoints } from '@openedx/paragon';
+import { apiHooks } from '@src/hooks';
+import { MockUseState } from '@src/testUtils';
 
-import { apiHooks } from 'hooks';
-import { MockUseState } from 'testUtils';
-
-import appMessages from 'messages';
+import appMessages from '@src/messages';
 import * as hooks from './hooks';
 
 jest.mock('@openedx/paragon', () => ({
+  ...jest.requireActual('@openedx/paragon'),
   useWindowSize: jest.fn(),
   breakpoints: {},
 }));
 
-jest.mock('hooks', () => ({
+jest.mock('@openedx/frontend-base', () => {
+  const { formatMessage } = jest.requireActual('@src/testUtils');
+  return {
+    ...jest.requireActual('@openedx/frontend-base',),
+    useIntl: () => ({
+      formatMessage,
+    }),
+  };
+});
+
+jest.mock('@src/hooks', () => ({
   apiHooks: {
     useInitializeApp: jest.fn(),
   },
 }));
 
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useEffect: jest.fn((cb, prereqs) => ({ useEffect: { cb, prereqs } })),
+}));
 const state = new MockUseState(hooks);
 
 const initializeApp = jest.fn();
@@ -63,24 +75,14 @@ describe('CourseCard hooks', () => {
       });
     });
   });
-  describe('useInitializeDashboard', () => {
-    it('dispatches initialize thunk action on component load', () => {
-      hooks.useInitializeDashboard();
-      const [cb, prereqs] = React.useEffect.mock.calls[0];
-      expect(prereqs).toEqual([]);
-      expect(initializeApp).not.toHaveBeenCalled();
-      cb();
-      expect(initializeApp).toHaveBeenCalledWith();
-    });
-  });
   describe('useDashboardMessages', () => {
     it('returns spinner screen reader text', () => {
-      expect(hooks.useDashboardMessages()['learner-dash.loadingSR']).toEqual(
+      expect(hooks.useDashboardMessages().spinnerScreenReaderText).toEqual(
         formatMessage(appMessages['learner-dash.loadingSR']),
       );
     });
     it('returns page title', () => {
-      expect(hooks.useDashboardMessages()['learner-dash.title']).toEqual(
+      expect(hooks.useDashboardMessages().pageTitle).toEqual(
         formatMessage(appMessages['learner-dash.title']),
       );
     });

package/src/containers/Dashboard/index.scss

@@ -1,29 +1,27 @@
-@import "@openedx/paragon/scss/core/core";
-
 .course-list-column {
-  padding: 0 map-get($spacers, 4);
+  padding: 0 var(--pgn-spacing-spacer-4);
 }
 
 .sidebar-column {
-  padding: 0 map-get($spacers, 3) 0 map-get($spacers, 1);
+  padding: 0 var(--pgn-spacing-spacer-3) 0 var(--pgn-spacing-spacer-1);
 
   &.not-collapsed {
-    padding-top: map-get($spacers, 2);
+    padding-top: var(--pgn-spacing-spacer-2);
 
     & >:first-child {
-      margin-top: map-get($spacers, 5\.5);
+      margin-top: var(--pgn-spacing-spacer-5-5);
     }
   }
 }
 
-@include media-breakpoint-down(lg) {
+@media (--pgn-size-breakpoint-max-width-lg) {
   .sidebar-column {
     // grid are inheriting dir="ltr" from the body, so we need to override it
     [dir=ltr] & {
-      padding: 0 map-get($spacers, 3);
+      padding: 0 var(--pgn-spacing-spacer-3);
     }
     [dir=rtl] & {
-      padding: 0 map-get($spacers, 3);
+      padding: 0 var(--pgn-spacing-spacer-3);
     }
   }
-}
+}

package/src/containers/Dashboard/index.test.jsx

@@ -1,121 +1,80 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { reduxHooks } from 'hooks';
-
-import SelectSessionModal from 'containers/SelectSessionModal';
-import CoursesPanel from 'containers/CoursesPanel';
-
-import DashboardLayout from './DashboardLayout';
-import LoadingView from './LoadingView';
+import { reduxHooks, apiHooks } from '@src/hooks';
 import hooks from './hooks';
-import Dashboard from '.';
+import Dashboard from './';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useHasCourses: jest.fn(),
     useShowSelectSessionModal: jest.fn(),
     useRequestIsPending: jest.fn(),
   },
+  apiHooks: {
+    useInitializeApp: jest.fn(),
+  },
 }));
 
-jest.mock('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('../../slots/DashboardModalSlot', () => jest.fn(() => <div>DashboardModalSlot</div>));
+jest.mock('@src/containers/CoursesPanel', () => jest.fn(() => <div>CoursesPanel</div>));
+jest.mock('@src/containers/SelectSessionModal', () => jest.fn(() => <div>SelectSessionModal</div>));
+jest.mock('./DashboardLayout', () => jest.fn(() => <div>DashboardLayout</div>));
+jest.mock('./LoadingView', () => jest.fn(() => <div>LoadingView</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 />);
+    apiHooks.useInitializeApp.mockReturnValue({ isPending: initIsPending });
+    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);
-      });
-    };
-    const testSnapshot = () => {
-      test('snapshot', () => {
-        expect(wrapper.snapshot).toMatchSnapshot();
-      });
-    };
-    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('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();
       });
-    };
-    describe('courses still loading', () => {
-      testView({
-        props: {
-          hasCourses: false,
-          initIsPending: true,
-          showSelectSessionModal: false,
-        },
-        content: ['LoadingView', <LoadingView />],
-        showSelectSessionModal: false,
+      it('should render SelectSessionModal', () => {
+        createWrapper({ initIsPending: false });
+        const selectSessionModal = screen.getByText('SelectSessionModal');
+        expect(selectSessionModal).toBeInTheDocument();
       });
     });
-
-    describe('courses loaded, show select session modal', () => {
-      testView({
-        props: {
-          hasCourses: true,
-          initIsPending: false,
-          showSelectSessionModal: true,
-        },
-        content: ['LoadedView', (
-          <DashboardLayout><CoursesPanel /></DashboardLayout>
-        )],
-        showSelectSessionModal: true,
+    
+    describe('courses still loading', () => {
+      it('should render LoadingView', () => {
+        createWrapper({ initIsPending: true });
+        const loadingView = screen.getByText('LoadingView');
+        expect(loadingView).toBeInTheDocument();
       });
     });
-
-    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();
       });
     });
   });

package/src/containers/EmailSettingsModal/hooks.test.js

@@ -1,9 +1,9 @@
-import { MockUseState } from 'testUtils';
-import { reduxHooks, apiHooks } from 'hooks';
+import { MockUseState } from '@src/testUtils';
+import { reduxHooks, apiHooks } from '@src/hooks';
 
 import * as hooks from './hooks';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardEnrollmentData: jest.fn(),
   },

package/src/containers/EmailSettingsModal/index.test.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
 
 import hooks from './hooks';
 import EmailSettingsModal from '.';
+import messages from './messages';
 
 jest.mock('./hooks', () => ({
   __esModule: true,
@@ -28,7 +29,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 +39,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();
     });
   });
 });

package/src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx

@@ -1,23 +1,43 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
 
 import ProgramCard from './ProgramCard';
 
 const props = {
   data: {
     numberOfCourses: 2,
-    bannerImgSrc: 'props.data.bannerImgSrc',
-    logoImgSrc: 'props.data.logoImgSrc',
-    title: 'props.data.title',
-    provider: 'props.data.provider',
-    programType: 'props.data.programType',
-    programUrl: 'props.data.programUrl',
-    programTypeUrl: 'props.data.programTypeUrl',
+    bannerImgSrc: 'test bannerImgSrc',
+    logoImgSrc: 'test logoImgSrc',
+    title: 'test title',
+    provider: 'test provider',
+    programType: 'test programType',
+    programUrl: 'test programUrl',
+    programTypeUrl: 'test programTypeUrl',
   },
 };
 
 describe('RelatedProgramsModal ProgramCard', () => {
-  test('snapshot', () => {
-    expect(shallow(<ProgramCard {...props} />).snapshot).toMatchSnapshot();
+  describe('renders', () => {
+    beforeEach(() => render(<IntlProvider locale="en"><ProgramCard {...props} /></IntlProvider>));
+    it('bannerImg and logo', () => {
+      const logo = screen.getByRole('img', { name: `${props.data.provider} logo` });
+      const bannerImg = screen.getByRole('img', { name: /bannerAlt/i });
+      expect(logo).toBeInTheDocument();
+      expect(bannerImg).toBeInTheDocument();
+    });
+    it('title and subtitle', () => {
+      const title = screen.getByText(props.data.title);
+      const subtitle = screen.getByText(props.data.provider);
+      expect(title).toBeInTheDocument();
+      expect(subtitle).toBeInTheDocument();
+    });
+    it('badge', () => {
+      const badge = screen.getByText(props.data.programType);
+      expect(badge).toBeInTheDocument();
+    });
+    it('courses number', () => {
+      const coursesNumber = screen.getByText(`${props.data.numberOfCourses} Courses`);
+      expect(coursesNumber).toBeInTheDocument();
+    });
   });
 });

package/src/containers/RelatedProgramsModal/index.test.jsx

@@ -1,20 +1,21 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { reduxHooks } from 'hooks';
+import { reduxHooks } from '@src/hooks';
 import RelatedProgramsModal from '.';
+import messages from './messages';
 
-jest.mock('./components/ProgramCard', () => 'ProgramCard');
-jest.mock('hooks', () => ({
+jest.mock('./components/ProgramCard', () => jest.fn(() => <div>ProgramCard</div>));
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardCourseData: jest.fn(),
     useCardRelatedProgramsData: jest.fn(),
   },
 }));
 
-const cardId = 'test-course-number';
+const cardId = 'test-card-id';
 const courseData = {
-  courseTitle: 'hookProps.courseTitle',
+  courseName: 'test course',
 };
 const programData = {
   list: [
@@ -45,16 +46,27 @@ describe('RelatedProgramsModal', () => {
     reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce(programData);
   });
   it('initializes hooks with cardId', () => {
-    shallow(<RelatedProgramsModal {...props} />);
+    render(<IntlProvider locale="en"><RelatedProgramsModal {...props} /></IntlProvider>);
     expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(cardId);
     expect(reduxHooks.useCardRelatedProgramsData).toHaveBeenCalledWith(cardId);
   });
-  test('snapshot: open', () => {
-    expect(shallow(<RelatedProgramsModal {...props} />).snapshot).toMatchSnapshot();
-  });
-  test('snapshot: closed', () => {
-    expect(
-      shallow(<RelatedProgramsModal {...props} isOpen={false} />).snapshot,
-    ).toMatchSnapshot();
+  describe('renders', () => {
+    beforeEach(() => render(<IntlProvider locale="en"><RelatedProgramsModal {...props} /></IntlProvider>));
+    it('display header', () => {
+      const header = screen.getByRole('heading', { name: messages.header.defaultMessage });
+      expect(header).toBeInTheDocument();
+    });
+    it('displays course name', () => {
+      const courseName = screen.getByText(courseData.courseName);
+      expect(courseName).toBeInTheDocument();
+    });
+    it('displays description', () => {
+      const description = screen.getByText((text) => text.includes('Are you looking to expand your knowledge?'));
+      expect(description).toBeInTheDocument();
+    });
+    it('displays program cards', () => {
+      const programCards = screen.getAllByText('ProgramCard');
+      expect(programCards.length).toEqual(programData.list.length);
+    });
   });
 });

package/src/containers/SelectSessionModal/constants.js

@@ -1,2 +1 @@
-/* eslint-disable import/prefer-default-export */
 export const LEAVE_OPTION = 'leave';

package/src/containers/SelectSessionModal/hooks.test.js

@@ -1,21 +1,31 @@
 import { useIntl } from '@openedx/frontend-base';
-import track from 'tracking';
+import track from '@src/tracking';
 
-import { MockUseState } from 'testUtils';
-import { reduxHooks, apiHooks } from 'hooks';
+import { MockUseState } from '@src/testUtils';
+import { reduxHooks, apiHooks } from '@src/hooks';
 
 import { LEAVE_OPTION } from './constants';
 import messages from './messages';
 import * as hooks from './hooks';
 
-jest.mock('tracking', () => ({
+jest.mock('@openedx/frontend-base', () => {
+  const { formatMessage } = jest.requireActual('@src/testUtils');
+  return {
+    ...jest.requireActual('@openedx/frontend-base'),
+    useIntl: () => ({
+      formatMessage,
+    }),
+  };
+});
+
+jest.mock('@src/tracking', () => ({
   entitlements: {
     newSession: jest.fn(),
     switchSession: jest.fn(),
     leaveSession: jest.fn(),
   },
 }));
-jest.mock('hooks', () => ({
+jest.mock('../../hooks', () => ({
   reduxHooks: {
     useCardCourseData: jest.fn(),
     useCardCourseRunData: jest.fn(),

package/src/containers/SelectSessionModal/index.test.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
+import { formatMessage } from '@src/testUtils';
+import { IntlProvider } from '@openedx/frontend-base';
 import hooks from './hooks';
 import SelectSessionModal from '.';
+import messages from './messages';
 
 jest.mock('./hooks', () => ({
   __esModule: true,
@@ -25,29 +26,41 @@ const availableSessions = [
 ];
 
 describe('SelectSessionModal', () => {
-  describe('snapshot', () => {
-    test('empty modal with leave option ', () => {
+  describe('renders', () => {
+    it('empty modal with leave option ', () => {
       hooks.mockReturnValueOnce({
         ...hookReturn,
       });
-      expect(shallow(<SelectSessionModal />).snapshot).toMatchSnapshot();
+      render(<IntlProvider locale="en"><SelectSessionModal /></IntlProvider>);
+      const sessionOption = screen.queryByDisplayValue(availableSessions[0].courseId);
+      expect(sessionOption).toBeNull();
+      const leaveOption = screen.getByRole('radio', { name: formatMessage(messages.leaveSessionOption) });
+      expect(leaveOption).toBeInTheDocument();
     });
 
-    test('modal with leave option ', () => {
+    it('modal with leave option ', () => {
       hooks.mockReturnValueOnce({
         ...hookReturn,
-        availableSessions: [...availableSessions],
+        availableSessions,
       });
-      expect(shallow(<SelectSessionModal />).snapshot).toMatchSnapshot();
+      render(<IntlProvider locale="en"><SelectSessionModal /></IntlProvider>);
+      const sessionOption = screen.getByDisplayValue(availableSessions[0].courseId);
+      expect(sessionOption).toBeInTheDocument();
+      const leaveOption = screen.getByRole('radio', { name: formatMessage(messages.leaveSessionOption) });
+      expect(leaveOption).toBeInTheDocument();
     });
 
-    test('modal without leave option ', () => {
+    it('modal without leave option ', () => {
       hooks.mockReturnValueOnce({
         ...hookReturn,
         availableSessions,
         showLeaveOption: false,
       });
-      expect(shallow(<SelectSessionModal />).snapshot).toMatchSnapshot();
+      render(<IntlProvider locale="en"><SelectSessionModal /></IntlProvider>);
+      const sessionOption = screen.getByDisplayValue(availableSessions[0].courseId);
+      expect(sessionOption).toBeInTheDocument();
+      const leaveOption = screen.queryByRole('radio', { name: formatMessage(messages.leaveSessionOption) });
+      expect(leaveOption).toBeNull();
     });
   });
 });

package/src/containers/UnenrollConfirmModal/components/ConfirmPane.test.jsx

@@ -1,14 +1,30 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { formatMessage } from '@src/testUtils';
+import { IntlProvider } from '@openedx/frontend-base';
 
 import { ConfirmPane } from './ConfirmPane';
+import messages from './messages';
+
+const props = {
+  handleClose: jest.fn().mockName('props.handleClose'),
+  handleConfirm: jest.fn().mockName('props.handleConfirm'),
+};
 
 describe('UnenrollConfirmModal ConfirmPane', () => {
-  test('snapshot', () => {
-    const props = {
-      handleClose: jest.fn().mockName('props.handleClose'),
-      handleConfirm: jest.fn().mockName('props.handleConfirm'),
-    };
-    expect(shallow(<ConfirmPane {...props} />).snapshot).toMatchSnapshot();
+  beforeEach(() => {
+    jest.clearAllMocks();
+    render(<IntlProvider locale="en"><ConfirmPane {...props} /></IntlProvider>);
+  });
+  it('renders title', () => {
+    const header = screen.getByText(formatMessage(messages.confirmHeader));
+    expect(header).toBeInTheDocument();
+  });
+  it('renders cancel button', () => {
+    const cancelButton = screen.getByRole('button', { name: formatMessage(messages.confirmCancel) });
+    expect(cancelButton).toBeInTheDocument();
+  });
+  it('renders unenroll button', () => {
+    const unenrollButton = screen.getByRole('button', { name: formatMessage(messages.confirmUnenroll) });
+    expect(unenrollButton).toBeInTheDocument();
   });
 });