@openedx/frontend-app-learner-dashboard 1.0.0-alpha.4 → 1.0.0-alpha.5

package/src/containers/CourseCard/components/CourseCardTitle.test.jsx

@@ -1,67 +1,73 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
-import track from 'tracking';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { reduxHooks } from '@src/hooks';
 import useActionDisabledState from './hooks';
 import CourseCardTitle from './CourseCardTitle';
+import track from '@src/tracking';
 
-const homeUrl = 'home-url';
-
-jest.mock('tracking', () => ({
+jest.mock('@src/tracking', () => ({
   course: {
     courseTitleClicked: jest.fn().mockName('segment.courseTitleClicked'),
   },
 }));
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
-    useCardCourseData: jest.fn(() => ({ courseName: 'course-name' })),
-    useCardCourseRunData: jest.fn(() => ({ homeUrl })),
-    useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
-      trackCourseEvent: { eventName, cardId, url },
-    })),
+    useCardCourseData: jest.fn(),
+    useCardCourseRunData: jest.fn(),
+    useTrackCourseEvent: jest.fn(),
   },
 }));
+
 jest.mock('./hooks', () => jest.fn(() => ({ disableCourseTitle: false })));
 
 describe('CourseCardTitle', () => {
   const props = {
-    cardId: 'cardId',
+    cardId: 'test-card-id',
   };
+
+  const courseName = 'Test Course';
+  const homeUrl = 'http://test.com';
+  const handleTitleClick = jest.fn();
+
   beforeEach(() => {
     jest.clearAllMocks();
+    reduxHooks.useCardCourseData.mockReturnValue({ courseName });
+    reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
+    reduxHooks.useTrackCourseEvent.mockReturnValue(handleTitleClick);
   });
-  describe('snapshot', () => {
-    test('renders clickable link course title', () => {
-      const wrapper = shallow(<CourseCardTitle {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-      const title = wrapper.instance.findByTestId('CourseCardTitle');
-      expect(title[0].type).toBe('a');
-      expect(title[0].props.onClick).toEqual(
-        reduxHooks.useTrackCourseEvent(
-          track.course.courseTitleClicked,
-          props.cardId,
-          homeUrl,
-        ),
-      );
-    });
-    test('renders disabled link', () => {
-      useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
-      const wrapper = shallow(<CourseCardTitle {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-      const title = wrapper.instance.findByTestId('CourseCardTitle');
-      expect(title[0].type).toBe('span');
-      expect(title[0].props.onClick).toBeUndefined();
-    });
+
+  it('renders course name as link when not disabled', async () => {
+    useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
+    render(<CourseCardTitle {...props} />);
+
+    const user = userEvent.setup();
+    const link = screen.getByRole('link', { name: courseName });
+    expect(link).toHaveAttribute('href', homeUrl);
+
+    await user.click(link);
+    expect(handleTitleClick).toHaveBeenCalled();
+  });
+
+  it('renders course name as span when disabled', () => {
+    useActionDisabledState.mockReturnValue({ disableCourseTitle: true });
+    render(<CourseCardTitle {...props} />);
+
+    const text = screen.getByText(courseName);
+    expect(text).toBeInTheDocument();
+    expect(text.tagName.toLowerCase()).toBe('span');
   });
-  describe('behavior', () => {
-    it('initializes', () => {
-      shallow(<CourseCardTitle {...props} />);
-      expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
-      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
-        props.cardId,
-      );
-      expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
-    });
+
+  it('uses correct hooks with cardId', () => {
+    useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
+    render(<CourseCardTitle {...props} />);
+
+    expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
+    expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
+    expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
+      track.course.courseTitleClicked,
+      props.cardId,
+      homeUrl,
+    );
   });
 });

package/src/containers/CourseCard/components/RelatedProgramsBadge/hooks.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useIntl } from '@openedx/frontend-base';
 
-import { StrictDict } from 'utils';
-import { reduxHooks } from 'hooks';
+import { StrictDict } from '@src/utils';
+import { reduxHooks } from '@src/hooks';
 
 import messages from './messages';
 import * as module from './hooks';

package/src/containers/CourseCard/components/RelatedProgramsBadge/hooks.test.js

@@ -1,21 +1,30 @@
 import { useIntl } from '@openedx/frontend-base';
 
-import { MockUseState } from 'testUtils';
-import { reduxHooks } from 'hooks';
+import { MockUseState } from '@src/testUtils';
+import { reduxHooks } from '@src/hooks';
 
 import * as hooks from './hooks';
 import messages from './messages';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardRelatedProgramsData: jest.fn(),
   },
 }));
+jest.mock('@openedx/frontend-base', () => {
+  const { formatMessage } = jest.requireActual('@src/testUtils');
+  return {
+    ...jest.requireActual('@openedx/frontend-base'),
+    useIntl: () => ({
+      formatMessage,
+    }),
+  };
+});
 
 const cardId = 'test-card-id';
 
 const state = new MockUseState(hooks);
-const numPrograms = 27;
+let numPrograms = 27;
 
 describe('RelatedProgramsBadge hooks', () => {
   const { formatMessage } = useIntl();
@@ -25,6 +34,9 @@ describe('RelatedProgramsBadge hooks', () => {
   });
   beforeEach(() => {
     jest.clearAllMocks();
+    reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({
+      length: numPrograms,
+    });
   });
   describe('useRelatedProgramsBadgeData', () => {
     beforeEach(() => {
@@ -54,11 +66,13 @@ describe('RelatedProgramsBadge hooks', () => {
       expect(out.numPrograms).toEqual(numPrograms);
     });
     test('returns empty programsMessage if no programs', () => {
+      reduxHooks.useCardRelatedProgramsData.mockReset();
       reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({ length: 0 });
       out = hooks.useRelatedProgramsBadgeData({ cardId });
       expect(out.programsMessage).toEqual('');
     });
     test('returns badgeLabelSingular programsMessage if 1 programs', () => {
+      reduxHooks.useCardRelatedProgramsData.mockReset();
       reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({ length: 1 });
       out = hooks.useRelatedProgramsBadgeData({ cardId });
       expect(out.programsMessage).toEqual(formatMessage(

package/src/containers/CourseCard/components/RelatedProgramsBadge/index.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Button, Icon } from '@openedx/paragon';
 import { Program } from '@openedx/paragon/icons';
 
-import RelatedProgramsBadgeModal from 'containers/RelatedProgramsModal';
+import RelatedProgramsBadgeModal from '@src/containers/RelatedProgramsModal';
 import useRelatedProgramsBadgeData from './hooks';
 
 export const RelatedProgramsBadge = ({ cardId }) => {

package/src/containers/CourseCard/components/RelatedProgramsBadge/index.test.jsx

@@ -1,10 +1,9 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
+import RelatedProgramsBadge from '../RelatedProgramsBadge';
 import useRelatedProgramsBadge from './hooks';
-import RelatedProgramsBadge from '.';
 
-jest.mock('containers/RelatedProgramsModal', () => 'RelatedProgramsModal');
+jest.mock('@src/containers/RelatedProgramsModal', () => 'RelatedProgramsModal');
 jest.mock('./hooks', () => jest.fn());
 
 const hookProps = {
@@ -13,18 +12,23 @@ const hookProps = {
   closeModal: jest.fn().mockName('useRelatedProgramsBadge.closeModal'),
   numPrograms: 3,
   programsMessage: 'useRelatedProgramsBadge.programsMessage',
-};
+}
 
-const cardId = 'test-course-number';
+const cardId = 'test-card-id';
 
 describe('RelatedProgramsBadge component', () => {
-  test('empty render: no programs', () => {
+  it('should not render if no programs', () => {
     useRelatedProgramsBadge.mockReturnValueOnce({ ...hookProps, numPrograms: 0 });
-    const el = shallow(<RelatedProgramsBadge cardId={cardId} />);
-    expect(el.isEmptyRender()).toEqual(true);
+    render(<IntlProvider locale="en"><RelatedProgramsBadge cardId={cardId} /></IntlProvider>);
+    const button = screen.queryByRole('button', { name: hookProps.programsMessage });
+    expect(button).toBeNull();
+    const dialog = screen.queryByRole('dialog');
+    expect(dialog).toBeNull();
   });
-  test('snapshot: 3 programs', () => {
-    useRelatedProgramsBadge.mockReturnValueOnce(hookProps);
-    expect(shallow(<RelatedProgramsBadge cardId={cardId} />).snapshot).toMatchSnapshot();
+  it('3 programs closed', () => {
+    useRelatedProgramsBadge.mockReturnValue({ ...hookProps, isOpen: false });
+    render(<IntlProvider locale="en"><RelatedProgramsBadge cardId={cardId} /></IntlProvider>);
+    const button = screen.getByRole('button', { name: hookProps.programsMessage });
+    expect(button).toBeInTheDocument();
   });
 });

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

@@ -1,8 +1,10 @@
-import { reduxHooks } from 'hooks';
+import { reduxHooks } from '@src/hooks';
 
 import * as hooks from './hooks';
+import { renderHook } from '@testing-library/react';
+import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useMasqueradeData: jest.fn(),
     useCardEnrollmentData: jest.fn(),
@@ -57,11 +59,20 @@ describe('useActionDisabledState', () => {
     });
   };
 
-  const runHook = () => hooks.useActionDisabledState(cardId);
+  const runHook = (masqueradeValue = { isMasquerading: false }) => {
+    const { result } = renderHook(() => hooks.useActionDisabledState(cardId), {
+      wrapper: ({ children }) => (
+        <MasqueradeUserContext.Provider value={masqueradeValue}>
+          {children}
+        </MasqueradeUserContext.Provider>
+      ),
+    });
+    return result.current;
+  };
   describe('disableBeginCourse', () => {
     const testDisabled = (data, expected) => {
       mockHooksData(data);
-      expect(runHook().disableBeginCourse).toBe(expected);
+      expect(runHook({ isMasquerading: data.isMasquerading ?? false }).disableBeginCourse).toBe(expected);
     };
     it('disable when homeUrl is invalid', () => {
       testDisabled({ homeUrl: null }, true);
@@ -82,7 +93,7 @@ describe('useActionDisabledState', () => {
   describe('disableResumeCourse', () => {
     const testDisabled = (data, expected) => {
       mockHooksData(data);
-      expect(runHook().disableResumeCourse).toBe(expected);
+      expect(runHook({ isMasquerading: data.isMasquerading ?? false }).disableResumeCourse).toBe(expected);
     };
     it('disable when resumeUrl is invalid', () => {
       testDisabled({ resumeUrl: null }, true);
@@ -103,7 +114,7 @@ describe('useActionDisabledState', () => {
   describe('disableViewCourse', () => {
     const testDisabled = (data, expected) => {
       mockHooksData(data);
-      expect(runHook().disableViewCourse).toBe(expected);
+      expect(runHook({ isMasquerading: data.isMasquerading ?? false }).disableViewCourse).toBe(expected);
     };
     it('disable when hasAccess is false', () => {
       testDisabled({ hasAccess: false }, true);
@@ -118,7 +129,7 @@ describe('useActionDisabledState', () => {
   describe('disableSelectSession', () => {
     const testDisabled = (data, expected) => {
       mockHooksData(data);
-      expect(runHook().disableSelectSession).toBe(expected);
+      expect(runHook({ isMasquerading: data.isMasquerading ?? false }).disableSelectSession).toBe(expected);
     };
     it('disable when isEntitlement is false', () => {
       testDisabled({ isEntitlement: false }, true);
@@ -150,7 +161,7 @@ describe('useActionDisabledState', () => {
   describe('disableCourseTitle', () => {
     const testDisabled = (data, expected) => {
       mockHooksData(data);
-      expect(runHook().disableCourseTitle).toBe(expected);
+      expect(runHook({ isMasquerading: data.isMasquerading ?? false }).disableCourseTitle).toBe(expected);
     };
     it('disable when isEntitlement is true and isFulfilled is false', () => {
       testDisabled({ isEntitlement: true, isFulfilled: false }, true);

package/src/containers/CourseCard/hooks.test.js

@@ -1,16 +1,26 @@
 import { useIntl } from '@openedx/frontend-base';
 
-import { reduxHooks } from 'hooks';
+import { reduxHooks } from '@src/hooks';
 
 import * as hooks from './hooks';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardCourseData: jest.fn(),
     useCardEnrollmentData: jest.fn(),
   },
 }));
 
+jest.mock('@openedx/frontend-base', () => {
+  const { formatMessage } = jest.requireActual('@src/testUtils');
+  return {
+    ...jest.requireActual('@openedx/frontend-base'),
+    useIntl: () => ({
+      formatMessage,
+    }),
+  };
+});
+
 const cardId = 'my-test-course-number';
 
 describe('CourseCard hooks', () => {

package/src/containers/CourseCard/index.test.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
 
 import CourseCard from '.';
 import hooks from './hooks';
@@ -8,22 +8,43 @@ jest.mock('./hooks', () => ({
   useIsCollapsed: jest.fn(),
 }));
 
-jest.mock('./components/CourseCardBanners', () => 'CourseCardBanners');
-jest.mock('./components/CourseCardImage', () => 'CourseCardImage');
-jest.mock('./components/CourseCardMenu', () => 'CourseCardMenu');
-jest.mock('./components/CourseCardActions', () => 'CourseCardActions');
-jest.mock('./components/CourseCardDetails', () => 'CourseCardDetails');
-jest.mock('./components/CourseCardTitle', () => 'CourseCardTitle');
+const namesMockComponents = [
+  'CourseCardBanners',
+  'CourseCardImage',
+  'CourseCardMenu',
+  'CourseCardActions',
+  'CourseCardDetails',
+  'CourseCardTitle',
+];
+
+jest.mock('./components/CourseCardBanners', () => jest.fn(() => <div>CourseCardBanners</div>));
+jest.mock('./components/CourseCardImage', () => jest.fn(() => <div>CourseCardImage</div>));
+jest.mock('./components/CourseCardMenu', () => jest.fn(() => <div>CourseCardMenu</div>));
+jest.mock('./components/CourseCardActions', () => jest.fn(() => <div>CourseCardActions</div>));
+jest.mock('./components/CourseCardDetails', () => jest.fn(() => <div>CourseCardDetails</div>));
+jest.mock('./components/CourseCardTitle', () => jest.fn(() => <div>CourseCardTitle</div>));
 
 const cardId = 'test-card-id';
 
 describe('CourseCard component', () => {
-  test('snapshot: collapsed', () => {
+  it('collapsed', () => {
     hooks.useIsCollapsed.mockReturnValueOnce(true);
-    expect(shallow(<CourseCard cardId={cardId} />).snapshot).toMatchSnapshot();
+    render(<IntlProvider locale="en"><CourseCard cardId={cardId} /></IntlProvider>);
+    const cardImage = screen.getByText('CourseCardImage');
+    expect(cardImage.parentElement).not.toHaveClass('d-flex');
+  });
+  it('not collapsed', () => {
+    hooks.useIsCollapsed.mockReturnValueOnce(false);
+    render(<IntlProvider locale="en"><CourseCard cardId={cardId} /></IntlProvider>);
+    const cardImage = screen.getByText('CourseCardImage');
+    expect(cardImage.parentElement).toHaveClass('d-flex');
   });
-  test('snapshot: not collapsed', () => {
+  it('renders courseCard child components', () => {
     hooks.useIsCollapsed.mockReturnValueOnce(false);
-    expect(shallow(<CourseCard cardId={cardId} />).snapshot).toMatchSnapshot();
+    render(<IntlProvider locale="en"><CourseCard cardId={cardId} /></IntlProvider>);
+    namesMockComponents.map((courseCardName) => {
+      const courseCardComponent = screen.getByText(courseCardName);
+      return expect(courseCardComponent).toBeInTheDocument();
+    });
   });
 });

package/src/containers/CourseFilterControls/ActiveCourseFilters.test.jsx

@@ -1,17 +1,28 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
+import { formatMessage } from '@src/testUtils';
 
-import { FilterKeys } from 'data/constants/app';
+import { FilterKeys } from '@src/data/constants/app';
 import ActiveCourseFilters from './ActiveCourseFilters';
+import messages from './messages';
+
+const filters = Object.values(FilterKeys);
 
 describe('ActiveCourseFilters', () => {
   const props = {
-    filters: Object.values(FilterKeys),
+    filters,
     handleRemoveFilter: jest.fn().mockName('handleRemoveFilter'),
   };
-  describe('snapshot', () => {
-    test('renders', () => {
-      const wrapper = shallow(<ActiveCourseFilters {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders chips correctly', () => {
+    render(<IntlProvider locale="en"><ActiveCourseFilters {...props} /></IntlProvider>);
+    filters.map((key) => {
+      const chip = screen.getByText(formatMessage(messages[key]));
+      return expect(chip).toBeInTheDocument();
     });
   });
-});
+  it('renders button correctly', () => {
+    render(<IntlProvider locale="en"><ActiveCourseFilters {...props} /></IntlProvider>);
+    const button = screen.getByRole('button', { name: formatMessage(messages.clearAll) });
+    expect(button).toBeInTheDocument();
+  });
+});

package/src/containers/CourseFilterControls/CourseFilterControls.test.jsx

@@ -1,60 +1,75 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
+import { formatMessage } from '@src/testUtils';
 import { breakpoints, useWindowSize } from '@openedx/paragon';
+import { reduxHooks } from '@src/hooks';
+import { IntlProvider } from '@openedx/frontend-base';
+import { FilterKeys, SortKeys } from '@src/data/constants/app';
 
-import { reduxHooks } from 'hooks';
-
+import messages from './messages';
 import CourseFilterControls from './CourseFilterControls';
 import useCourseFilterControlsData from './hooks';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: { useHasCourses: jest.fn() },
 }));
 
-jest.mock('./hooks', () => jest.fn().mockName('useCourseFilterControlsData'));
+jest.mock('./hooks', () => jest.fn());
+
+jest.mock('@openedx/paragon', () => ({
+  ...jest.requireActual('@openedx/paragon'),
+  useWindowSize: jest.fn(),
+}));
 
-jest.mock('./components/FilterForm', () => 'FilterForm');
-jest.mock('./components/SortForm', () => 'SortForm');
+const filters = Object.values(FilterKeys);
 
-reduxHooks.useHasCourses.mockReturnValue(true);
+const mockControlsData = {
+  isOpen: false,
+  open: jest.fn().mockName('open'),
+  close: jest.fn().mockName('close'),
+  target: 'target-test',
+  setTarget: jest.fn(),
+  handleFilterChange: jest.fn().mockName('handleFilterChange'),
+  handleSortChange: jest.fn().mockName('handleSortChange'),
+};
 
 describe('CourseFilterControls', () => {
   const props = {
-    sortBy: 'test-sort-by',
+    sortBy: SortKeys.enrolled,
     setSortBy: jest.fn().mockName('setSortBy'),
-    filters: ['test-filter'],
+    filters,
   };
 
-  useCourseFilterControlsData.mockReturnValue({
-    isOpen: false,
-    open: jest.fn().mockName('open'),
-    close: jest.fn().mockName('close'),
-    target: 'test-target',
-    setTarget: jest.fn().mockName('setTarget'),
-    handleFilterChange: jest.fn().mockName('handleFilterChange'),
-    handleSortChange: jest.fn().mockName('handleSortChange'),
-  });
-
-  describe('no courses', () => {
-    test('snapshot', () => {
-      reduxHooks.useHasCourses.mockReturnValueOnce(false);
-      useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
-      const wrapper = shallow(<CourseFilterControls {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-  });
-  describe('mobile', () => {
-    test('snapshot', () => {
+  describe('mobile and open', () => {
+    it('should render sheet', () => {
+      reduxHooks.useHasCourses.mockReturnValue(true);
+      useCourseFilterControlsData.mockReturnValue({ ...mockControlsData, isOpen: true });
       useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth - 1 });
-      const wrapper = shallow(<CourseFilterControls {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+      render(<IntlProvider locale="en"><CourseFilterControls {...props} /></IntlProvider>);
+      const sheet = screen.getByRole('presentation', { hidden: true });
+      expect(sheet).toBeInTheDocument();
+      expect(sheet.parentElement).toHaveClass('sheet-container');
     });
   });
   describe('is not mobile', () => {
-    test('snapshot', () => {
+    it('should have button disabled', () => {
+      reduxHooks.useHasCourses.mockReturnValue(true);
+      useCourseFilterControlsData.mockReturnValue({ ...mockControlsData, isOpen: true });
       useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
-      const wrapper = shallow(<CourseFilterControls {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+      render(<IntlProvider locale="en"><CourseFilterControls {...props} /></IntlProvider>);
+      const filterForm = screen.getByText(messages.courseStatus.defaultMessage);
+      const modal = filterForm.closest('div.pgn__modal-popup__tooltip');
+      expect(modal).toBeInTheDocument();
+    });
+  });
+  describe('no courses', () => {
+    it('should have button disabled', () => {
+      reduxHooks.useHasCourses.mockReturnValue(false);
+      useCourseFilterControlsData.mockReturnValue(mockControlsData);
+      useWindowSize.mockReturnValue({ width: breakpoints.small.minWidth });
+      render(<IntlProvider locale="en"><CourseFilterControls {...props} /></IntlProvider>);
+      const button = screen.getByRole('button', { name: formatMessage(messages.refine) });
+      expect(button).toBeInTheDocument();
+      expect(button).toBeDisabled();
     });
   });
 });

package/src/containers/CourseFilterControls/components/Checkbox.test.jsx

@@ -1,14 +1,17 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { formatMessage } from '@src/testUtils';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { FilterKeys } from 'data/constants/app';
+import { FilterKeys } from '@src/data/constants/app';
 import Checkbox from './Checkbox';
+import messages from '../messages';
 
 describe('Checkbox', () => {
-  describe('snapshot', () => {
+  describe('renders correctly', () => {
     Object.keys(FilterKeys).forEach((filterKey) => {
       it(`renders ${filterKey}`, () => {
-        const wrapper = shallow(<Checkbox filterKey={filterKey} />);
-        expect(wrapper.snapshot).toMatchSnapshot();
+        render(<IntlProvider locale="en"><Checkbox filterKey={filterKey} /></IntlProvider>);
+        expect(screen.getByText(formatMessage(messages[filterKey]))).toBeInTheDocument();
       });
     });
   });