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

Author: diana-villalvazo-wgu

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

@@ -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/SelectSessionModal/index.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();
   });
 });