test: Deprecate react-unit-test-utils 10/15 (#658)

src/containers/SelectSessionModal/__snapshots__/index.test.jsx.snap

@@ -1,176 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SelectSessionModal snapshot empty modal with leave option  1`] = `
-<ModalDialog
-  className="p-4 px-4.5"
-  hasCloseButton={false}
-  isFullscreenOnMobile={true}
-  isOpen={true}
-  onClose={[MockFunction utils.nullMethod]}
-  size="md"
-  title="test-header"
->
-  <h3>
-    test-header
-  </h3>
-  <Form.Group
-    className="pt-3"
-  >
-    <Form.Label>
-      test-hint
-    </Form.Label>
-    <Form.RadioSet
-      className="pt-3 pb-4"
-      name="sessions"
-    >
-      <Form.Radio
-        value="leave"
-      >
-        Leave session
-      </Form.Radio>
-    </Form.RadioSet>
-  </Form.Group>
-  <ActionRow>
-    <Button
-      onClick={[MockFunction useSelectSessionModalData.closeSessionModal]}
-      variant="tertiary"
-    >
-      Never mind
-    </Button>
-    <Button>
-      Confirm Session
-    </Button>
-  </ActionRow>
-</ModalDialog>
-`;
-
-exports[`SelectSessionModal snapshot modal with leave option  1`] = `
-<ModalDialog
-  className="p-4 px-4.5"
-  hasCloseButton={false}
-  isFullscreenOnMobile={true}
-  isOpen={true}
-  onClose={[MockFunction utils.nullMethod]}
-  size="md"
-  title="test-header"
->
-  <h3>
-    test-header
-  </h3>
-  <Form.Group
-    className="pt-3"
-  >
-    <Form.Label>
-      test-hint
-    </Form.Label>
-    <Form.RadioSet
-      className="pt-3 pb-4"
-      name="sessions"
-    >
-      <Form.Radio
-        key="test-course-id-1"
-        value="test-course-id-1"
-      >
-        1/2/2000
-         - 
-        1/2/2020
-      </Form.Radio>
-      <Form.Radio
-        key="test-course-id-2"
-        value="test-course-id-2"
-      >
-        2/3/2000
-         - 
-        2/3/2020
-      </Form.Radio>
-      <Form.Radio
-        key="test-course-id-3"
-        value="test-course-id-3"
-      >
-        3/4/2000
-         - 
-        3/4/2020
-      </Form.Radio>
-      <Form.Radio
-        value="leave"
-      >
-        Leave session
-      </Form.Radio>
-    </Form.RadioSet>
-  </Form.Group>
-  <ActionRow>
-    <Button
-      onClick={[MockFunction useSelectSessionModalData.closeSessionModal]}
-      variant="tertiary"
-    >
-      Never mind
-    </Button>
-    <Button>
-      Confirm Session
-    </Button>
-  </ActionRow>
-</ModalDialog>
-`;
-
-exports[`SelectSessionModal snapshot modal without leave option  1`] = `
-<ModalDialog
-  className="p-4 px-4.5"
-  hasCloseButton={false}
-  isFullscreenOnMobile={true}
-  isOpen={true}
-  onClose={[MockFunction utils.nullMethod]}
-  size="md"
-  title="test-header"
->
-  <h3>
-    test-header
-  </h3>
-  <Form.Group
-    className="pt-3"
-  >
-    <Form.Label>
-      test-hint
-    </Form.Label>
-    <Form.RadioSet
-      className="pt-3 pb-4"
-      name="sessions"
-    >
-      <Form.Radio
-        key="test-course-id-1"
-        value="test-course-id-1"
-      >
-        1/2/2000
-         - 
-        1/2/2020
-      </Form.Radio>
-      <Form.Radio
-        key="test-course-id-2"
-        value="test-course-id-2"
-      >
-        2/3/2000
-         - 
-        2/3/2020
-      </Form.Radio>
-      <Form.Radio
-        key="test-course-id-3"
-        value="test-course-id-3"
-      >
-        3/4/2000
-         - 
-        3/4/2020
-      </Form.Radio>
-    </Form.RadioSet>
-  </Form.Group>
-  <ActionRow>
-    <Button
-      onClick={[MockFunction useSelectSessionModalData.closeSessionModal]}
-      variant="tertiary"
-    >
-      Never mind
-    </Button>
-    <Button>
-      Confirm Session
-    </Button>
-  </ActionRow>
-</ModalDialog>
-`;

src/containers/SelectSessionModal/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 { formatMessage } from 'testUtils';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import hooks from './hooks';
 import SelectSessionModal 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 hookReturn = {
   availableSessions: [],
   showModal: true,
@@ -25,29 +30,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();
     });
   });
 });

src/containers/UnenrollConfirmModal/__snapshots__/index.test.jsx.snap

@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UnenrollConfirmModal component snapshot: modalStates.confirm 1`] = `
-<ModalDialog
-  hasCloseButton={false}
-  isFullscreenOnMobile={false}
-  isOpen={true}
-  onClose={[MockFunction utils.nullMethod]}
-  title=""
->
-  <div
-    className="bg-white p-3 rounded shadow"
-    style={
-      {
-        "textAlign": "start",
-      }
-    }
-  >
-    <ConfirmPane
-      handleClose={[MockFunction hooks.close]}
-      handleConfirm={[MockFunction hooks.confirm]}
-    />
-  </div>
-</ModalDialog>
-`;
-
-exports[`UnenrollConfirmModal component snapshot: modalStates.finished, reason given 1`] = `
-<ModalDialog
-  hasCloseButton={false}
-  isFullscreenOnMobile={false}
-  isOpen={true}
-  onClose={[MockFunction utils.nullMethod]}
-  title=""
->
-  <div
-    className="bg-white p-3 rounded shadow"
-    style={
-      {
-        "textAlign": "start",
-      }
-    }
-  >
-    <FinishedPane
-      gaveReason={true}
-      handleClose={[MockFunction hooks.closeAndRefresh]}
-    />
-  </div>
-</ModalDialog>
-`;
-
-exports[`UnenrollConfirmModal component snapshot: modalStates.finished, reason skipped 1`] = `
-<ModalDialog
-  hasCloseButton={false}
-  isFullscreenOnMobile={false}
-  isOpen={true}
-  onClose={[MockFunction utils.nullMethod]}
-  title=""
->
-  <div
-    className="bg-white p-3 rounded shadow"
-    style={
-      {
-        "textAlign": "start",
-      }
-    }
-  >
-    <FinishedPane
-      gaveReason={true}
-      handleClose={[MockFunction hooks.closeAndRefresh]}
-    />
-  </div>
-</ModalDialog>
-`;
-
-exports[`UnenrollConfirmModal component snapshot: modalStates.reason, should be fullscreen with no shadow 1`] = `
-<ModalDialog
-  hasCloseButton={false}
-  isFullscreenOnMobile={true}
-  isOpen={true}
-  onClose={[MockFunction utils.nullMethod]}
-  title=""
->
-  <div
-    className="bg-white p-3 rounded"
-    style={
-      {
-        "textAlign": "start",
-      }
-    }
-  >
-    <ReasonPane
-      reason={
-        {
-          "isSkipped": false,
-          "reasonProps": "other",
-        }
-      }
-    />
-  </div>
-</ModalDialog>
-`;

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

