test: Deprecate react-unit-test-utils 6/9 (#494)

* test: deprecate shallow

* test: remove debug

src/components/GradesView/EditModal/OverrideTable/ReasonInput/__snapshots__/index.test.jsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ReasonInput component render snapshot 1`] = `
-<Form.Control
-  data-testid="reason-input-control"
-  name="reasonForChange"
-  onChange={[MockFunction hook.onChange]}
-  type="text"
-  value="test-value"
-/>
-`;

src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.test.jsx

@@ -1,37 +1,34 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { Form } from '@openedx/paragon';
+import { render, screen } from '@testing-library/react';
 
 import useReasonInputData from './hooks';
 import ReasonInput from '.';
 
 jest.mock('./hooks', () => jest.fn());
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 const hookProps = {
-  ref: 'reason-input-ref',
+  ref: jest.fn().mockName('hook.ref'),
   onChange: jest.fn().mockName('hook.onChange'),
   value: 'test-value',
 };
 useReasonInputData.mockReturnValue(hookProps);
 
-let el;
 describe('ReasonInput component', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    el = shallow(<ReasonInput />);
+    render(<ReasonInput />);
   });
   describe('behavior', () => {
     it('initializes hook data', () => {
       expect(useReasonInputData).toHaveBeenCalled();
     });
   });
-  describe('render', () => {
-    test('snapshot', () => {
-      expect(el.snapshot).toMatchSnapshot();
-      const control = el.instance.findByType(Form.Control)[0];
-      expect(control.props.value).toEqual(hookProps.value);
-      expect(control.props.onChange).toEqual(hookProps.onChange);
+  describe('renders', () => {
+    it('input correctly', () => {
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+      expect(screen.getByRole('textbox')).toHaveValue(hookProps.value);
     });
   });
 });

src/components/GradesView/EditModal/OverrideTable/__snapshots__/index.test.jsx.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`OverrideTable component render snapshot 1`] = `
-<DataTable
-  columns="test-columns"
-  data={
-    [
-      {
-        "test": "data",
-      },
-      {
-        "andOther": "test-data",
-      },
-      {
-        "adjustedGrade": <AdjustedGradeInput />,
-        "date": {
-          "formatted": 2000-01-01T00:00:00.000Z,
-        },
-        "reason": <ReasonInput />,
-      },
-    ]
-  }
-  itemCount={3}
-/>
-`;

src/components/GradesView/EditModal/OverrideTable/index.test.jsx

@@ -1,65 +1,65 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import { DataTable } from '@openedx/paragon';
-
-import { formatDateForDisplay } from 'utils';
-
-import AdjustedGradeInput from './AdjustedGradeInput';
-import ReasonInput from './ReasonInput';
 import useOverrideTableData from './hooks';
 import OverrideTable from '.';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('utils', () => ({
+  ...jest.requireActual('utils'),
   formatDateForDisplay: (date) => ({ formatted: date }),
 }));
 jest.mock('./hooks', () => jest.fn());
-jest.mock('./AdjustedGradeInput', () => 'AdjustedGradeInput');
-jest.mock('./ReasonInput', () => 'ReasonInput');
 
 const hookProps = {
   hide: false,
   data: [
-    { test: 'data' },
-    { andOther: 'test-data' },
+    { filename: 'data' },
+    { resultsSummary: 'test-data' },
   ],
-  columns: 'test-columns',
+  columns: [{
+    Header: 'Gradebook',
+    accessor: 'filename',
+  },
+  {
+    Header: 'Download Summary',
+    accessor: 'resultsSummary',
+  }],
 };
-useOverrideTableData.mockReturnValue(hookProps);
 
-let el;
 describe('OverrideTable component', () => {
   beforeEach(() => {
     jest
       .clearAllMocks()
       .useFakeTimers('modern')
       .setSystemTime(new Date('2000-01-01').getTime());
-    el = shallow(<OverrideTable />);
   });
-  describe('behavior', () => {
+  describe('hooks', () => {
     it('initializes hook data', () => {
+      useOverrideTableData.mockReturnValue(hookProps);
+      render(<IntlProvider locale="en"><OverrideTable /></IntlProvider>);
       expect(useOverrideTableData).toHaveBeenCalled();
     });
   });
-  describe('render', () => {
-    test('null render if hide', () => {
-      useOverrideTableData.mockReturnValueOnce({ ...hookProps, hide: true });
-      el = shallow(<OverrideTable />);
-      expect(el.isEmptyRender()).toEqual(true);
+  describe('behavior', () => {
+    it('null render if hide', () => {
+      useOverrideTableData.mockReturnValue({ ...hookProps, hide: true });
+      render(<IntlProvider locale="en"><OverrideTable /></IntlProvider>);
+      expect(screen.queryByRole('table')).toBeNull();
     });
-    test('snapshot', () => {
-      expect(el.snapshot).toMatchSnapshot();
-      const table = el.instance.findByType(DataTable)[0];
-      expect(table.props.columns).toEqual(hookProps.columns);
-      const data = [...table.props.data];
-      const inputRow = data.pop();
-      const formattedDate = formatDateForDisplay(new Date());
-      expect(data).toEqual(hookProps.data);
-      expect(inputRow).toMatchObject({
-        adjustedGrade: <AdjustedGradeInput />,
-        date: formattedDate,
-        reason: <ReasonInput />,
-      });
+    it('renders table with correct data', () => {
+      useOverrideTableData.mockReturnValue(hookProps);
+      render(<IntlProvider locale="en"><OverrideTable /></IntlProvider>);
+      const table = screen.getByRole('table');
+      expect(table).toBeInTheDocument();
+      expect(screen.getByText(hookProps.columns[0].Header)).toBeInTheDocument();
+      expect(screen.getByText(hookProps.columns[1].Header)).toBeInTheDocument();
+      expect(screen.getByText(hookProps.data[0].filename)).toBeInTheDocument();
+      expect(screen.getByText(hookProps.data[1].resultsSummary)).toBeInTheDocument();
     });
   });
 });

src/components/GradesView/EditModal/__snapshots__/index.test.jsx.snap

@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditModal component render with error snapshot 1`] = `
-<ModalDialog
-  hasCloseButton={true}
-  isFullscreenOnMobile={true}
-  isOpen="test-is-open"
-  onClose={[MockFunction hooks.onClose]}
-  size="xl"
-  title="Edit Grades"
->
-  <ModalDialog.Body>
-    <div>
-      <ModalHeaders />
-      <Alert
-        dismissible={false}
-        show={true}
-        variant="danger"
-      >
-        test-error
-      </Alert>
-      <OverrideTable />
-      <div>
-        Showing most recent actions (max 5). To see more, please contact support
-      </div>
-      <div>
-        Note: Once you save, your changes will be visible to students.
-      </div>
-    </div>
-  </ModalDialog.Body>
-  <ModalDialog.Footer>
-    <ActionRow>
-      <ModalDialog.CloseButton
-        variant="tertiary"
-      >
-        Cancel
-      </ModalDialog.CloseButton>
-      <Button
-        onClick={[MockFunction hooks.handleAdjustedGradeClick]}
-        variant="primary"
-      >
-        Save Grades
-      </Button>
-    </ActionRow>
-  </ModalDialog.Footer>
-</ModalDialog>
-`;
-
-exports[`EditModal component render without error snapshot 1`] = `
-<ModalDialog
-  hasCloseButton={true}
-  isFullscreenOnMobile={true}
-  isOpen="test-is-open"
-  onClose={[MockFunction hooks.onClose]}
-  size="xl"
-  title="Edit Grades"
->
-  <ModalDialog.Body>
-    <div>
-      <ModalHeaders />
-      <Alert
-        dismissible={false}
-        show={false}
-        variant="danger"
-      />
-      <OverrideTable />
-      <div>
-        Showing most recent actions (max 5). To see more, please contact support
-      </div>
-      <div>
-        Note: Once you save, your changes will be visible to students.
-      </div>
-    </div>
-  </ModalDialog.Body>
-  <ModalDialog.Footer>
-    <ActionRow>
-      <ModalDialog.CloseButton
-        variant="tertiary"
-      >
-        Cancel
-      </ModalDialog.CloseButton>
-      <Button
-        onClick={[MockFunction hooks.handleAdjustedGradeClick]}
-        variant="primary"
-      >
-        Save Grades
-      </Button>
-    </ActionRow>
-  </ModalDialog.Footer>
-</ModalDialog>
-`;

