test: deprecate react-unit-test-utils part-1

src/components/ConfirmModal.test.jsx

@@ -1,7 +1,9 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render } from '@testing-library/react';
 import { ConfirmModal } from './ConfirmModal';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 describe('ConfirmModal', () => {
   const props = {
     isOpen: false,
@@ -12,10 +14,12 @@ describe('ConfirmModal', () => {
     onCancel: jest.fn().mockName('this.props.onCancel'),
     onConfirm: jest.fn().mockName('this.props.onConfirm'),
   };
-  test('snapshot: closed', () => {
-    expect(shallow(<ConfirmModal {...props} />).snapshot).toMatchSnapshot();
+  it('should not render content when modal is closed', () => {
+    const { queryByText } = render(<ConfirmModal {...props} />);
+    expect(queryByText(props.content)).toBeNull();
   });
-  test('snapshot: open', () => {
-    expect(shallow(<ConfirmModal {...props} isOpen />).snapshot).toMatchSnapshot();
+  it('should display content when modal is open', () => {
+    const { getByText } = render(<ConfirmModal {...props} isOpen />);
+    expect(getByText(props.content)).toBeInTheDocument();
   });
 });

src/components/DemoAlert/index.test.jsx

@@ -1,16 +1,34 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, fireEvent } from '@testing-library/react';
 
 import { formatMessage } from 'testUtils';
+import messages from './messages';
 import { DemoAlert } from '.';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 describe('DemoAlert component', () => {
-  test('snapshot', () => {
-    const props = {
-      intl: { formatMessage },
-      isOpen: true,
-      onClose: jest.fn().mockName('props.onClose'),
-    };
-    expect(shallow(<DemoAlert {...props} />).snapshot).toMatchSnapshot();
+  const props = {
+    intl: { formatMessage },
+    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();
+  });
+
+  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();
+  });
+
+  it('calls onClose when confirmation button is clicked', () => {
+    const { getByText } = render(<DemoAlert {...props} />);
+    const confirmButton = getByText(formatMessage(messages.confirm));
+    fireEvent.click(confirmButton);
+    expect(props.onClose).toHaveBeenCalled();
   });
 });

src/components/FilePopoverContent/index.test.jsx

@@ -1,10 +1,11 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render } from '@testing-library/react';
 
 import filesize from 'filesize';
 import FilePopoverContent from '.';
 
 jest.mock('filesize', () => (size) => `filesize(${size})`);
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
 
 describe('FilePopoverContent', () => {
   describe('component', () => {
@@ -14,24 +15,26 @@ describe('FilePopoverContent', () => {
       downloadURL: 'this-url-is.working',
       size: 6000,
     };
-    let el;
-    beforeEach(() => {
-      el = shallow(<FilePopoverContent {...props} />);
-    });
-    describe('snapshot', () => {
-      test('default', () => expect(el.snapshot).toMatchSnapshot());
-      test('invalid size', () => {
-        el = shallow(<FilePopoverContent {...props} size={null} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
-    });
 
     describe('behavior', () => {
-      test('content', () => {
-        const childElements = el.instance.children;
-        expect(childElements[0].children[2].el).toContain(props.name);
-        expect(childElements[1].children[2].el).toContain(props.description);
-        expect(childElements[2].children[2].el).toContain(filesize(props.size));
+      it('renders file name correctly', () => {
+        const { getByText } = render(<FilePopoverContent {...props} />);
+        expect(getByText(props.name)).toBeInTheDocument();
+      });
+
+      it('renders file description correctly', () => {
+        const { getByText } = render(<FilePopoverContent {...props} />);
+        expect(getByText(props.description)).toBeInTheDocument();
+      });
+
+      it('renders file size correctly', () => {
+        const { getByText } = render(<FilePopoverContent {...props} />);
+        expect(getByText(filesize(props.size))).toBeInTheDocument();
+      });
+
+      it('renders "Unknown" when size is null', () => {
+        const { getByText } = render(<FilePopoverContent {...props} size={null} />);
+        expect(getByText('Unknown')).toBeInTheDocument();
       });
     });
   });

src/components/FilePreview/FileCard.test.jsx

@@ -1,14 +1,10 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { Collapsible } from '@openedx/paragon';
-
-import FilePopoverContent from 'components/FilePopoverContent';
-import FileInfo from './FileInfo';
+import { render, screen } from '@testing-library/react';
 import FileCard from './FileCard';
 
 jest.mock('components/FilePopoverContent', () => 'FilePopoverContent');
 jest.mock('./FileInfo', () => 'FileInfo');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
 
 describe('File Preview Card component', () => {
   const props = {
@@ -19,24 +15,27 @@ describe('File Preview Card component', () => {
     },
   };
   const children = (<h1>some children</h1>);
-  let el;
-  beforeEach(() => {
-    el = shallow(<FileCard {...props}>{children}</FileCard>);
-  });
-  test('snapshot', () => {
-    expect(el.snapshot).toMatchSnapshot();
-  });
+
   describe('Component', () => {
-    test('collapsible title is name header', () => {
-      const { title } = el.instance.findByType(Collapsible)[0].props;
-      expect(title).toEqual(<h3 className="file-card-title">{props.file.name}</h3>);
+    it('renders with the file name in the title', () => {
+      render(<FileCard {...props}>{children}</FileCard>);
+      expect(screen.getByText(props.file.name)).toBeInTheDocument();
+      expect(screen.getByText(props.file.name)).toHaveClass('file-card-title');
+    });
+
+    it('renders the preview panel with file info', () => {
+      render(<FileCard {...props}>{children}</FileCard>);
+      const previewPanel = screen.getByTestId('preview-panel');
+      expect(previewPanel).toBeInTheDocument();
+      expect(document.querySelector('FileInfo')).toBeInTheDocument();
+      expect(document.querySelector('FilePopoverContent')).toBeInTheDocument();
     });
-    test('forwards children into preview-panel', () => {
-      const previewPanelChildren = el.instance.findByTestId('preview-panel')[0].children;
-      expect(previewPanelChildren[0].matches(
-        <FileInfo><FilePopoverContent file={props.file} /></FileInfo>,
-      ));
-      expect(previewPanelChildren[1].matches(shallow(children))).toEqual(true);
+
+    it('renders children in the preview panel', () => {
+      render(<FileCard {...props}>{children}</FileCard>);
+      const previewPanel = screen.getByTestId('preview-panel');
+      expect(previewPanel).toBeInTheDocument();
+      expect(screen.getByText('some children')).toBeInTheDocument();
     });
   });
 });