From 6ae8180f998f76827d7cc34fdb460ccf08c3c438 Mon Sep 17 00:00:00 2001 From: Diana Villalvazo Date: Tue, 24 Jun 2025 11:38:13 -0500 Subject: [PATCH] test: Deprecate react-unit-test-utils 8/15 (#664) --- .../__snapshots__/index.test.jsx.snap | 55 ----- src/containers/CoursesPanel/index.test.jsx | 67 ++++-- .../Dashboard/DashboardLayout.test.jsx | 95 ++++----- src/containers/Dashboard/LoadingView.test.jsx | 19 +- .../DashboardLayout.test.jsx.snap | 197 ------------------ .../__snapshots__/LoadingView.test.jsx.snap | 13 -- .../__snapshots__/index.test.jsx.snap | 69 ------ src/containers/Dashboard/index.test.jsx | 132 ++++-------- .../__snapshots__/index.test.jsx.snap | 133 ------------ .../EmailSettingsModal/index.test.jsx | 41 +++- 10 files changed, 178 insertions(+), 643 deletions(-) delete mode 100644 src/containers/CoursesPanel/__snapshots__/index.test.jsx.snap delete mode 100644 src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap delete mode 100644 src/containers/Dashboard/__snapshots__/LoadingView.test.jsx.snap delete mode 100644 src/containers/Dashboard/__snapshots__/index.test.jsx.snap delete mode 100644 src/containers/EmailSettingsModal/__snapshots__/index.test.jsx.snap diff --git a/src/containers/CoursesPanel/__snapshots__/index.test.jsx.snap b/src/containers/CoursesPanel/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 1687432..0000000 --- a/src/containers/CoursesPanel/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,55 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CoursesPanel no courses snapshot 1`] = ` -
-
-

- My Courses -

-
- -
-
- -
-`; - -exports[`CoursesPanel with courses snapshot 1`] = ` -
-
-

- My Courses -

-
- -
-
- -
-`; diff --git a/src/containers/CoursesPanel/index.test.jsx b/src/containers/CoursesPanel/index.test.jsx index 5917f14..236cd79 100644 --- a/src/containers/CoursesPanel/index.test.jsx +++ b/src/containers/CoursesPanel/index.test.jsx @@ -1,32 +1,49 @@ -import { shallow } from '@edx/react-unit-test-utils'; - +import { render, screen } from '@testing-library/react'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; +import { FilterKeys } from 'data/constants/app'; import { reduxHooks } from 'hooks'; + +import messagesNoCourses from 'containers/CoursesPanel/NoCoursesView/messages'; import { useCourseListData } from './hooks'; import CoursesPanel from '.'; +import messages from './messages'; + +const courseSearchUrl = '/course-search-url'; jest.mock('hooks', () => ({ - reduxHooks: { useHasCourses: jest.fn() }, + reduxHooks: { + useHasCourses: jest.fn(), + usePlatformSettingsData: jest.fn(() => ({ + courseSearchUrl, + })), + }, })); jest.mock('./hooks', () => ({ useCourseListData: jest.fn(), })); -jest.mock('containers/CourseCard', () => 'CourseCard'); +jest.mock('containers/CourseCard', () => jest.fn(() =>
CourseCard
)); jest.mock('containers/CourseFilterControls', () => ({ - ActiveCourseFilters: 'ActiveCourseFilters', - CourseFilterControls: 'CourseFilterControls', + ActiveCourseFilters: jest.fn(() =>
ActiveCourseFilters
), + CourseFilterControls: jest.fn(() =>
CourseFilterControls
), })); + jest.mock('@openedx/frontend-plugin-framework', () => ({ PluginSlot: 'PluginSlot', })); -jest.mock('./CourseList', () => 'CourseList'); + +jest.unmock('@edx/frontend-platform/i18n'); +jest.unmock('@openedx/paragon'); +jest.unmock('react'); + +const filters = Object.values(FilterKeys); reduxHooks.useHasCourses.mockReturnValue(true); describe('CoursesPanel', () => { const defaultCourseListData = { - filterOptions: {}, + filterOptions: { filters, handleRemoveFilter: jest.fn() }, numPages: 1, setPageNumber: jest.fn().mockName('setPageNumber'), showFilters: false, @@ -34,25 +51,43 @@ describe('CoursesPanel', () => { }; const createWrapper = (courseListData) => { - useCourseListData.mockReturnValueOnce({ + useCourseListData.mockReturnValue({ ...defaultCourseListData, ...courseListData, }); - return shallow(); + return render(); }; describe('no courses', () => { - test('snapshot', () => { + it('should render no courses view slot', () => { reduxHooks.useHasCourses.mockReturnValue(false); - const wrapper = createWrapper(); - expect(wrapper.snapshot).toMatchSnapshot(); + createWrapper(); + const imgNoCourses = screen.getByRole('img', { name: messagesNoCourses.bannerAlt.defaultMessage }); + expect(imgNoCourses).toBeInTheDocument(); + const courseCard = screen.queryByText('CourseCard'); + expect(courseCard).toBeNull(); }); }); describe('with courses', () => { - test('snapshot', () => { + it('should render courselist', () => { + const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }]; reduxHooks.useHasCourses.mockReturnValue(true); - const wrapper = createWrapper(); - expect(wrapper.snapshot).toMatchSnapshot(); + createWrapper({ visibleList }); + const courseCards = screen.getAllByText('CourseCard'); + expect(courseCards.length).toEqual(visibleList.length); + }); + it('displays course filter controls', () => { + reduxHooks.useHasCourses.mockReturnValue(true); + createWrapper(); + expect(screen.getByText('CourseFilterControls')).toBeInTheDocument(); + }); + + it('displays course list slot when courses exist', () => { + reduxHooks.useHasCourses.mockReturnValue(true); + const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }]; + createWrapper({ visibleList }); + const heading = screen.getByText(messages.myCourses.defaultMessage); + expect(heading).toBeInTheDocument(); }); }); }); diff --git a/src/containers/Dashboard/DashboardLayout.test.jsx b/src/containers/Dashboard/DashboardLayout.test.jsx index fabb984..c3296d3 100644 --- a/src/containers/Dashboard/DashboardLayout.test.jsx +++ b/src/containers/Dashboard/DashboardLayout.test.jsx @@ -1,14 +1,21 @@ -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; -import { Col, Row } from '@openedx/paragon'; +import { render, screen } from '@testing-library/react'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; import hooks from './hooks'; -import DashboardLayout, { columnConfig } from './DashboardLayout'; +import DashboardLayout from './DashboardLayout'; jest.mock('./hooks', () => ({ useDashboardLayoutData: jest.fn(), })); +jest.mock('@openedx/frontend-plugin-framework', () => ({ + PluginSlot: 'PluginSlot', +})); + +jest.unmock('@edx/frontend-platform/i18n'); +jest.unmock('@openedx/paragon'); +jest.unmock('react'); + const hookProps = { isCollapsed: true, sidebarShowing: false, @@ -16,50 +23,49 @@ const hookProps = { }; hooks.useDashboardLayoutData.mockReturnValue(hookProps); -const children = 'test-children'; +const children =
test children
; -let el; describe('DashboardLayout', () => { beforeEach(() => { jest.clearAllMocks(); - el = shallow({children}); + render({children}); }); const testColumns = () => { - it('loads courseList and sidebar column layout', () => { - const columns = el.instance.findByType(Row)[0].findByType(Col); - Object.keys(columnConfig.sidebar).forEach(size => { - expect(columns[1].props[size]).toEqual(columnConfig.sidebar[size]); - }); + it('loads courseList and sidebar column layout with corresponding children', () => { + const courseChildren = screen.getByText('test children'); + const courseListCol = courseChildren.parentElement; + const sidebarCol = courseListCol.nextSibling; + expect(courseListCol).toHaveClass('course-list-column'); + expect(sidebarCol).toHaveClass('sidebar-column'); }); it('displays children in first column', () => { - const columns = el.instance.findByType(Row)[0].findByType(Col); - expect(columns[0].children).not.toHaveLength(0); + const courseChildren = screen.getByText('test children'); + const courseListCol = courseChildren.parentElement; + expect(courseChildren).toBeInTheDocument(); + expect(courseListCol).toHaveClass('course-list-column'); }); it('displays WidgetSidebarSlot in second column', () => { - const columns = el.instance.findByType(Row)[0].findByType(Col); - expect(columns[1].findByType('WidgetSidebarSlot')).toHaveLength(1); + const courseListCol = screen.getByText('test children').parentElement; + const sidebarCol = courseListCol.nextSibling; + expect(sidebarCol).toHaveClass('sidebar-column'); + expect(sidebarCol.children[0]).toHaveAttribute('id', 'org.openedx.frontend.learner_dashboard.widget_sidebar.v1'); }); }; - const testSidebarLayout = () => { + const testSidebarLayout = ({ isCollapsed }) => { it('displays withSidebar width for course list column', () => { - const columns = el.instance.findByType(Row)[0].findByType(Col); - Object.keys(columnConfig.courseList.withSidebar).forEach(size => { - expect(columns[0].props[size]).toEqual(columnConfig.courseList.withSidebar[size]); - }); + const courseListCol = screen.getByText('test children').parentElement; + expect(courseListCol).toHaveClass('col-xl-8'); + const sidebarCol = courseListCol.nextSibling; + expect(sidebarCol).toHaveClass('sidebar-column', !isCollapsed && 'not-collapsed'); }); }; - const testNoSidebarLayout = () => { + const testNoSidebarLayout = ({ isCollapsed }) => { it('displays noSidebar width for course list column', () => { - const columns = el.instance.findByType(Row)[0].findByType(Col); - Object.keys(columnConfig.courseList.noSidebar).forEach(size => { - expect(columns[0].props[size]).toEqual(columnConfig.courseList.noSidebar[size]); - }); - }); - }; - const testSnapshot = () => { - test('snapshot', () => { - expect(el.snapshot).toMatchSnapshot(); + const courseListCol = screen.getByText('test children').parentElement; + expect(courseListCol).toHaveClass('col-xl-12'); + const sidebarCol = courseListCol.nextSibling; + expect(sidebarCol).toHaveClass('sidebar-column', !isCollapsed && 'not-collapsed'); }); }; describe('collapsed', () => { @@ -68,27 +74,18 @@ describe('DashboardLayout', () => { hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps, sidebarShowing: true }); }); testColumns(); - testSnapshot(); - testSidebarLayout(); + testSidebarLayout({ isCollapsed: true }); }); describe('sidebar not showing', () => { + beforeEach(() => { + hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps }); + }); testColumns(); - testSnapshot(); - testNoSidebarLayout(); - }); - it('does not show spacer component above widget sidebar', () => { - const columns = el.instance.findByType(Col); - expect(columns[1].findByType('h2').length).toEqual(0); + testNoSidebarLayout({ isCollapsed: true }); }); }); describe('not collapsed', () => { - const testWidgetSpacing = () => { - it('shows not-collapsed class on widget sidebar', () => { - const columns = el.instance.findByType(Col); - expect(columns[1].props.className).toContain('not-collapsed'); - }); - }; describe('sidebar showing', () => { beforeEach(() => { hooks.useDashboardLayoutData.mockReturnValueOnce({ @@ -98,18 +95,14 @@ describe('DashboardLayout', () => { }); }); testColumns(); - testSnapshot(); - testSidebarLayout(); - testWidgetSpacing(); + testSidebarLayout({ isCollapsed: false }); }); describe('sidebar not showing', () => { beforeEach(() => { hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps, isCollapsed: false }); }); testColumns(); - testSnapshot(); - testNoSidebarLayout(); - testWidgetSpacing(); + testNoSidebarLayout({ isCollapsed: false }); }); }); }); diff --git a/src/containers/Dashboard/LoadingView.test.jsx b/src/containers/Dashboard/LoadingView.test.jsx index 871bbdc..db51d5f 100644 --- a/src/containers/Dashboard/LoadingView.test.jsx +++ b/src/containers/Dashboard/LoadingView.test.jsx @@ -1,5 +1,4 @@ -import { shallow } from '@edx/react-unit-test-utils'; -import { Spinner } from '@openedx/paragon'; +import { render, screen } from '@testing-library/react'; import hooks from './hooks'; import LoadingView from './LoadingView'; @@ -8,16 +7,16 @@ jest.mock('./hooks', () => ({ useDashboardMessages: jest.fn(), })); +jest.unmock('@edx/frontend-platform/i18n'); +jest.unmock('@openedx/paragon'); +jest.unmock('react'); + const spinnerScreenReaderText = 'test-sr-text'; describe('LoadingView', () => { - beforeEach(() => { - hooks.useDashboardMessages.mockReturnValueOnce({ spinnerScreenReaderText }); - }); - test('snapshot', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); it('renders spinner component with associated screen reader text', () => { - const wrapper = shallow(); - expect(wrapper.instance.findByType(Spinner)[0].props.screenReaderText).toEqual(spinnerScreenReaderText); + hooks.useDashboardMessages.mockReturnValueOnce({ spinnerScreenReaderText }); + render(); + const loader = screen.getByRole('status'); + expect(loader.children[0].innerHTML).toBe(spinnerScreenReaderText); }); }); diff --git a/src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap b/src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap deleted file mode 100644 index c1cd867..0000000 --- a/src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap +++ /dev/null @@ -1,197 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DashboardLayout collapsed sidebar not showing snapshot 1`] = ` - - - - test-children - - - - - - -`; - -exports[`DashboardLayout collapsed sidebar showing snapshot 1`] = ` - - - - test-children - - - - - - -`; - -exports[`DashboardLayout not collapsed sidebar not showing snapshot 1`] = ` - - - - test-children - - - - - - -`; - -exports[`DashboardLayout not collapsed sidebar showing snapshot 1`] = ` - - - - test-children - - - - - - -`; diff --git a/src/containers/Dashboard/__snapshots__/LoadingView.test.jsx.snap b/src/containers/Dashboard/__snapshots__/LoadingView.test.jsx.snap deleted file mode 100644 index cbf1a12..0000000 --- a/src/containers/Dashboard/__snapshots__/LoadingView.test.jsx.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LoadingView snapshot 1`] = ` -
- -
-`; diff --git a/src/containers/Dashboard/__snapshots__/index.test.jsx.snap b/src/containers/Dashboard/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 9fdbbbd..0000000 --- a/src/containers/Dashboard/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,69 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Dashboard snapshots courses loaded, show select session modal snapshot 1`] = ` -
-

- test-page-title -

- - - - -
- - - -
-
-`; - -exports[`Dashboard snapshots courses still loading snapshot 1`] = ` -
-

- test-page-title -

-
- -
-
-`; - -exports[`Dashboard snapshots there are no courses snapshot 1`] = ` -
-

- test-page-title -

- - - -
- - - -
-
-`; diff --git a/src/containers/Dashboard/index.test.jsx b/src/containers/Dashboard/index.test.jsx index 71d83a6..48f03cf 100644 --- a/src/containers/Dashboard/index.test.jsx +++ b/src/containers/Dashboard/index.test.jsx @@ -1,12 +1,7 @@ -import { shallow } from '@edx/react-unit-test-utils'; +import { render, screen } from '@testing-library/react'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; import { reduxHooks } from 'hooks'; - -import SelectSessionModal from 'containers/SelectSessionModal'; -import CoursesPanel from 'containers/CoursesPanel'; - -import DashboardLayout from './DashboardLayout'; -import LoadingView from './LoadingView'; import hooks from './hooks'; import Dashboard from '.'; @@ -18,104 +13,63 @@ jest.mock('hooks', () => ({ }, })); -jest.mock('plugin-slots/DashboardModalSlot', () => 'DashboardModalSlot'); -jest.mock('containers/CoursesPanel', () => 'CoursesPanel'); -jest.mock('./LoadingView', () => 'LoadingView'); -jest.mock('./DashboardLayout', () => 'DashboardLayout'); - jest.mock('./hooks', () => ({ useInitializeDashboard: jest.fn(), useDashboardMessages: jest.fn(), })); +jest.mock('plugin-slots/DashboardModalSlot', () => jest.fn(() =>
DashboardModalSlot
)); +jest.mock('containers/CoursesPanel', () => jest.fn(() =>
CoursesPanel
)); +jest.mock('./LoadingView', () => jest.fn(() =>
LoadingView
)); +jest.mock('containers/SelectSessionModal', () => jest.fn(() =>
SelectSessionModal
)); +jest.mock('./DashboardLayout', () => jest.fn(() =>
DashboardLayout
)); + const pageTitle = 'test-page-title'; describe('Dashboard', () => { - beforeEach(() => { + const createWrapper = (props = {}) => { + const { + hasCourses = true, + initIsPending = true, + showSelectSessionModal = true, + } = props; hooks.useDashboardMessages.mockReturnValue({ pageTitle }); - }); - const createWrapper = ({ - hasCourses, - initIsPending, - showSelectSessionModal, - }) => { - reduxHooks.useHasCourses.mockReturnValueOnce(hasCourses); - reduxHooks.useRequestIsPending.mockReturnValueOnce(initIsPending); - reduxHooks.useShowSelectSessionModal.mockReturnValueOnce(showSelectSessionModal); - return shallow(); + reduxHooks.useHasCourses.mockReturnValue(hasCourses); + reduxHooks.useRequestIsPending.mockReturnValue(initIsPending); + reduxHooks.useShowSelectSessionModal.mockReturnValue(showSelectSessionModal); + return render(); }; - let wrapper; - describe('snapshots', () => { - const testTitle = () => { - test('page title is displayed in sr-only h1 tag', () => { - const heading = wrapper.instance.findByType('h1')[0]; - expect(heading.props.className).toEqual('sr-only'); - expect(heading.children[0].el).toEqual(pageTitle); + describe('render', () => { + it('page title is displayed in sr-only h1 tag', () => { + createWrapper(); + const heading = screen.getByText(pageTitle); + expect(heading).toHaveClass('sr-only'); + }); + describe('initIsPending false', () => { + it('should render DashboardModalSlot', () => { + createWrapper({ initIsPending: false }); + const dashboardModalSlot = screen.getByText('DashboardModalSlot'); + expect(dashboardModalSlot).toBeInTheDocument(); }); - }; - const testSnapshot = () => { - test('snapshot', () => { - expect(wrapper.snapshot).toMatchSnapshot(); + it('should render SelectSessionModal', () => { + createWrapper({ initIsPending: false }); + const selectSessionModal = screen.getByText('SelectSessionModal'); + expect(selectSessionModal).toBeInTheDocument(); }); - }; - const testContent = (el) => { - expect(wrapper.instance.findByTestId('dashboard-content')[0].children[0]).toMatchObject(shallow(el)); - }; - - const renderString = (show) => (show ? 'renders' : 'does not render'); - const testView = ({ - props, - content: [contentName, contentEl], - showSelectSessionModal, - }) => { - beforeEach(() => { wrapper = createWrapper(props); }); - testTitle(); - testSnapshot(); - it(`renders ${contentName}`, () => { - testContent(contentEl); - }); - it(`${renderString(showSelectSessionModal)} select session modal`, () => { - expect(wrapper.instance.findByType(SelectSessionModal).length).toEqual(showSelectSessionModal ? 1 : 0); - }); - }; + }); describe('courses still loading', () => { - testView({ - props: { - hasCourses: false, - initIsPending: true, - showSelectSessionModal: false, - }, - content: ['LoadingView', ], - showSelectSessionModal: false, + it('should render LoadingView', () => { + createWrapper({ hasCourses: false }); + const loadingView = screen.getByText('LoadingView'); + expect(loadingView).toBeInTheDocument(); }); }); - - describe('courses loaded, show select session modal', () => { - testView({ - props: { - hasCourses: true, - initIsPending: false, - showSelectSessionModal: true, - }, - content: ['LoadedView', ( - - )], - showSelectSessionModal: true, - }); - }); - - describe('there are no courses', () => { - testView({ - props: { - hasCourses: false, - initIsPending: false, - showSelectSessionModal: false, - }, - content: ['Dashboard layout with no courses sidebar and content', ( - - )], - showSelectSessionModal: false, + describe('courses loaded', () => { + it('should show dashboard layout', () => { + createWrapper({ initIsPending: false }); + const dashboardLayout = screen.getByText('DashboardLayout'); + expect(dashboardLayout).toBeInTheDocument(); }); }); }); diff --git a/src/containers/EmailSettingsModal/__snapshots__/index.test.jsx.snap b/src/containers/EmailSettingsModal/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 43e447b..0000000 --- a/src/containers/EmailSettingsModal/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,133 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EmailSettingsModal render snapshot: emails disabled, show: false 1`] = ` - -
-

- Receive course emails? -

- - Course emails are off - -

- Course emails include important information about your course from instructors. -

- - - - -
- -`; - -exports[`EmailSettingsModal render snapshot: emails disabled, show: true 1`] = ` - -
-

- Receive course emails? -

- - Course emails are off - -

- Course emails include important information about your course from instructors. -

- - - - -
- -`; - -exports[`EmailSettingsModal render snapshot: emails enabled, show: true 1`] = ` - -
-

- Receive course emails? -

- - Course emails are on - -

- Course emails include important information about your course from instructors. -

- - - - -
- -`; diff --git a/src/containers/EmailSettingsModal/index.test.jsx b/src/containers/EmailSettingsModal/index.test.jsx index e20082f..7c87687 100644 --- a/src/containers/EmailSettingsModal/index.test.jsx +++ b/src/containers/EmailSettingsModal/index.test.jsx @@ -1,14 +1,19 @@ -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 hooks from './hooks'; import EmailSettingsModal from '.'; +import messages from './messages'; jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn(), })); +jest.unmock('@edx/frontend-platform/i18n'); +jest.unmock('@openedx/paragon'); +jest.unmock('react'); + const hookProps = { isOptedOut: true, onToggle: jest.fn().mockName('hooks.onToggle'), @@ -28,7 +33,7 @@ describe('EmailSettingsModal', () => { describe('behavior', () => { beforeEach(() => { hooks.mockReturnValueOnce(hookProps); - shallow(); + render(); }); it('calls hook w/ closeModal and cardId from props', () => { expect(hooks).toHaveBeenCalledWith({ @@ -38,20 +43,36 @@ describe('EmailSettingsModal', () => { }); }); describe('render', () => { - test('snapshot: emails disabled, show: false', () => { - hooks.mockReturnValueOnce(hookProps); - expect(shallow().snapshot).toMatchSnapshot(); + it('emails disabled, show: false', () => { + hooks.mockReturnValue(hookProps); + render(); + const modal = screen.queryByRole('dialog'); + expect(modal).toBeNull(); }); - test('snapshot: emails disabled, show: true', () => { + it('emails disabled, show: true', () => { hooks.mockReturnValueOnce(hookProps); - expect(shallow().snapshot).toMatchSnapshot(); + render(); + const modal = screen.getByRole('dialog'); + const heading = screen.getByText(messages.header.defaultMessage); + const emailsMsg = screen.getByText(messages.emailsOff.defaultMessage); + expect(modal).toBeInTheDocument(); + expect(heading).toBeInTheDocument(); + expect(emailsMsg).toBeInTheDocument(); }); - test('snapshot: emails enabled, show: true', () => { + it('emails enabled, show: true', () => { hooks.mockReturnValueOnce({ ...hookProps, isOptedOut: false, }); - expect(shallow().snapshot).toMatchSnapshot(); + render(); + const emailsMsg = screen.getByText(messages.emailsOn.defaultMessage); + const description = screen.getByText(messages.description.defaultMessage); + const buttonNeverMind = screen.getByRole('button', { name: messages.nevermind.defaultMessage }); + const buttonSave = screen.getByRole('button', { name: messages.save.defaultMessage }); + expect(emailsMsg).toBeInTheDocument(); + expect(description).toBeInTheDocument(); + expect(buttonNeverMind).toBeInTheDocument(); + expect(buttonSave).toBeInTheDocument(); }); }); });