src/components/GradesView/EditModal/index.test.jsx

@@ -1,126 +1,106 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import {
-  ActionRow,
-  ModalDialog,
-} from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
-
-import { formatMessage } from 'testUtils';
-
-import ModalHeaders from './ModalHeaders';
-import OverrideTable from './OverrideTable';
 import useEditModalData from './hooks';
 import EditModal from '.';
 import messages from './messages';
 
 jest.mock('./hooks', () => jest.fn());
-jest.mock('./ModalHeaders', () => 'ModalHeaders');
-jest.mock('./OverrideTable', () => 'OverrideTable');
+jest.mock('./ModalHeaders', () => jest.fn(() => <div>ModalHeaders</div>));
+jest.mock('./OverrideTable', () => jest.fn(() => <div>OverrideTable</div>));
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
 
 const hookProps = {
   onClose: jest.fn().mockName('hooks.onClose'),
   error: 'test-error',
   handleAdjustedGradeClick: jest.fn().mockName('hooks.handleAdjustedGradeClick'),
-  isOpen: 'test-is-open',
+  isOpen: true,
 };
-useEditModalData.mockReturnValue(hookProps);
 
-let el;
 describe('EditModal component', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    el = shallow(<EditModal />);
   });
   describe('behavior', () => {
-    it('initializes intl hook', () => {
-      expect(useIntl).toHaveBeenCalled();
-    });
     it('initializes component hooks', () => {
+      useEditModalData.mockReturnValue(hookProps);
+      render(<IntlProvider locale="en"><EditModal /></IntlProvider>);
       expect(useEditModalData).toHaveBeenCalled();
     });
   });
