test: Remove unwanted mocks, unmocks and deprecate react-unit-test-utils package (#465)

* test: remove last snapshot

* test: remove unwanted mocks, remove unmocks, refactor renderWithIntl

* test: refactor renderWithIntl with small improvements

* test: remove react-unit-test-utils

* test: change fireEvent for userEvent

Author: diana-villalvazo-wgu

package-lock.json

@@ -76,7 +76,6 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.3.0",
-    "@edx/react-unit-test-utils": "^4.0.0",
     "@edx/reactifex": "^2.1.1",
     "@openedx/frontend-build": "^14.3.3",
     "@testing-library/jest-dom": "^6.6.3",

package.json

@@ -1,12 +1,8 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { screen } from '@testing-library/react';
 import { selectors } from 'data/redux';
+import { renderWithIntl } from './testUtils';
 import { App, mapStateToProps } from './App';
 
-jest.unmock('react');
-jest.unmock('@openedx/paragon');
-jest.unmock('@edx/frontend-platform/i18n');
-
 // we want to scope these tests to the App component, so we mock some child components to reduce complexity
 
 jest.mock('@edx/frontend-platform/auth', () => ({
@@ -39,12 +35,6 @@ jest.mock('data/redux', () => ({
   },
 }));
 
-const renderWithIntl = (component) => render(
-  <IntlProvider locale="en" messages={{}}>
-    {component}
-  </IntlProvider>,
-);
-
 describe('App component', () => {
   const defaultProps = {
     courseMetadata: {

src/App.test.jsx

@@ -2,9 +2,6 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ConfirmModal } from './ConfirmModal';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('ConfirmModal', () => {
   const props = {
     isOpen: false,
@@ -21,13 +18,13 @@ describe('ConfirmModal', () => {
   });
 
   it('should not render content when modal is closed', () => {
-    const { queryByText } = render(<ConfirmModal {...props} />);
-    expect(queryByText(props.content)).toBeNull();
+    render(<ConfirmModal {...props} />);
+    expect(screen.queryByText(props.content)).toBeNull();
   });
 
   it('should display content when modal is open', () => {
-    const { getByText } = render(<ConfirmModal {...props} isOpen />);
-    expect(getByText(props.content)).toBeInTheDocument();
+    render(<ConfirmModal {...props} isOpen />);
+    expect(screen.getByText(props.content)).toBeInTheDocument();
   });
 
   it('should call onCancel when cancel button is clicked', async () => {

src/__snapshots__/index.test.jsx.snap

@@ -1,33 +1,32 @@
-import { render, fireEvent } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithIntl } from '../../testUtils';
 
-import { formatMessage } from 'testUtils';
 import messages from './messages';
 import { DemoAlert } from '.';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('DemoAlert component', () => {
   const props = {
     isOpen: true,
     onClose: jest.fn().mockName('props.onClose'),
   };
 
   it('does not render when isOpen is false', () => {
-    const { queryByText } = render(<DemoAlert {...props} isOpen={false} />);
-    expect(queryByText(formatMessage(messages.title))).toBeNull();
+    renderWithIntl(<DemoAlert {...props} isOpen={false} />);
+    expect(screen.queryByText(messages.title.defaultMessage)).toBeNull();
   });
 
   it('renders with correct title and message when isOpen is true', () => {
-    const { getByText } = render(<DemoAlert {...props} />);
-    expect(getByText(formatMessage(messages.title))).toBeInTheDocument();
-    expect(getByText(formatMessage(messages.warningMessage))).toBeInTheDocument();
+    renderWithIntl(<DemoAlert {...props} />);
+    expect(screen.getByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.warningMessage.defaultMessage)).toBeInTheDocument();
   });
 
-  it('calls onClose when confirmation button is clicked', () => {
-    const { getByText } = render(<DemoAlert {...props} />);
-    const confirmButton = getByText(formatMessage(messages.confirm));
-    fireEvent.click(confirmButton);
+  it('calls onClose when confirmation button is clicked', async () => {
+    renderWithIntl(<DemoAlert {...props} />);
+    const user = userEvent.setup();
+    const confirmButton = screen.getByText(messages.confirm.defaultMessage);
+    await user.click(confirmButton);
     expect(props.onClose).toHaveBeenCalled();
   });
 });

src/components/ConfirmModal.test.jsx

@@ -1,11 +1,10 @@
-import { render } from '@testing-library/react';
-
+import { screen } from '@testing-library/react';
 import filesize from 'filesize';
+import { renderWithIntl } from '../../testUtils';
+
 import FilePopoverContent from '.';
 
 jest.mock('filesize', () => (size) => `filesize(${size})`);
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
 
 describe('FilePopoverContent', () => {
   describe('component', () => {
@@ -18,23 +17,23 @@ describe('FilePopoverContent', () => {
 
     describe('behavior', () => {
       it('renders file name correctly', () => {
-        const { getByText } = render(<FilePopoverContent {...props} />);
-        expect(getByText(props.name)).toBeInTheDocument();
+        renderWithIntl(<FilePopoverContent {...props} />);
+        expect(screen.getByText(props.name)).toBeInTheDocument();
       });
 
       it('renders file description correctly', () => {
-        const { getByText } = render(<FilePopoverContent {...props} />);
-        expect(getByText(props.description)).toBeInTheDocument();
+        renderWithIntl(<FilePopoverContent {...props} />);
+        expect(screen.getByText(props.description)).toBeInTheDocument();
       });
 
       it('renders file size correctly', () => {
-        const { getByText } = render(<FilePopoverContent {...props} />);
-        expect(getByText(filesize(props.size))).toBeInTheDocument();
+        renderWithIntl(<FilePopoverContent {...props} />);
+        expect(screen.getByText(filesize(props.size))).toBeInTheDocument();
       });
 
       it('renders "Unknown" when size is null', () => {
-        const { getByText } = render(<FilePopoverContent {...props} size={null} />);
-        expect(getByText('Unknown')).toBeInTheDocument();
+        renderWithIntl(<FilePopoverContent {...props} size={null} />);
+        expect(screen.getByText('Unknown')).toBeInTheDocument();
       });
     });
   });

src/components/DemoAlert/index.test.jsx

@@ -1,10 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { renderWithIntl } from '../../../testUtils';
 import ErrorBanner from './ErrorBanner';
 import messages from '../messages';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('Error Banner component', () => {
   const children = <p>Abitary Child</p>;
 
@@ -27,25 +25,25 @@ describe('Error Banner component', () => {
 
   describe('behavior', () => {
     it('renders children content', () => {
-      render(<ErrorBanner {...props} />);
+      renderWithIntl(<ErrorBanner {...props} />);
       const childText = screen.getByText('Abitary Child');
       expect(childText).toBeInTheDocument();
     });
 
     it('renders the correct number of action buttons', () => {
-      render(<ErrorBanner {...props} />);
-      const buttons = screen.getAllByText('FormattedMessage');
-      expect(buttons).toHaveLength(3);
+      renderWithIntl(<ErrorBanner {...props} />);
+      const buttons = screen.getAllByText(messages.retryButton.defaultMessage);
+      expect(buttons).toHaveLength(2);
     });
 
     it('renders error heading with correct message', () => {
-      render(<ErrorBanner {...props} />);
-      const heading = screen.getAllByText('FormattedMessage')[0];
+      renderWithIntl(<ErrorBanner {...props} />);
+      const heading = screen.getAllByText(messages.unknownError.defaultMessage)[0];
       expect(heading).toBeInTheDocument();
     });
 
     it('renders with danger variant', () => {
-      render(<ErrorBanner {...props} />);
+      renderWithIntl(<ErrorBanner {...props} />);
       const alert = screen.getByRole('alert');
       expect(alert).toHaveClass('alert-danger');
     });

src/components/FilePopoverContent/index.test.jsx

@@ -1,9 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import LoadingBanner from './LoadingBanner';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('Loading Banner component', () => {
   describe('behavior', () => {
     it('renders an info alert', () => {

src/components/FilePreview/Banners/ErrorBanner.test.jsx

@@ -3,9 +3,6 @@ import { render, screen } from '@testing-library/react';
 
 import ImageRenderer from './ImageRenderer';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 describe('Image Renderer Component', () => {
   const props = {
     url: 'some_url.jpg',