test: Remove react-unit-test-utils

Author: diana-villalvazo-wgu

package-lock.json

@@ -22,7 +22,6 @@
     "i18n_extract": "openedx formatjs extract",
     "lint": "openedx lint .",
     "lint:fix": "openedx lint --fix .",
-    "snapshot": "openedx test --updateSnapshot",
     "test": "openedx test --coverage --passWithNoTests"
   },
   "author": "Open edX",
@@ -37,7 +36,6 @@
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
     "@edx/openedx-atlas": "^0.7.0",
-    "@edx/react-unit-test-utils": "^4.0.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
@@ -59,6 +57,7 @@
     "@edx/browserslist-config": "^1.5.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

package.json

@@ -1,27 +1,27 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import Banner from './Banner';
 
-import { Alert } from '@openedx/paragon';
+describe('Banner component', () => {
+  it('renders children content', () => {
+    render(<Banner>Test content</Banner>);
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+  });
 
-import Banner from './Banner';
+  it('uses default props correctly', () => {
+    render(<Banner>Test content</Banner>);
+    const banner = screen.getByRole('alert');
+    expect(banner).toHaveClass('mb-0');
+  });
 
-describe('Banner', () => {
-  const props = {
-    children: 'Hello, world!',
-  };
-  describe('snapshot', () => {
-    test('renders default banner', () => {
-      const wrapper = shallow(<Banner {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('renders with variants', () => {
-      const wrapper = shallow(<Banner {...props} variant="success" />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+  it('accepts custom variant prop', () => {
+    render(<Banner variant="success">Test content</Banner>);
+    const banner = screen.getByRole('alert');
+    expect(banner).toHaveClass('alert-success');
+  });
 
-      expect(wrapper.instance.findByType(Alert)[0].props.variant).toEqual('success');
-    });
-    test('renders with custom class', () => {
-      const wrapper = shallow(<Banner {...props} className="custom-class" />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
+  it('accepts custom className prop', () => {
+    render(<Banner className="custom-class">Test content</Banner>);
+    const banner = screen.getByRole('alert');
+    expect(banner).toHaveClass('custom-class');
   });
 });

src/__snapshots__/App.test.jsx.snap

@@ -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