@@ -1,14 +1,34 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { formatMessage } from 'testUtils';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { ConfirmPane } from './ConfirmPane';
+import messages from './messages';
+
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
+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();
   });
 });

src/containers/UnenrollConfirmModal/components/FinishedPane.test.jsx

@@ -1,21 +1,50 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { formatMessage } from 'testUtils';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { FinishedPane } from './FinishedPane';
+import messages from './messages';
+
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
+const props = {
+  gaveReason: true,
+  handleClose: jest.fn().mockName('props.handleClose'),
+};
 
 describe('UnenrollConfirmModal FinishedPane', () => {
-  test('snapshot: gave reason', () => {
-    const props = {
-      gaveReason: true,
-      handleClose: jest.fn().mockName('props.handleClose'),
-    };
-    expect(shallow(<FinishedPane {...props} />).snapshot).toMatchSnapshot();
+  describe('gave reason', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+      render(<IntlProvider locale="en"><FinishedPane {...props} /></IntlProvider>);
+    });
+    it('renders heading', () => {
+      const heading = screen.getByText(formatMessage(messages.finishHeading));
+      expect(heading).toBeInTheDocument();
+    });
+    it('renders return button', () => {
+      const returnButton = screen.getByRole('button', { name: formatMessage(messages.finishReturn) });
+      expect(returnButton).toBeInTheDocument();
+    });
+    it('Gave reason, display thanks message', () => {
+      const thanksMsg = screen.getByText((text) => text.includes('Thank you'));
+      expect(thanksMsg).toBeInTheDocument();
+      expect(thanksMsg.innerHTML).toContain(formatMessage(messages.finishThanksText));
+    });
   });
-  test('snapshot: did not give reason', () => {
-    const props = {
-      gaveReason: false,
-      handleClose: jest.fn().mockName('props.handleClose'),
-    };
-    expect(shallow(<FinishedPane {...props} />).snapshot).toMatchSnapshot();
+  describe('Did not give reason', () => {
+    it('Does not display thanks message', () => {
+      const customProps = {
+        gaveReason: false,
+        handleClose: jest.fn().mockName('props.handleClose'),
+      };
+      render(<IntlProvider locale="en"><FinishedPane {...customProps} /></IntlProvider>);
+      const thanksMsg = screen.queryByText((text) => text.includes('Thank you'));
+      expect(thanksMsg).toBeNull();
+      const finishMsg = screen.getByText(formatMessage(messages.finishText));
+      expect(finishMsg).toBeInTheDocument();
+    });
   });
 });

src/containers/UnenrollConfirmModal/components/ReasonPane.test.jsx

@@ -1,7 +1,13 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { formatMessage } from 'testUtils';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { ReasonPane } from './ReasonPane';
+import messages from './messages';
+
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
 
 describe('UnenrollConfirmModal ReasonPane', () => {
   const props = {
@@ -17,10 +23,25 @@ describe('UnenrollConfirmModal ReasonPane', () => {
       hasReason: true,
     },
   };
-  test('snapshot', () => {
-    expect(shallow(<ReasonPane {...props} />).snapshot).toMatchSnapshot();
+  it('render heading', () => {
+    render(<IntlProvider locale="en"><ReasonPane {...props} /></IntlProvider>);
+    const heading = screen.getByText(formatMessage(messages.reasonHeading));
+    expect(heading).toBeInTheDocument();
   });
-  test('snapshot: no reason provided', () => {
-    expect(shallow(<ReasonPane {...props} hasReason={false} />).snapshot).toMatchSnapshot();
+  it('render options', () => {
+    render(<IntlProvider locale="en"><ReasonPane {...props} /></IntlProvider>);
+    const radioButtons = screen.getAllByRole('radio');
+    expect(radioButtons).toBeDefined();
+    expect(radioButtons.length).toBe(10);
+  });
+  it('render skip button', () => {
+    render(<IntlProvider locale="en"><ReasonPane {...props} hasReason={false} /></IntlProvider>);
+    const skipButton = screen.getByRole('button', { name: formatMessage(messages.reasonSkip) });
+    expect(skipButton).toBeInTheDocument();
+  });
+  it('render submit button', () => {
+    render(<IntlProvider locale="en"><ReasonPane {...props} hasReason={false} /></IntlProvider>);
+    const submitButton = screen.getByRole('button', { name: formatMessage(messages.reasonSubmit) });
+    expect(submitButton).toBeInTheDocument();
   });
 });

src/containers/UnenrollConfirmModal/components/__snapshots__/ConfirmPane.test.jsx.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UnenrollConfirmModal ConfirmPane snapshot 1`] = `
-<Fragment>
-  <h4>
-    Unenroll from course?
-  </h4>
-  <ActionRow>
-    <Button
-      onClick={[MockFunction props.handleClose]}
-      variant="tertiary"
-    >
-      Never mind
-    </Button>
-    <Button
-      onClick={[MockFunction props.handleConfirm]}
-    >
-      Unenroll
-    </Button>
-  </ActionRow>
-</Fragment>
-`;

src/containers/UnenrollConfirmModal/components/__snapshots__/FinishedPane.test.jsx.snap

@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UnenrollConfirmModal FinishedPane snapshot: did not give reason 1`] = `
-<Fragment>
-  <h4>
-    You are unenrolled
-  </h4>
-  <p>
-    This course will be removed from your dashboard.
-  </p>
-  <ActionRow>
-    <Button
-      onClick={[MockFunction props.handleClose]}
-    >
-      Return to dashboard
-    </Button>
-  </ActionRow>
-</Fragment>
-`;
-
-exports[`UnenrollConfirmModal FinishedPane snapshot: gave reason 1`] = `
-<Fragment>
-  <h4>
-    You are unenrolled
-  </h4>
-  <p>
-    Thank you for sharing your reason for unenrolling.  
-    This course will be removed from your dashboard.
-  </p>
-  <ActionRow>
-    <Button
-      onClick={[MockFunction props.handleClose]}
-    >
-      Return to dashboard
-    </Button>
-  </ActionRow>
-</Fragment>
-`;

src/containers/UnenrollConfirmModal/components/__snapshots__/ReasonPane.test.jsx.snap

@@ -1,183 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UnenrollConfirmModal ReasonPane snapshot 1`] = `
-<Fragment>
-  <h4>
-    What's your main reason for unenrolling?
-  </h4>
-  <Form.RadioSet
-    name="unenrollReason"
-    onChange={[MockFunction props.reason.selectOption]}
-    value="props.reason.selected"
-  >
-    <Form.Radio
-      key="prereqs"
-      value="prereqs"
-    >
-      I don't have the academic or language prerequisites
-    </Form.Radio>
-    <Form.Radio
-      key="difficulty"
-      value="difficulty"
-    >
-      The course material was too hard
-    </Form.Radio>
-    <Form.Radio
-      key="goals"
-      value="goals"
-    >
-      This won't help me reach my goals
-    </Form.Radio>
-    <Form.Radio
-      key="broken"
-      value="broken"
-    >
-      Something was broken
-    </Form.Radio>
-    <Form.Radio
-      key="time"
-      value="time"
-    >
-      I don't have the time
-    </Form.Radio>
-    <Form.Radio
-      key="browse"
-      value="browse"
-    >
-      I just wanted to browse the material
-    </Form.Radio>
-    <Form.Radio
-      key="support"
-      value="support"
-    >
-      I don't have enough support
-    </Form.Radio>
-    <Form.Radio
-      key="quality"
-      value="quality"
-    >
-      I am not happy with the quality of the content
-    </Form.Radio>
-    <Form.Radio
-      key="easy"
-      value="easy"
-    >
-      The course material was too easy
-    </Form.Radio>
-    <Form.Radio
-      value="custom"
-    >
-      <Form.Control
-        onChange={[MockFunction props.reason.customOption.onChange]}
-        placeholder="Other"
-        value="props.reason.customOption.value"
-      />
-    </Form.Radio>
-  </Form.RadioSet>
-  <ActionRow>
-    <Button
-      onClick={[MockFunction props.reason.handleSkip]}
-      variant="tertiary"
-    >
-      Skip survey
-    </Button>
-    <Button
-      disabled={false}
-      onClick={[MockFunction props.reason.handleSubmit]}
-    >
-      Submit reason
-    </Button>
-  </ActionRow>
-</Fragment>
-`;
-
-exports[`UnenrollConfirmModal ReasonPane snapshot: no reason provided 1`] = `
-<Fragment>
-  <h4>
-    What's your main reason for unenrolling?
-  </h4>
-  <Form.RadioSet
-    name="unenrollReason"
-    onChange={[MockFunction props.reason.selectOption]}
-    value="props.reason.selected"
-  >
-    <Form.Radio
-      key="prereqs"
-      value="prereqs"
-    >
-      I don't have the academic or language prerequisites
-    </Form.Radio>
-    <Form.Radio
-      key="difficulty"
-      value="difficulty"
-    >
-      The course material was too hard
-    </Form.Radio>
-    <Form.Radio
-      key="goals"
-      value="goals"
-    >
-      This won't help me reach my goals
-    </Form.Radio>
-    <Form.Radio
-      key="broken"
-      value="broken"
-    >
-      Something was broken
-    </Form.Radio>
-    <Form.Radio
-      key="time"
-      value="time"
-    >
-      I don't have the time
-    </Form.Radio>
-    <Form.Radio
-      key="browse"
-      value="browse"
-    >
-      I just wanted to browse the material
-    </Form.Radio>
-    <Form.Radio
-      key="support"
-      value="support"
-    >
-      I don't have enough support
-    </Form.Radio>
-    <Form.Radio
-      key="quality"
-      value="quality"
-    >
-      I am not happy with the quality of the content
-    </Form.Radio>
-    <Form.Radio
-      key="easy"
-      value="easy"
-    >
-      The course material was too easy
-    </Form.Radio>
-    <Form.Radio
-      value="custom"
-    >
-      <Form.Control
-        onChange={[MockFunction props.reason.customOption.onChange]}
-        placeholder="Other"
-        value="props.reason.customOption.value"
-      />
-    </Form.Radio>
-  </Form.RadioSet>
-  <ActionRow>
-    <Button
-      onClick={[MockFunction props.reason.handleSkip]}
-      variant="tertiary"
-    >
-      Skip survey
-    </Button>
-    <Button
-      disabled={false}
-      onClick={[MockFunction props.reason.handleSubmit]}
-    >
-      Submit reason
-    </Button>
-  </ActionRow>
-</Fragment>
-`;

src/containers/UnenrollConfirmModal/index.test.jsx

@@ -1,13 +1,11 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { formatMessage } from 'testUtils';
 
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { UnenrollConfirmModal } from '.';
 
 import * as hooks from './hooks';
-
-jest.mock('./components/ConfirmPane', () => 'ConfirmPane');
-jest.mock('./components/ReasonPane', () => 'ReasonPane');
-jest.mock('./components/FinishedPane', () => 'FinishedPane');
+import messages from './components/messages';
 
 jest.mock('./hooks', () => ({
   __esModule: true,
@@ -15,6 +13,10 @@ jest.mock('./hooks', () => ({
   useUnenrollData: jest.fn(),
 }));
 
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 describe('UnenrollConfirmModal component', () => {
   const hookProps = {
     confirm: jest.fn().mockName('hooks.confirm'),
@@ -33,29 +35,48 @@ describe('UnenrollConfirmModal component', () => {
     show: true,
     cardId,
   };
-  test('hooks called with closeModal and cardId', () => {
+  it('hooks called with closeModal and cardId', () => {
     hooks.useUnenrollData.mockReturnValueOnce(hookProps);
-    shallow(<UnenrollConfirmModal {...props} />);
+    render(<IntlProvider><UnenrollConfirmModal {...props} /></IntlProvider>);
     expect(hooks.useUnenrollData).toHaveBeenCalledWith({ closeModal, cardId });
   });
-  test('snapshot: modalStates.confirm', () => {
+  it('modalStates.confirm display correct component and to have class shadow', () => {
     hooks.useUnenrollData.mockReturnValueOnce(hookProps);
-    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
+    render(<IntlProvider><UnenrollConfirmModal {...props} /></IntlProvider>);
+    const confirmHeader = screen.getByText(formatMessage(messages.confirmHeader));
+    expect(confirmHeader).toBeInTheDocument();
+    const dialogContainer = screen.getByRole('dialog').firstElementChild;
+    expect(dialogContainer).toHaveClass('shadow');
   });
-  test('snapshot: modalStates.finished, reason given', () => {
+  it('modalStates.finished, reason given, display correct component', () => {
     hooks.useUnenrollData.mockReturnValueOnce({ ...hookProps, modalState: hooks.modalStates.finished });
-    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
+    render(<IntlProvider><UnenrollConfirmModal {...props} /></IntlProvider>);
+    const finishHeading = screen.getByText(formatMessage(messages.finishHeading));
+    expect(finishHeading).toBeInTheDocument();
+    const thanksMsg = screen.getByText((text) => text.includes('Thank you'));
+    expect(thanksMsg).toBeInTheDocument();
+    expect(thanksMsg.innerHTML).toContain(formatMessage(messages.finishThanksText));
   });
-  test('snapshot: modalStates.finished, reason skipped', () => {
+  it('modalStates.finished, reason skipped', () => {
     hooks.useUnenrollData.mockReturnValueOnce({
       ...hookProps,
       modalState: hooks.modalStates.finished,
-      isSkipped: true,
+      reason: { isSkipped: true },
     });
-    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
+    render(<IntlProvider><UnenrollConfirmModal {...props} /></IntlProvider>);
+    const finishHeading = screen.getByText(formatMessage(messages.finishHeading));
+    expect(finishHeading).toBeInTheDocument();
+    const thanksMsg = screen.queryByText((text) => text.includes('Thank you'));
+    expect(thanksMsg).toBeNull();
+    const finishMsg = screen.getByText(formatMessage(messages.finishText));
+    expect(finishMsg).toBeInTheDocument();
   });
-  test('snapshot: modalStates.reason, should be fullscreen with no shadow', () => {
+  it('modalStates.reason, should display correct component with no shadow', () => {
     hooks.useUnenrollData.mockReturnValueOnce({ ...hookProps, modalState: hooks.modalStates.reason });
-    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
+    render(<IntlProvider><UnenrollConfirmModal {...props} /></IntlProvider>);
+    const reasonHeading = screen.getByText(formatMessage(messages.reasonHeading));
+    expect(reasonHeading).toBeInTheDocument();
+    const dialogContainer = screen.getByRole('dialog').firstElementChild;
+    expect(dialogContainer).not.toHaveClass('shadow');
   });
 });