-  describe('render', () => {
-    test('modal props', () => {
-      const modalProps = el.instance.findByType(ModalDialog)[0].props;
-      expect(modalProps.title).toEqual(formatMessage(messages.title));
-      expect(modalProps.isOpen).toEqual(hookProps.isOpen);
-      expect(modalProps.onClose).toEqual(hookProps.onClose);
-    });
-    const loadBody = () => {
-      const body = el.instance.findByType(ModalDialog)[0].children[0];
-      const { children } = body.children[0];
-      return { body, children };
+  describe('renders', () => {
+    const testModal = () => {
+      it('modal properly', () => {
+        const modal = screen.getByRole('dialog', { title: messages.title.defaultMessage });
+        expect(modal).toBeInTheDocument();
+      });
+      it('triggers onClose when closed', async () => {
+        const user = userEvent.setup();
+        const closeButton = screen.getByRole('button', { name: messages.closeText.defaultMessage });
+        await user.click(closeButton);
+        expect(hookProps.onClose).toHaveBeenCalled();
+      });
     };
     const testBody = () => {
-      test('type', () => {
-        const { body } = loadBody();
-        expect(body.type).toEqual('ModalDialog.Body');
+      it('headers row', () => {
+        const headers = screen.getByText('ModalHeaders');
+        expect(headers).toBeInTheDocument();
       });
-      test('headers row', () => {
-        const { children } = loadBody();
-        expect(children[0]).toMatchObject(shallow(<ModalHeaders />));
+      it('table row', () => {
+        const table = screen.getByText('OverrideTable');
+        expect(table).toBeInTheDocument();
       });
-      test('table row', () => {
-        const { children } = loadBody();
-        expect(children[2]).toMatchObject(shallow(<OverrideTable />));
-      });
-      test('messages', () => {
-        const { children } = loadBody();
-        expect(children[3].children[0].el).toEqual(formatMessage(messages.visibility));
-        expect(children[4].children[0].el).toEqual(formatMessage(messages.saveVisibility));
+      it('messages', () => {
+        const visibilityMessage = screen.getByText(messages.visibility.defaultMessage);
+        const saveVisibilityMessage = screen.getByText(messages.saveVisibility.defaultMessage);
+        expect(visibilityMessage).toBeInTheDocument();
+        expect(saveVisibilityMessage).toBeInTheDocument();
       });
     };
     const testFooter = () => {
-      let footer;
-      beforeEach(() => {
-        footer = el.instance.findByType(ModalDialog)[0].children;
+      it('adjusted grade button', async () => {
+        const user = userEvent.setup();
+        const saveGradeButton = screen.getByRole('button', { name: messages.saveGrade.defaultMessage });
+        expect(saveGradeButton).toBeInTheDocument();
+        await user.click(saveGradeButton);
+        expect(hookProps.handleAdjustedGradeClick).toHaveBeenCalled();
       });
-      test('type', () => {
-        expect(footer[1].type).toEqual('ModalDialog.Footer');
-      });
-      test('contains action row', () => {
-        expect(footer[1].children[0].type).toEqual('ActionRow');
-      });
-      test('close button', () => {
-        const button = footer[1].findByType(ActionRow)[0].children[0];
-        expect(button.children[0].el).toEqual(formatMessage(messages.closeText));
-        expect(button.type).toEqual('ModalDialog.CloseButton');
-      });
-      test('adjusted grade button', () => {
-        const button = footer[1].findByType(ActionRow)[0].children[1];
-        expect(button.children[0].el).toEqual(formatMessage(messages.saveGrade));
-        expect(button.type).toEqual('Button');
-        expect(button.props.onClick).toEqual(hookProps.handleAdjustedGradeClick);
+      it('close button', async () => {
+        const user = userEvent.setup();
+        const cancelButton = screen.getByRole('button', { name: messages.closeText.defaultMessage });
+        expect(cancelButton).toBeInTheDocument();
+        await user.click(cancelButton);
+        expect(hookProps.onClose).toHaveBeenCalled();
       });
     };
     describe('without error', () => {
       beforeEach(() => {
         useEditModalData.mockReturnValueOnce({ ...hookProps, error: undefined });
-        el = shallow(<EditModal />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
+        render(<IntlProvider locale="en"><EditModal /></IntlProvider>);
       });
+      testModal();
       testBody();
       testFooter();
       test('alert row', () => {
-        const alert = loadBody().children[1];
-        expect(alert.type).toEqual('Alert');
-        expect(alert.props.show).toEqual(false);
+        const alert = screen.queryByRole('alert');
+        expect(alert).toBeNull();
       });
     });
     describe('with error', () => {
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
+      beforeEach(() => {
+        useEditModalData.mockReturnValue(hookProps);
+        render(<IntlProvider locale="en"><EditModal /></IntlProvider>);
       });
+      testModal();
       testBody();
       test('alert row', () => {
-        const alert = loadBody().children[1];
-        expect(alert.type).toEqual('Alert');
-        expect(alert.props.show).toEqual(true);
-        expect(alert.children[0].el).toEqual(hookProps.error);
+        const alert = screen.getByRole('alert');
+        expect(alert).toBeInTheDocument();
+        expect(alert).toHaveTextContent(hookProps.error);
       });
       testFooter();
     });

src/components/GradesView/FilterBadges/FilterBadge.test.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { formatMessage } from 'testUtils';
-import { Button } from '@openedx/paragon';
 import { selectors } from 'data/redux/hooks';
+import userEvent from '@testing-library/user-event';
 import FilterBadge from './FilterBadge';
 
 jest.mock('@openedx/paragon', () => ({
@@ -18,7 +18,10 @@ jest.mock('data/redux/hooks', () => ({
   },
 }));
 
-const handleClose = jest.fn(filters => ({ handleClose: filters }));
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
+const handleClose = jest.fn();
 const filterName = 'test-filter-name';
 
 const hookProps = {
@@ -32,12 +35,11 @@ const hookProps = {
 };
 selectors.root.useFilterBadgeConfig.mockReturnValue(hookProps);
 
-let el;
 describe('FilterBadge', () => {
-  beforeEach(() => {
-    el = shallow(<FilterBadge {...{ handleClose, filterName }} />);
-  });
-  describe('behavior', () => {
+  describe('hooks', () => {
+    beforeEach(() => {
+      render(<FilterBadge {...{ handleClose, filterName }} />);
+    });
     it('initializes intl hook', () => {
       expect(useIntl).toHaveBeenCalled();
     });
@@ -46,49 +48,42 @@ describe('FilterBadge', () => {
     });
   });
   describe('render', () => {
-    const testDisplayName = () => {
-      test('formatted display name appears on badge', () => {
-        expect(el.instance.findByTestId('display-name')[0].children[0].el).toEqual(formatMessage(hookProps.displayName));
-      });
-    };
-    const testCloseButton = () => {
-      test('close button forwards close method', () => {
-        expect(el.instance.findByType(Button)[0].props.onClick).toEqual(handleClose(hookProps.connectedFilters));
-      });
-    };
-    test('empty render if isDefault', () => {
+    it('empty render if isDefault', () => {
       selectors.root.useFilterBadgeConfig.mockReturnValueOnce({
         ...hookProps,
         isDefault: true,
       });
-      el = shallow(<FilterBadge {...{ handleClose, filterName }} />);
-      expect(el.isEmptyRender()).toEqual(true);
+      render(<FilterBadge {...{ handleClose, filterName }} />);
+      expect(screen.queryByText(hookProps.displayName)).toBeNull();
     });
     describe('hide Value', () => {
-      beforeEach(() => {
+      it('renders display name, value is not shown and close button has correct behavior', async () => {
         selectors.root.useFilterBadgeConfig.mockReturnValueOnce({
           ...hookProps,
           hideValue: true,
         });
-        el = shallow(<FilterBadge {...{ handleClose, filterName }} />);
-      });
-      testDisplayName();
-      testCloseButton();
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      test('value is note present in the badge', () => {
-        expect(el.instance.findByTestId('filter-value')[0].children).toHaveLength(0);
+        render(<FilterBadge {...{ handleClose, filterName }} />);
+        const user = userEvent.setup();
+        expect(screen.getByTestId('display-name')).toHaveTextContent(formatMessage(hookProps.displayName));
+        expect(screen.queryByTestId('filter-value')).toHaveTextContent('');
+        const button = screen.getByRole('button', { name: /close/i });
+        await user.click(button);
+        expect(handleClose).toHaveBeenCalledWith(hookProps.connectedFilters);
       });
     });
     describe('do not hide value', () => {
-      testDisplayName();
-      testCloseButton();
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      test('value is present in the badge', () => {
-        expect(el.instance.findByTestId('filter-value')[0].children[0].el).toBe(`: ${hookProps.value}`);
+      it('renders display name and value, and close button has correct behavior', async () => {
+        selectors.root.useFilterBadgeConfig.mockReturnValueOnce({
+          ...hookProps,
+          hideValue: false,
+        });
+        render(<FilterBadge {...{ handleClose, filterName }} />);
+        const user = userEvent.setup();
+        expect(screen.getByTestId('display-name')).toHaveTextContent(formatMessage(hookProps.displayName));
+        expect(screen.getByTestId('filter-value')).toHaveTextContent(`: ${hookProps.value}`);
+        const button = screen.getByRole('button', { name: /close/i });
+        await user.click(button);
+        expect(handleClose).toHaveBeenCalledWith(hookProps.connectedFilters);
       });
     });
   });

src/components/GradesView/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap

@@ -1,75 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FilterBadge render do not hide value snapshot 1`] = `
-<div>
-  <span
-    className="badge badge-info"
-  >
-    <span
-      data-testid="display-name"
-    >
-      a common name
-    </span>
-    <span
-      data-testid="filter-value"
-    >
-      : a common value
-    </span>
-    <Button
-      aria-label="close"
-      className="btn-info"
-      onClick={
-        {
-          "handleClose": [
-            "some",
-            "filters",
-          ],
-        }
-      }
-    >
-      <span
-        aria-hidden="true"
-      >
-        ×
-      </span>
-    </Button>
-  </span>
-  <br />
-</div>
-`;
-
-exports[`FilterBadge render hide Value snapshot 1`] = `
-<div>
-  <span
-    className="badge badge-info"
-  >
-    <span
-      data-testid="display-name"
-    >
-      a common name
-    </span>
-    <span
-      data-testid="filter-value"
-    />
-    <Button
-      aria-label="close"
-      className="btn-info"
-      onClick={
-        {
-          "handleClose": [
-            "some",
-            "filters",
-          ],
-        }
-      }
-    >
-      <span
-        aria-hidden="true"
-      >
-        ×
-      </span>
-    </Button>
-  </span>
-  <br />
-</div>
-`;

src/components/GradesView/FilterBadges/__snapshots__/test.jsx.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FilterBadges component snapshot - has a filterbadge with handleClose for each filter in badgeOrder 1`] = `
-<div>
-  <FilterBadge
-    filterName="filter1"
-    handleClose={[MockFunction this.props.handleClose]}
-    key="filter1"
-  />
-  <FilterBadge
-    filterName="filter2"
-    handleClose={[MockFunction this.props.handleClose]}
-    key="filter2"
-  />
-  <FilterBadge
-    filterName="filter3"
-    handleClose={[MockFunction this.props.handleClose]}
-    key="filter3"
-  />
-</div>
-`;

src/components/GradesView/FilterBadges/test.jsx

@@ -1,11 +1,13 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable import/no-named-as-default */
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import FilterBadges from '.';
-import FilterBadge from './FilterBadge';
 
-jest.mock('./FilterBadge', () => 'FilterBadge');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
 
 const order = ['filter1', 'filter2', 'filter3'];
 jest.mock('data/constants/filters', () => ({
@@ -13,24 +15,24 @@ jest.mock('data/constants/filters', () => ({
   badgeOrder: order,
 }));
 
+// eslint-disable-next-line react/button-has-type
+jest.mock('./FilterBadge', () => jest.fn(({ filterName, handleClose }) => <button onClick={handleClose}>{filterName}</button>));
+
+const handleClose = jest.fn();
+
 describe('FilterBadges', () => {
   describe('component', () => {
-    let el;
-    let handleClose;
-    beforeEach(() => {
-      handleClose = jest.fn().mockName('this.props.handleClose');
-      el = shallow(<FilterBadges handleClose={handleClose} />);
-    });
-    test('snapshot - has a filterbadge with handleClose for each filter in badgeOrder', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-    test('has a filterbadge with handleClose for each filter in badgeOrder', () => {
-      const badgeProps = el.instance.findByType(FilterBadge).map(badgeEl => badgeEl.props);
-      // key prop is not rendered by react
-      expect(badgeProps[0]).toMatchObject({ filterName: order[0], handleClose });
-      expect(badgeProps[1]).toMatchObject({ filterName: order[1], handleClose });
-      expect(badgeProps[2]).toMatchObject({ filterName: order[2], handleClose });
-      expect(badgeProps.length).toEqual(3);
+    it('has a filterbadge with handleClose for each filter in badgeOrder', async () => {
+      render(<FilterBadges handleClose={handleClose} />);
+      const user = userEvent.setup();
+      const badge1 = screen.getByText(order[0]);
+      const badge2 = screen.getByText(order[1]);
+      const badge3 = screen.getByText(order[2]);
+      expect(badge1).toBeInTheDocument();
+      expect(badge2).toBeInTheDocument();
+      expect(badge3).toBeInTheDocument();
+      await user.click(badge1);
+      expect(handleClose).toHaveBeenCalled();
     });
   });
 });

src/components/GradesView/GradebookTable/__snapshots__/index.test.jsx.snap

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GradebookTable snapshot 1`] = `
-<div
-  className="gradebook-container"
->
-  <DataTable
-    RowStatusComponent={[MockFunction hooks.nullMethod]}
-    columns={
-      [
-        "some",
-        "columns",
-      ]
-    }
-    data={
-      [
-        "some",
-        "data",
-      ]
-    }
-    hasFixedColumnWidths={true}
-    itemCount={3}
-    rowHeaderColumnKey="username"
-  >
-    <DataTable.TableControlBar />
-    <DataTable.Table />
-    <DataTable.EmptyTable
-      content="empty-table-content"
-    />
-  </DataTable>
-</div>
-`;

src/components/GradesView/GradebookTable/index.test.jsx

@@ -1,39 +1,46 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { DataTable } from '@openedx/paragon';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import useGradebookTableData from './hooks';
 import GradebookTable from '.';
 
 jest.mock('./hooks', () => jest.fn());
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 const hookProps = {
-  columns: ['some', 'columns'],
-  data: ['some', 'data'],
+  columns: [{ Header: 'Username', accessor: 'username' }, { Header: 'Email', accessor: 'email' }, { Header: 'Total Grade', accessor: 'totalGrade' }],
+  data: [{ username: 'instructor', email: 'instructor@example.com', totalGrade: '100' }, { username: 'student', email: 'student@example.com', totalGrade: '90' }],
   grades: ['a', 'few', 'grades'],
   nullMethod: jest.fn().mockName('hooks.nullMethod'),
   emptyContent: 'empty-table-content',
 };
-useGradebookTableData.mockReturnValue(hookProps);
 
-let el;
 describe('GradebookTable', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    el = shallow(<GradebookTable />);
+  it('renders Datatable correctly', () => {
+    useGradebookTableData.mockReturnValue(hookProps);
+    render(<IntlProvider locale="en"><GradebookTable /></IntlProvider>);
+    expect(useGradebookTableData).toHaveBeenCalled();
+    const headers = screen.getAllByRole('columnheader');
+    expect(headers).toHaveLength(3);
+    expect(headers[0]).toHaveTextContent(hookProps.columns[0].Header);
+    expect(headers[1]).toHaveTextContent(hookProps.columns[1].Header);
+    expect(headers[2]).toHaveTextContent(hookProps.columns[2].Header);
+    const rows = screen.getAllByRole('row');
+    expect(rows).toHaveLength(3);
+    expect(screen.getByText(hookProps.data[0].username)).toBeInTheDocument();
+    expect(screen.getByText(hookProps.data[0].email)).toBeInTheDocument();
+    expect(screen.getByText(hookProps.data[0].totalGrade)).toBeInTheDocument();
   });
-  test('snapshot', () => {
-    expect(el.snapshot).toMatchSnapshot();
-  });
-  test('Datatable props', () => {
-    const datatable = el.instance.findByType(DataTable)[0];
-    const { props } = datatable;
-    expect(props.columns).toEqual(hookProps.columns);
-    expect(props.data).toEqual(hookProps.data);
-    expect(props.itemCount).toEqual(hookProps.grades.length);
-    expect(props.RowStatusComponent).toEqual(hookProps.nullMethod);
-    expect(datatable.children[2].type).toEqual('DataTable.EmptyTable');
-    expect(datatable.children[2].props.content).toEqual(hookProps.emptyContent);
+  it('renders empty table content when no data is available', () => {
+    useGradebookTableData.mockReturnValue({
+      ...hookProps,
+      data: [],
+      grades: [],
+    });
+    render(<IntlProvider locale="en"><GradebookTable /></IntlProvider>);
+    expect(screen.getByText(hookProps.emptyContent)).toBeInTheDocument();
   });
 });