test: Deprecate react-unit-test-utils 13/15 (#678)

Author: diana-villalvazo-wgu

src/App.test.jsx

@@ -32,9 +32,10 @@ jest.mock('@edx/frontend-platform', () => ({
   getConfig: jest.fn(() => ({})),
 }));
 
-jest.unmock('@openedx/paragon');
-jest.unmock('@edx/frontend-platform/i18n');
-jest.unmock('react');
+jest.mock('@edx/frontend-platform/react', () => ({
+  ...jest.requireActual('@edx/frontend-platform/react'),
+  ErrorPage: () => 'ErrorPage',
+}));
 
 const loadData = jest.fn();
 reduxHooks.useLoadData.mockReturnValue(loadData);

src/components/NoticesWrapper/hooks.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from 'react-intl';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { StrictDict } from 'utils';
 import { getNotices } from './api';

src/components/NoticesWrapper/hooks.test.js

@@ -1,20 +1,30 @@
 import React from 'react';
 
-import { MockUseState } from 'testUtils';
+import { MockUseState, formatMessage } from 'testUtils';
 
 import { getConfig } from '@edx/frontend-platform';
 import { getNotices } from './api';
 import * as hooks from './hooks';
 
 jest.mock('@edx/frontend-platform', () => ({ getConfig: jest.fn() }));
 jest.mock('./api', () => ({ getNotices: jest.fn() }));
-const mockFormatMessage = jest.fn(message => message.defaultMessage || 'translated-string');
-jest.mock('react-intl', () => ({
-  useIntl: () => ({
-    formatMessage: mockFormatMessage,
-  }),
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useEffect: jest.fn((cb, prereqs) => ({ useEffect: { cb, prereqs } })),
+  useContext: jest.fn(context => context),
 }));
 
+jest.mock('@edx/frontend-platform/i18n', () => {
+  const { formatMessage: fn } = jest.requireActual('testUtils');
+  return {
+    ...jest.requireActual('@edx/frontend-platform/i18n'),
+    useIntl: () => ({
+      formatMessage: fn,
+    }),
+  };
+});
+
 getConfig.mockReturnValue({ ENABLE_NOTICES: true });
 const state = new MockUseState(hooks);
 
@@ -40,7 +50,7 @@ describe('NoticesWrapper hooks', () => {
           getConfig.mockReturnValueOnce({ ENABLE_NOTICES: false });
           hooks.useNoticesWrapperData();
           const [cb, prereqs] = React.useEffect.mock.calls[0];
-          expect(prereqs).toEqual([state.setState.isRedirected, mockFormatMessage]);
+          expect(prereqs).toEqual([state.setState.isRedirected, formatMessage]);
           cb();
           expect(getNotices).not.toHaveBeenCalled();
         });
@@ -49,7 +59,7 @@ describe('NoticesWrapper hooks', () => {
             hooks.useNoticesWrapperData();
             expect(React.useEffect).toHaveBeenCalled();
             const [cb, prereqs] = React.useEffect.mock.calls[0];
-            expect(prereqs).toEqual([state.setState.isRedirected, mockFormatMessage]);
+            expect(prereqs).toEqual([state.setState.isRedirected, formatMessage]);
             cb();
             expect(getNotices).toHaveBeenCalled();
             const { onLoad } = getNotices.mock.calls[0][0];
@@ -65,7 +75,7 @@ describe('NoticesWrapper hooks', () => {
             window.location = { replace: jest.fn(), href: 'test-old-href' };
             hooks.useNoticesWrapperData();
             const [cb, prereqs] = React.useEffect.mock.calls[0];
-            expect(prereqs).toEqual([state.setState.isRedirected, mockFormatMessage]);
+            expect(prereqs).toEqual([state.setState.isRedirected, formatMessage]);
             cb();
             expect(getNotices).toHaveBeenCalled();
             const { onLoad } = getNotices.mock.calls[0][0];

src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.test.js

@@ -1,6 +1,33 @@
 import { useWindowSize, breakpoints } from '@openedx/paragon';
 import useIsCollapsed from './hooks';
 
+jest.mock('@openedx/paragon', () => ({
+  ...jest.requireActual('@openedx/paragon'),
+  useWindowSize: jest.fn(),
+  breakpoints: {
+    extraSmall: {
+      minWidth: 0,
+      maxWidth: 575,
+    },
+    small: {
+      minWidth: 576,
+      maxWidth: 767,
+    },
+    medium: {
+      minWidth: 768,
+      maxWidth: 991,
+    },
+    large: {
+      minWidth: 992,
+      maxWidth: 1199,
+    },
+    extraLarge: {
+      minWidth: 1200,
+      maxWidth: 100000,
+    },
+  },
+}));
+
 describe('useIsCollapsed', () => {
   it('returns true only when it is between medium and small', () => {
     // make sure all three breakpoints gap is large enough for test

src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx

@@ -1,12 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { reduxHooks } from 'hooks';
 import track from 'tracking';
 import useActionDisabledState from '../hooks';
 import BeginCourseButton from './BeginCourseButton';
 
-jest.unmock('@openedx/paragon');
-
 jest.mock('tracking', () => ({
   course: {
     enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
@@ -33,46 +32,49 @@ reduxHooks.useTrackCourseEvent.mockImplementation(
   (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
 );
 
+const props = {
+  cardId: 'cardId',
+};
+
+const renderComponent = () => render(<IntlProvider locale="en"><BeginCourseButton {...props} /></IntlProvider>);
+
 describe('BeginCourseButton', () => {
-  const props = {
-    cardId: 'cardId',
-  };
   beforeEach(() => {
     jest.clearAllMocks();
   });
   describe('initiliaze hooks', () => {
     it('initializes course run data with cardId', () => {
-      render(<BeginCourseButton {...props} />);
+      renderComponent();
       expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
     });
     it('loads exec education path param', () => {
-      render(<BeginCourseButton {...props} />);
+      renderComponent();
       expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
     });
     it('loads disabled states for begin action from action hooks', () => {
-      render(<BeginCourseButton {...props} />);
+      renderComponent();
       expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
     });
   });
   describe('behavior', () => {
     describe('disabled', () => {
       it('should be disabled', () => {
         useActionDisabledState.mockReturnValueOnce({ disableBeginCourse: true });
-        render(<BeginCourseButton {...props} />);
+        renderComponent();
         const button = screen.getByRole('button', { name: 'Begin Course' });
         expect(button).toHaveClass('disabled');
         expect(button).toHaveAttribute('aria-disabled', 'true');
       });
     });
     describe('enabled', () => {
       it('should be enabled', () => {
-        render(<BeginCourseButton {...props} />);
+        renderComponent();
         const button = screen.getByRole('button', { name: 'Begin Course' });
         expect(button).not.toHaveClass('disabled');
         expect(button).not.toHaveAttribute('aria-disabled', 'true');
       });
       it('should track enter course clicked event on click, with exec ed param', async () => {
-        render(<BeginCourseButton {...props} />);
+        renderComponent();
         const user = userEvent.setup();
         const button = screen.getByRole('button', { name: 'Begin Course' });
         user.click(button);

src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { reduxHooks } from 'hooks';
 import track from 'tracking';
@@ -20,7 +21,7 @@ jest.mock('hooks', () => ({
   },
 }));
 jest.mock('../hooks', () => jest.fn(() => ({ disableResumeCourse: false })));
-jest.unmock('@openedx/paragon');
+
 jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
 
 const resumeUrl = 'resume-url';
@@ -36,7 +37,7 @@ describe('ResumeButton', () => {
     cardId: 'cardId',
   };
   describe('initialize hooks', () => {
-    beforeEach(() => render(<ResumeButton {...props} />));
+    beforeEach(() => render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>));
     it('initializes course run data with cardId', () => {
       expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
     });
@@ -53,22 +54,22 @@ describe('ResumeButton', () => {
         useActionDisabledState.mockReturnValueOnce({ disableResumeCourse: true });
       });
       it('should be disabled', () => {
-        render(<ResumeButton {...props} />);
+        render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>);
         const button = screen.getByRole('button', { name: 'Resume' });
         expect(button).toHaveClass('disabled');
         expect(button).toHaveAttribute('aria-disabled', 'true');
       });
     });
     describe('enabled', () => {
       it('should be enabled', () => {
-        render(<ResumeButton {...props} />);
+        render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>);
         const button = screen.getByRole('button', { name: 'Resume' });
         expect(button).toBeInTheDocument();
         expect(button).not.toHaveClass('disabled');
         expect(button).not.toHaveAttribute('aria-disabled', 'true');
       });
       it('should track enter course clicked event on click, with exec ed param', async () => {
-        render(<ResumeButton {...props} />);
+        render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>);
         const user = userEvent.setup();
         const button = screen.getByRole('button', { name: 'Resume' });
         user.click(button);

src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
@@ -13,27 +14,26 @@ jest.mock('hooks', () => ({
 }));
 jest.mock('../hooks', () => jest.fn(() => ({ disableSelectSession: false })));
 
-jest.unmock('@openedx/paragon');
 jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
 
 describe('SelectSessionButton', () => {
   const props = { cardId: 'cardId' };
   it('default render', () => {
-    render(<SelectSessionButton {...props} />);
+    render(<IntlProvider locale="en"><SelectSessionButton {...props} /></IntlProvider>);
     const button = screen.getByRole('button', { name: 'Select Session' });
     expect(button).toBeInTheDocument();
   });
   describe('if useActionDisabledState is false', () => {
     it('should disabled Select Session', () => {
       useActionDisabledState.mockReturnValueOnce({ disableSelectSession: true });
-      render(<SelectSessionButton {...props} />);
+      render(<IntlProvider locale="en"><SelectSessionButton {...props} /></IntlProvider>);
       const button = screen.getByRole('button', { name: 'Select Session' });
       expect(button).toBeDisabled();
     });
   });
   describe('on click', () => {
     it('should call openSessionModal', async () => {
-      render(<SelectSessionButton {...props} />);
+      render(<IntlProvider locale="en"><SelectSessionButton {...props} /></IntlProvider>);
       const user = userEvent.setup();
       const button = screen.getByRole('button', { name: 'Select Session' });
       await user.click(button);

src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import track from 'tracking';
 import { reduxHooks } from 'hooks';
@@ -20,22 +21,21 @@ jest.mock('hooks', () => ({
 }));
 jest.mock('../hooks', () => jest.fn(() => ({ disableViewCourse: false })));
 
-jest.unmock('@openedx/paragon');
 jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
 
 const defaultProps = { cardId: 'cardId' };
 const homeUrl = 'homeUrl';
 
 describe('ViewCourseButton', () => {
   it('learner can view course', async () => {
-    render(<ViewCourseButton {...defaultProps} />);
+    render(<IntlProvider locale="en"><ViewCourseButton {...defaultProps} /></IntlProvider>);
     const button = screen.getByRole('button', { name: 'View Course' });
     expect(button).toBeInTheDocument();
     expect(button).not.toHaveClass('disabled');
     expect(button).not.toHaveAttribute('aria-disabled', 'true');
   });
   it('calls trackCourseEvent on click', async () => {
-    render(<ViewCourseButton {...defaultProps} />);
+    render(<IntlProvider locale="en"><ViewCourseButton {...defaultProps} /></IntlProvider>);
     const user = userEvent.setup();
     const button = screen.getByRole('button', { name: 'View Course' });
     await user.click(button);
@@ -47,7 +47,7 @@ describe('ViewCourseButton', () => {
   });
   it('learner cannot view course', () => {
     useActionDisabledState.mockReturnValueOnce({ disableViewCourse: true });
-    render(<ViewCourseButton {...defaultProps} />);
+    render(<IntlProvider locale="en"><ViewCourseButton {...defaultProps} /></IntlProvider>);
     const button = screen.getByRole('button', { name: 'View Course' });
     expect(button).toHaveClass('disabled');
     expect(button).toHaveAttribute('aria-disabled', 'true');

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/hooks.test.js

@@ -4,6 +4,12 @@ import useCreditRequestFormData from './hooks';
 
 const requestData = 'test-request-data';
 
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn((val) => ({ current: val, useRef: true })),
+  useEffect: jest.fn((cb, prereqs) => ({ useEffect: { cb, prereqs } })),
+}));
+
 let out;
 const ref = {
   current: { click: jest.fn() },

src/containers/CourseCard/components/CourseCardDetails/hooks.test.js

@@ -20,6 +20,16 @@ jest.mock('hooks', () => ({
   },
 }));
 
+jest.mock('@edx/frontend-platform/i18n', () => {
+  const { formatMessage } = jest.requireActual('testUtils');
+  return {
+    ...jest.requireActual('@edx/frontend-platform/i18n'),
+    useIntl: () => ({
+      formatMessage,
+    }),
+  };
+});
+
 const cardId = 'my-test-card-id';
 const courseNumber = 'test-course-number';
 const useAccessMessage = 'test-access-message';