diff --git a/src/components/executive-education-2u/ExecutiveEducation2UPage.jsx b/src/components/executive-education-2u/ExecutiveEducation2UPage.jsx
index 214ca3558..7d6616d16 100644
--- a/src/components/executive-education-2u/ExecutiveEducation2UPage.jsx
+++ b/src/components/executive-education-2u/ExecutiveEducation2UPage.jsx
@@ -5,7 +5,7 @@ import {
} from '@edx/paragon';
import { AppContext } from '@edx/frontend-platform/react';
import { logError } from '@edx/frontend-platform/logging';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import NotFoundPage from '../NotFoundPage';
import UserEnrollmentForm from './UserEnrollmentForm';
@@ -23,7 +23,7 @@ const ExecutiveEducation2UPage = () => {
const { enterpriseConfig } = useContext(AppContext);
const { redeemableLearnerCreditPolicies } = useContext(UserSubsidyContext);
const activeQueryParams = useActiveQueryParams();
- const history = useHistory();
+ const navigate = useNavigate();
const isExecEd2UFulfillmentEnabled = useMemo(() => {
const hasRequiredQueryParams = (activeQueryParams.has('course_uuid') && activeQueryParams.has('sku'));
@@ -92,12 +92,14 @@ const ExecutiveEducation2UPage = () => {
}, [contentMetadata]);
const handleCheckoutSuccess = () => {
- history.push({
- pathname: `/${enterpriseConfig.slug}/executive-education-2u/enrollment-completed`,
- state: {
- data: courseMetadata,
+ navigate(
+ `/${enterpriseConfig.slug}/executive-education-2u/enrollment-completed`,
+ {
+ state: {
+ data: courseMetadata,
+ },
},
- });
+ );
};
if (!isExecEd2UFulfillmentEnabled) {
diff --git a/src/components/executive-education-2u/ExecutiveEducation2UPage.test.jsx b/src/components/executive-education-2u/ExecutiveEducation2UPage.test.jsx
index b08a8a277..35add4bcf 100644
--- a/src/components/executive-education-2u/ExecutiveEducation2UPage.test.jsx
+++ b/src/components/executive-education-2u/ExecutiveEducation2UPage.test.jsx
@@ -80,12 +80,10 @@ jest.mock('@edx/frontend-platform/logging', () => ({
logError: jest.fn(),
}));
-const mockedPush = jest.fn();
+const mockedNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockedPush,
- }),
+ useNavigate: () => mockedNavigate,
useLocation: jest.fn(),
}));
@@ -348,9 +346,7 @@ describe('ExecutiveEducation2UPage', () => {
renderWithRouter(
);
userEvent.click(screen.getByText('Mock submit enrollment form'));
- expect(mockedPush).toHaveBeenCalledTimes(1);
- expect(mockedPush).toHaveBeenCalledWith(
- { pathname: `/${enterpriseSlug}/executive-education-2u/enrollment-completed`, state: { data: {} } },
- );
+ expect(mockedNavigate).toHaveBeenCalledTimes(1);
+ expect(mockedNavigate).toHaveBeenCalledWith(`/${enterpriseSlug}/executive-education-2u/enrollment-completed`, { state: { data: {} } });
});
});
diff --git a/src/components/license-activation/LicenseActivation.jsx b/src/components/license-activation/LicenseActivation.jsx
index 127b3de0b..4c50a265d 100644
--- a/src/components/license-activation/LicenseActivation.jsx
+++ b/src/components/license-activation/LicenseActivation.jsx
@@ -1,5 +1,5 @@
import React, { useContext, useEffect, useState } from 'react';
-import { Redirect, useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import { AppContext } from '@edx/frontend-platform/react';
import { Alert, Container } from '@edx/paragon';
@@ -38,11 +38,10 @@ const LicenseActivation = () => {
const redirectToPath = location.state?.from ?? `/${enterpriseConfig.slug}`;
return (
-
);
}
diff --git a/src/components/license-activation/LicenseActivationPage.jsx b/src/components/license-activation/LicenseActivationPage.jsx
index 9cbf07f51..df0f8f9c9 100644
--- a/src/components/license-activation/LicenseActivationPage.jsx
+++ b/src/components/license-activation/LicenseActivationPage.jsx
@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
-import { Redirect, useParams } from 'react-router-dom';
+import { Navigate, useParams } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
import { logInfo } from '@edx/frontend-platform/logging';
import { Alert } from '@edx/paragon';
@@ -30,10 +30,9 @@ const LicenseActivationPage = () => {
}
return (
-
);
}
diff --git a/src/components/license-activation/tests/LicenseActivation.test.jsx b/src/components/license-activation/tests/LicenseActivation.test.jsx
index fbc28a307..1fc6c0794 100644
--- a/src/components/license-activation/tests/LicenseActivation.test.jsx
+++ b/src/components/license-activation/tests/LicenseActivation.test.jsx
@@ -1,19 +1,32 @@
import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
import { AppContext } from '@edx/frontend-platform/react';
import '@testing-library/jest-dom/extend-expect';
import * as reactRouterDom from 'react-router-dom';
-import { Route } from 'react-router-dom';
+import {
+ Route, Routes, MemoryRouter, mockNavigate,
+} from 'react-router-dom';
import LicenseActivation, { LOADING_MESSAGE } from '../LicenseActivation';
-import { renderWithRouter } from '../../../utils/tests';
import { UserSubsidyContext } from '../../enterprise-user-subsidy/UserSubsidy';
-jest.mock('react-router-dom', () => ({
- ...jest.requireActual('react-router-dom'),
- useLocation: jest.fn(() => ({})),
-}));
+jest.mock('react-router-dom', () => {
+ const mockNavigation = jest.fn();
+
+ // eslint-disable-next-line react/prop-types
+ const Navigate = ({ to }) => {
+ mockNavigation(to);
+ return
;
+ };
+
+ return {
+ ...jest.requireActual('react-router-dom'),
+ Navigate,
+ mockNavigate: mockNavigation,
+ useLocation: jest.fn(() => ({})),
+ };
+});
const TEST_ENTERPRISE_UUID = 'test-enterprise-uuid';
const TEST_ENTERPRISE_SLUG = 'test-enterprise-slug';
@@ -35,9 +48,11 @@ const LicenseActivationWithAppContext = ({
}}
>
-
-
-
+
+
+ } />
+
+
);
@@ -49,16 +64,11 @@ describe('LicenseActivation', () => {
// For the initial state, there is no activation success or error
const mockActivateUserLicense = jest.fn();
- const { history } = renderWithRouter(
-
,
- {
- route: TEST_ROUTE,
- },
- );
+ render(
);
await waitFor(() => {
expect(mockActivateUserLicense).toHaveBeenCalledWith(false);
@@ -67,7 +77,7 @@ describe('LicenseActivation', () => {
expect(screen.queryAllByText(LOADING_MESSAGE)).toHaveLength(1);
// assert we did NOT get redirected
- expect(history.location.pathname).toEqual(TEST_ROUTE);
+ expect(mockNavigate).not.toHaveBeenCalled();
});
});
@@ -76,15 +86,12 @@ describe('LicenseActivation', () => {
new Error("Couldn't activate license"),
);
- const { history } = renderWithRouter(
+ render(
,
- {
- route: TEST_ROUTE,
- },
);
expect(mockActivateUserLicense).toHaveBeenCalledWith(false);
@@ -94,7 +101,7 @@ describe('LicenseActivation', () => {
expect(screen.getByRole('alert')).toHaveClass('alert-danger');
// assert we did NOT get redirected
- expect(history.location.pathname).toEqual(TEST_ROUTE);
+ expect(mockNavigate).not.toHaveBeenCalledWith();
});
});
@@ -108,20 +115,17 @@ describe('LicenseActivation', () => {
}
const mockActivateUserLicense = jest.fn();
- const { history } = renderWithRouter(
+ render(
,
- {
- route: TEST_ROUTE,
- },
);
await waitFor(() => {
expect(mockActivateUserLicense).toHaveBeenCalledWith(!!redirectedFrom);
- expect(history.location.pathname).toEqual(redirectedFrom ?? `/${TEST_ENTERPRISE_SLUG}`);
+ expect(mockNavigate).toHaveBeenCalledWith(redirectedFrom ?? `/${TEST_ENTERPRISE_SLUG}`);
});
});
});
diff --git a/src/components/license-activation/tests/LicenseActivationPage.test.jsx b/src/components/license-activation/tests/LicenseActivationPage.test.jsx
index 13d109302..2ba10c6ce 100644
--- a/src/components/license-activation/tests/LicenseActivationPage.test.jsx
+++ b/src/components/license-activation/tests/LicenseActivationPage.test.jsx
@@ -3,12 +3,10 @@ import { screen } from '@testing-library/react';
import { AppContext } from '@edx/frontend-platform/react';
import '@testing-library/jest-dom/extend-expect';
-import { Route } from 'react-router-dom';
-
-import { renderWithRouter } from '../../../utils/tests';
import LicenseActivationPage from '../LicenseActivationPage';
import { UserSubsidyContext } from '../../enterprise-user-subsidy';
import { LICENSE_STATUS } from '../../enterprise-user-subsidy/data/constants';
+import { renderWithRouter } from '../../../utils/tests';
const TEST_USER_ID = 1;
@@ -24,11 +22,16 @@ jest.mock('../LicenseActivationErrorAlert', () => ({
__esModule: true,
default: () => '
',
}));
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useParams: () => ({
+ activationKey: '00000000-0000-0000-0000-000000000000',
+ }),
+}));
const TEST_ENTERPRISE_UUID = 'test-enterprise-uuid';
const TEST_ENTERPRISE_SLUG = 'test-enterprise-slug';
const TEST_ACTIVATION_KEY = '00000000-0000-0000-0000-000000000000';
-const TEST_ROUTE = `/${TEST_ENTERPRISE_SLUG}/licenses/${TEST_ACTIVATION_KEY}/activate`;
const LicenseActivationPageWithContext = ({
initialUserSubsidyState = {
@@ -52,29 +55,27 @@ const LicenseActivationPageWithContext = ({
}}
>
-
-
-
+
);
describe('
', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
it.each(
[undefined, { status: LICENSE_STATUS.ACTIVATED }],
)('should redirect if the user has no license to activate', (subscriptionLicense) => {
- const { history } = renderWithRouter(
-
,
- {
- route: TEST_ROUTE,
- },
);
- expect(history.location.pathname).toEqual(`/${TEST_ENTERPRISE_SLUG}`);
+ expect(window.location.pathname).toContain(`/${TEST_ENTERPRISE_SLUG}`);
});
it('should render error alert if attempting to activate a license that does not belong to the user', () => {
@@ -86,9 +87,6 @@ describe('
', () => {
},
}}
/>,
- {
- route: TEST_ROUTE,
- },
);
expect(screen.getByText('
')).toBeInTheDocument();
@@ -103,9 +101,6 @@ describe('
', () => {
},
}}
/>,
- {
- route: TEST_ROUTE,
- },
);
expect(screen.getByText('
')).toBeInTheDocument();
});
diff --git a/src/components/my-career/AddJobRole.jsx b/src/components/my-career/AddJobRole.jsx
index c7b7c051d..caf4285a1 100644
--- a/src/components/my-career/AddJobRole.jsx
+++ b/src/components/my-career/AddJobRole.jsx
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
import {
Row, breakpoints, MediaQuery, TransitionReplace, Button, Icon,
} from '@edx/paragon';
@@ -22,17 +22,17 @@ const addIcon = () => (
);
const AddJobRole = ({ submitClickHandler }) => {
- const { state } = useLocation();
- const history = useHistory();
+ const { pathname, state } = useLocation();
+ const navigate = useNavigate();
const [isEditable, setIsEditable] = useState(false);
useEffect(() => {
if (state?.activationSuccess) {
const updatedLocationState = { ...state };
delete updatedLocationState.activationSuccess;
- history.replace({ ...history.location, state: updatedLocationState });
+ navigate(pathname, { state: updatedLocationState, replace: true });
}
- }, [history, state]);
+ }, [navigate, pathname, state]);
const addRoleClickHandler = () => {
setIsEditable(true);
diff --git a/src/components/my-career/SkillsRecommendationCourses.jsx b/src/components/my-career/SkillsRecommendationCourses.jsx
index 884fc31d7..bdbf9a6fe 100644
--- a/src/components/my-career/SkillsRecommendationCourses.jsx
+++ b/src/components/my-career/SkillsRecommendationCourses.jsx
@@ -1,7 +1,7 @@
import React, {
useContext, useMemo, useState, useEffect,
} from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import PropTypes from 'prop-types';
import { v4 as uuidv4 } from 'uuid';
import { AppContext } from '@edx/frontend-platform/react';
@@ -23,7 +23,7 @@ const SkillsRecommendationCourses = ({ index, subCategoryName, subCategorySkills
redeemableLearnerCreditPolicies,
} = useContext(UserSubsidyContext);
const { catalogsForSubsidyRequests } = useContext(SubsidyRequestsContext);
- const history = useHistory();
+ const navigate = useNavigate();
const searchCatalogs = useSearchCatalogs({
subscriptionPlan,
@@ -98,10 +98,12 @@ const SkillsRecommendationCourses = ({ index, subCategoryName, subCategorySkills
className="mt-3"
onClick={() => {
if (subCategorySkills.length > 0) {
- history.push({
- pathname: `/${enterpriseConfig.slug}/search`,
- search: `showAll=1&content_type=course&skill_names=${subCategorySkills.join('&skill_names=')}`,
- });
+ navigate(
+ `/${enterpriseConfig.slug}/search`,
+ {
+ search: `showAll=1&content_type=course&skill_names=${subCategorySkills.join('&skill_names=')}`,
+ },
+ );
}
}}
>
diff --git a/src/components/my-career/tests/AddJobRole.test.jsx b/src/components/my-career/tests/AddJobRole.test.jsx
index 8e15454f5..f02b5e8a9 100644
--- a/src/components/my-career/tests/AddJobRole.test.jsx
+++ b/src/components/my-career/tests/AddJobRole.test.jsx
@@ -20,10 +20,12 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useLocation: () => ({
+ pathname: '',
state: {
activationSuccess: true,
},
}),
+ useNavigate: () => jest.fn(),
}));
// eslint-disable-next-line no-console
diff --git a/src/components/pathway-progress/PathwayProgressCard.jsx b/src/components/pathway-progress/PathwayProgressCard.jsx
index 0732497aa..9dcd832e6 100644
--- a/src/components/pathway-progress/PathwayProgressCard.jsx
+++ b/src/components/pathway-progress/PathwayProgressCard.jsx
@@ -2,17 +2,17 @@ import React, { useContext } from 'react';
import { Card, Truncate } from '@edx/paragon';
import PropTypes from 'prop-types';
import cardFallbackImg from '@edx/brand/paragon/images/card-imagecap-fallback.png';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
import { getProgressFromSteps } from './data/utils';
import { ProgressCategoryBubbles } from '../progress-category-bubbles';
const PathwayProgressCard = ({ pathway: { learnerPathwayProgress } }) => {
const progress = getProgressFromSteps(learnerPathwayProgress.steps);
- const history = useHistory();
+ const navigate = useNavigate();
const { enterpriseConfig: { slug } } = useContext(AppContext);
const redirectToProgressDetailPage = () => {
- history.push(`/${slug}/pathway/${learnerPathwayProgress.uuid}/progress`);
+ navigate(`/${slug}/pathway/${learnerPathwayProgress.uuid}/progress`);
};
return (
({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockedPush,
- }),
+ useNavigate: () => mockedNavigate,
useLocation: jest.fn(),
}));
@@ -48,7 +45,7 @@ const userSubsidyState = {
const pathwayData = camelCaseObject(LearnerPathwayProgressData[0]);
describe('', () => {
it('renders all data related to pathway progress correctly', () => {
- const { getByAltText } = render(', () => {
});
it('redirects to correct page when clicked', () => {
- const { container } = render();
userEvent.click(container.firstElementChild);
- expect(mockedPush).toHaveBeenCalledWith('/test-enterprise-slug/pathway/0a017cbe-0f1c-4e5f-9095-2101823fac93/progress');
+ expect(mockedNavigate).toHaveBeenCalledWith('/test-enterprise-slug/pathway/0a017cbe-0f1c-4e5f-9095-2101823fac93/progress');
});
});
diff --git a/src/components/pathway-progress/tests/PathwayProgressListingPage.test.jsx b/src/components/pathway-progress/tests/PathwayProgressListingPage.test.jsx
index d1d239632..9558e011d 100644
--- a/src/components/pathway-progress/tests/PathwayProgressListingPage.test.jsx
+++ b/src/components/pathway-progress/tests/PathwayProgressListingPage.test.jsx
@@ -67,7 +67,7 @@ describe('', () => {
useInProgressPathwaysData.mockImplementation(() => ([camelCaseObject(learnerPathwayData), null]));
await act(async () => {
- render(
+ renderWithRouter(
', () => {
useInProgressPathwaysData.mockImplementation(() => ([[], null]));
await act(async () => {
- const { history } = renderWithRouter(
+ renderWithRouter(
,
);
userEvent.click(screen.getByText('Explore pathways'));
- expect(history.location.pathname).toEqual(`/${initialAppState.enterpriseConfig.slug}/search`);
- expect(history.location.search).toEqual(`?content_type=${CONTENT_TYPE_PATHWAY}`);
+ expect(window.location.pathname).toEqual(`/${initialAppState.enterpriseConfig.slug}/search`);
+ expect(window.location.search).toEqual(`?content_type=${CONTENT_TYPE_PATHWAY}`);
});
});
diff --git a/src/components/pathway/SearchPathwayCard.jsx b/src/components/pathway/SearchPathwayCard.jsx
index 96bd20dbc..67aa05587 100644
--- a/src/components/pathway/SearchPathwayCard.jsx
+++ b/src/components/pathway/SearchPathwayCard.jsx
@@ -1,7 +1,7 @@
import React, { useContext, useMemo } from 'react';
import PropTypes from 'prop-types';
import cardFallbackImg from '@edx/brand/paragon/images/card-imagecap-fallback.png';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
import { getConfig } from '@edx/frontend-platform/config';
import { camelCaseObject } from '@edx/frontend-platform/utils';
@@ -52,7 +52,7 @@ const SearchPathwayCard = ({
...rest
}) => {
const { enterpriseConfig: { uuid: enterpriseCustomerUUID, slug } } = useContext(AppContext);
- const history = useHistory();
+ const navigate = useNavigate();
const pathway = useMemo(() => {
if (!hit) {
@@ -95,7 +95,7 @@ const SearchPathwayCard = ({
pathwayUUID: pathwayUuid,
},
);
- history.push(linkToPathway);
+ navigate(linkToPathway);
};
return (
diff --git a/src/components/pathway/tests/SearchPathwayCard.test.jsx b/src/components/pathway/tests/SearchPathwayCard.test.jsx
index e3b8b6250..e1a9bea07 100644
--- a/src/components/pathway/tests/SearchPathwayCard.test.jsx
+++ b/src/components/pathway/tests/SearchPathwayCard.test.jsx
@@ -18,6 +18,12 @@ jest.mock('@edx/frontend-enterprise-utils', () => {
});
});
+const mockedNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}));
+
const SearchPathwayCardWithAppContext = (props) => (
', () => {
+ beforeEach(() => {
+ mockedNavigate.mockClear();
+ });
+
test('renders the correct data', () => {
- const { container, history } = renderWithRouter();
+ const { container } = renderWithRouter();
expect(screen.getByText(TEST_TITLE)).toBeInTheDocument();
@@ -60,8 +70,7 @@ describe('', () => {
const cardEl = screen.getByTestId('search-pathway-card');
userEvent.click(cardEl);
- expect(history.entries).toHaveLength(2);
- expect(history.location.pathname).toEqual(`/${TEST_ENTERPRISE_SLUG}/search/${TEST_PATHWAY_UUID}`);
+ expect(mockedNavigate).toHaveBeenCalledWith(`/${TEST_ENTERPRISE_SLUG}/search/${TEST_PATHWAY_UUID}`);
expect(sendEnterpriseTrackEvent).toHaveBeenCalledWith(
TEST_ENTERPRISE_UUID,
PATHWAY_SEARCH_EVENT_NAME,
@@ -72,16 +81,15 @@ describe('', () => {
});
test('handles card click', () => {
- const { history } = renderWithRouter();
+ renderWithRouter();
const cardEl = screen.getByTestId('search-pathway-card');
userEvent.click(cardEl);
- expect(history.entries).toHaveLength(2);
- expect(history.location.pathname).toEqual(`/${TEST_ENTERPRISE_SLUG}/search/${TEST_PATHWAY_UUID}`);
+ expect(mockedNavigate).toHaveBeenCalledWith(`/${TEST_ENTERPRISE_SLUG}/search/${TEST_PATHWAY_UUID}`);
});
test('renders the correct data when clicked from skills quiz page', () => {
const propsForSkillQuiz = { ...defaultProps, isSkillQuizResult: true };
- const { container, history } = renderWithRouter();
+ const { container } = renderWithRouter();
expect(screen.getByText(TEST_TITLE)).toBeInTheDocument();
@@ -94,8 +102,7 @@ describe('', () => {
const cardEl = screen.getByTestId('search-pathway-card');
userEvent.click(cardEl);
- expect(history.entries).toHaveLength(2);
- expect(history.location.pathname).toEqual(`/${TEST_ENTERPRISE_SLUG}/search/${TEST_PATHWAY_UUID}`);
+ expect(mockedNavigate).toHaveBeenCalledWith(`/${TEST_ENTERPRISE_SLUG}/search/${TEST_PATHWAY_UUID}`);
expect(sendEnterpriseTrackEvent).toHaveBeenCalledWith(
TEST_ENTERPRISE_UUID,
PATHWAY_SKILL_QUIZ_EVENT_NAME,
@@ -123,7 +130,7 @@ describe('', () => {
});
test('renders the loading state', () => {
- const { container, history } = renderWithRouter();
+ const { container } = renderWithRouter();
// ensure `Card` was passed `isLoading` by asserting each `Card` subcomponent
// is treated as a skeleton instead, indicated by `aria-busy="true"`.
@@ -132,6 +139,6 @@ describe('', () => {
// does not do anything when clicked
const cardEl = screen.getByTestId('search-pathway-card');
userEvent.click(cardEl);
- expect(history.entries).toHaveLength(1);
+ expect(mockedNavigate).not.toHaveBeenCalled();
});
});
diff --git a/src/components/program-progress/ProgramListingCard.jsx b/src/components/program-progress/ProgramListingCard.jsx
index 2642c05fa..64532475c 100644
--- a/src/components/program-progress/ProgramListingCard.jsx
+++ b/src/components/program-progress/ProgramListingCard.jsx
@@ -4,7 +4,7 @@ import {
import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import cardFallbackImg from '@edx/brand/paragon/images/card-imagecap-fallback.png';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
@@ -14,10 +14,10 @@ import { ProgressCategoryBubbles } from '../progress-category-bubbles';
const ProgramListingCard = ({ program }) => {
const { enterpriseConfig } = useContext(AppContext);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
- const history = useHistory();
+ const navigate = useNavigate();
const handleCardClick = () => {
- history.push(`/${enterpriseConfig.slug}/program/${program.uuid}/progress`);
+ navigate(`/${enterpriseConfig.slug}/program/${program.uuid}/progress`);
};
useEffect(() => {
diff --git a/src/components/program-progress/ProgramProgressRedirect.jsx b/src/components/program-progress/ProgramProgressRedirect.jsx
index 2673263ff..acd1d8900 100644
--- a/src/components/program-progress/ProgramProgressRedirect.jsx
+++ b/src/components/program-progress/ProgramProgressRedirect.jsx
@@ -1,12 +1,12 @@
import React, { useContext } from 'react';
-import { Redirect, useParams } from 'react-router-dom';
+import { Navigate, useParams } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
const ProgramProgressRedirect = () => {
const { enterpriseConfig } = useContext(AppContext);
const { programUUID } = useParams();
- return ;
+ return ;
};
export default ProgramProgressRedirect;
diff --git a/src/components/program-progress/tests/ProgramListingCard.test.jsx b/src/components/program-progress/tests/ProgramListingCard.test.jsx
index 85d197cd0..047c6061a 100644
--- a/src/components/program-progress/tests/ProgramListingCard.test.jsx
+++ b/src/components/program-progress/tests/ProgramListingCard.test.jsx
@@ -10,12 +10,10 @@ import { UserSubsidyContext } from '../../enterprise-user-subsidy';
import ProgramListingCard from '../ProgramListingCard';
-const mockedPush = jest.fn();
+const mockedNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
- useHistory: () => ({
- push: mockedPush,
- }),
+ useNavigate: () => mockedNavigate,
useLocation: jest.fn(),
}));
@@ -139,6 +137,6 @@ describe('', () => {
programData={dummyProgramData}
/>);
userEvent.click(container.firstElementChild);
- expect(mockedPush).toHaveBeenCalledWith('/test-enterprise-slug/program/test-uuid/progress');
+ expect(mockedNavigate).toHaveBeenCalledWith('/test-enterprise-slug/program/test-uuid/progress');
});
});
diff --git a/src/components/program-progress/tests/ProgramListingPage.test.jsx b/src/components/program-progress/tests/ProgramListingPage.test.jsx
index 23fbdde4d..96f2bc46e 100644
--- a/src/components/program-progress/tests/ProgramListingPage.test.jsx
+++ b/src/components/program-progress/tests/ProgramListingPage.test.jsx
@@ -150,15 +150,15 @@ describe('', () => {
useLearnerProgramsListData.mockImplementation(() => ([[], null]));
await act(async () => {
- const { history } = renderWithRouter(
+ renderWithRouter(
,
);
userEvent.click(screen.getByText('Explore programs'));
- expect(history.location.pathname).toEqual(`/${initialAppState.enterpriseConfig.slug}/search`);
- expect(history.location.search).toEqual(`?content_type=${CONTENT_TYPE_PROGRAM}`);
+ expect(window.location.pathname).toEqual(`/${initialAppState.enterpriseConfig.slug}/search`);
+ expect(window.location.search).toEqual(`?content_type=${CONTENT_TYPE_PROGRAM}`);
});
});
diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx
index 3d0fe7e82..81a8244db 100644
--- a/src/components/search/Search.jsx
+++ b/src/components/search/Search.jsx
@@ -1,7 +1,7 @@
import React, {
useContext, useMemo, useEffect,
} from 'react';
-import { useParams, useHistory } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import { Configure, InstantSearch } from 'react-instantsearch-dom';
import { AppContext } from '@edx/frontend-platform/react';
@@ -44,7 +44,7 @@ import { determineLearnerHasContentAssignmentsOnly } from '../enterprise-user-su
const Search = () => {
const config = getConfig();
const { pathwayUUID } = useParams();
- const history = useHistory();
+ const navigate = useNavigate();
const { refinements } = useContext(SearchContext);
const [isLearnerPathwayModalOpen, openLearnerPathwayModal, onClose] = useToggle(false);
const { enterpriseConfig, algolia } = useContext(AppContext);
@@ -168,7 +168,7 @@ const Search = () => {
learnerPathwayUuid={pathwayUUID}
isOpen={isLearnerPathwayModalOpen}
onClose={() => {
- history.push(`/${enterpriseConfig.slug}/search`);
+ navigate(`/${enterpriseConfig.slug}/search`);
onClose();
}}
/>
diff --git a/src/components/search/SearchCourseCard.jsx b/src/components/search/SearchCourseCard.jsx
index 217c36944..61545182a 100644
--- a/src/components/search/SearchCourseCard.jsx
+++ b/src/components/search/SearchCourseCard.jsx
@@ -1,7 +1,7 @@
import React, { useContext, useMemo } from 'react';
import PropTypes from 'prop-types';
import cardFallbackImg from '@edx/brand/paragon/images/card-imagecap-fallback.png';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
import { getConfig } from '@edx/frontend-platform/config';
import { camelCaseObject } from '@edx/frontend-platform/utils';
@@ -16,7 +16,7 @@ const SearchCourseCard = ({
key, hit, isLoading, parentRoute, ...rest
}) => {
const { enterpriseConfig: { slug, uuid } } = useContext(AppContext);
- const history = useHistory();
+ const navigate = useNavigate();
const eventName = useMemo(
() => {
@@ -86,8 +86,7 @@ const SearchCourseCard = ({
courseKey: course.key,
},
);
-
- history.push(linkToCourse, { parentRoute });
+ navigate(linkToCourse, { state: parentRoute });
};
return (
diff --git a/src/components/search/SearchProgramCard.jsx b/src/components/search/SearchProgramCard.jsx
index 48e051ce3..ab6310344 100644
--- a/src/components/search/SearchProgramCard.jsx
+++ b/src/components/search/SearchProgramCard.jsx
@@ -1,7 +1,7 @@
import React, { useContext, useMemo } from 'react';
import PropTypes from 'prop-types';
import cardFallbackImg from '@edx/brand/paragon/images/card-imagecap-fallback.png';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
import { camelCaseObject } from '@edx/frontend-platform/utils';
import {
@@ -37,7 +37,7 @@ export const ProgramType = ({ type }) => {
};
const SearchProgramCard = ({ hit, isLoading, ...rest }) => {
- const history = useHistory();
+ const navigate = useNavigate();
const { enterpriseConfig: { slug, uuid }, authenticatedUser: { userId } } = useContext(AppContext);
const program = useMemo(() => {
if (!hit) {
@@ -90,7 +90,7 @@ const SearchProgramCard = ({ hit, isLoading, ...rest }) => {
programUuid,
},
);
- history.push(linkToProgram);
+ navigate(linkToProgram);
};
return (
diff --git a/src/components/search/content-highlights/HighlightedContentCard.jsx b/src/components/search/content-highlights/HighlightedContentCard.jsx
index d0fdf68dc..a2acc24d0 100644
--- a/src/components/search/content-highlights/HighlightedContentCard.jsx
+++ b/src/components/search/content-highlights/HighlightedContentCard.jsx
@@ -1,6 +1,6 @@
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
import { Card, Truncate } from '@edx/paragon';
import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
@@ -20,7 +20,7 @@ const HighlightedContentCard = ({
uuid: enterpriseUUID,
},
} = useContext(AppContext);
- const history = useHistory();
+ const navigate = useNavigate();
const {
variant,
@@ -40,7 +40,7 @@ const HighlightedContentCard = ({
// do nothing
return;
}
- history.push(href);
+ navigate(href);
sendEnterpriseTrackEvent(
enterpriseUUID,
'edx.ui.enterprise.learner_portal.search.content_highlights.card_carousel.item.clicked',
diff --git a/src/components/search/content-highlights/tests/ContentHighlightSet.test.jsx b/src/components/search/content-highlights/tests/ContentHighlightSet.test.jsx
index 6544e3d9d..9fcaa921c 100644
--- a/src/components/search/content-highlights/tests/ContentHighlightSet.test.jsx
+++ b/src/components/search/content-highlights/tests/ContentHighlightSet.test.jsx
@@ -1,9 +1,10 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { AppContext } from '@edx/frontend-platform/react';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import ContentHighlightSet from '../ContentHighlightSet';
+import { renderWithRouter } from '../../../../utils/tests';
const defaultAppContextValue = {
enterpriseConfig: { uuid: 'test-uuid' },
@@ -43,7 +44,7 @@ describe('ContentHighlightSet', () => {
});
it('renders stuff', () => {
- render();
+ renderWithRouter();
expect(screen.getByText(mockHighlightSetTitle)).toBeInTheDocument();
expect(screen.getByText(mockHighlightedContentItemTitle)).toBeInTheDocument();
diff --git a/src/components/search/tests/SearchCourseCard.test.jsx b/src/components/search/tests/SearchCourseCard.test.jsx
index 5ef891e27..1f57c7333 100644
--- a/src/components/search/tests/SearchCourseCard.test.jsx
+++ b/src/components/search/tests/SearchCourseCard.test.jsx
@@ -10,6 +10,12 @@ import * as courseSearchUtils from '../utils';
import { renderWithRouter } from '../../../utils/tests';
import { TEST_ENTERPRISE_SLUG, TEST_IMAGE_URL } from './constants';
+const mockedNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}));
+
const SearchCourseCardWithAppContext = (props) => (
', () => {
+ beforeEach(() => {
+ mockedNavigate.mockClear();
+ });
+
test('renders the correct data', () => {
const { container } = renderWithRouter();
@@ -60,15 +70,14 @@ describe('', () => {
});
test('handles card click', () => {
- const { history } = renderWithRouter();
+ renderWithRouter();
const cardEl = screen.getByTestId('search-course-card');
userEvent.click(cardEl);
- expect(history.entries).toHaveLength(2);
- expect(history.location.pathname).toEqual(`/${TEST_ENTERPRISE_SLUG}/course/${TEST_COURSE_KEY}`);
+ expect(mockedNavigate).toHaveBeenCalledWith(`/${TEST_ENTERPRISE_SLUG}/course/${TEST_COURSE_KEY}?`, { state: undefined });
});
test('renders the loading state', () => {
- const { container, history } = renderWithRouter();
+ const { container } = renderWithRouter();
// ensure `Card` was passed `isLoading` by asserting each `Card` subcomponent
// is treated as a skeleton instead, indicated by `aria-busy="true"`.
@@ -77,7 +86,7 @@ describe('', () => {
// does not do anything when clicked
const cardEl = screen.getByTestId('search-course-card');
userEvent.click(cardEl);
- expect(history.entries).toHaveLength(1);
+ expect(mockedNavigate).not.toHaveBeenCalled();
});
test('render course_length field in place of course text', () => {
diff --git a/src/components/search/tests/SearchProgramCard.test.jsx b/src/components/search/tests/SearchProgramCard.test.jsx
index c1af6fb0c..3ff691525 100644
--- a/src/components/search/tests/SearchProgramCard.test.jsx
+++ b/src/components/search/tests/SearchProgramCard.test.jsx
@@ -16,6 +16,12 @@ jest.mock('@edx/frontend-enterprise-utils', () => ({
sendEnterpriseTrackEvent: jest.fn(),
}));
+const mockedNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}));
+
const SearchProgramCardWithAppContext = (props) => (
', () => {
});
test('handles card click', () => {
- const { history } = renderWithRouter();
+ renderWithRouter();
const cardEl = screen.getByTestId('search-program-card');
userEvent.click(cardEl);
- expect(history.entries).toHaveLength(2);
- expect(history.location.pathname).toEqual(`/${TEST_ENTERPRISE_SLUG}/program/${PROGRAM_UUID}`);
+ expect(mockedNavigate).toHaveBeenCalledWith(`/${TEST_ENTERPRISE_SLUG}/program/${PROGRAM_UUID}`);
});
test.each(Object.keys(programTypes))('renders the correct program type: %s', (type) => {
diff --git a/src/components/site-header/SiteHeaderLogos.jsx b/src/components/site-header/SiteHeaderLogos.jsx
index 0669f67f3..04d9019c2 100644
--- a/src/components/site-header/SiteHeaderLogos.jsx
+++ b/src/components/site-header/SiteHeaderLogos.jsx
@@ -1,12 +1,12 @@
import React, { useContext } from 'react';
-import { Link, useRouteMatch } from 'react-router-dom';
+import { Link, useMatch } from 'react-router-dom';
import edXLogo from '@edx/brand/logo.svg';
import { Stack } from '@edx/paragon';
import { AppContext } from '@edx/frontend-platform/react';
import { COURSE_TYPE_PARTNER_LOGOS } from '../course/data/constants';
const SiteHeaderLogos = () => {
- const courseTypeMatch = useRouteMatch('/:enterpriseSlug/:courseType');
+ const courseTypeMatch = useMatch('/:enterpriseSlug/:courseType/*');
const courseType = courseTypeMatch?.params?.courseType;
const { enterpriseConfig } = useContext(AppContext);
const courseTypePartnerLogo = courseType && COURSE_TYPE_PARTNER_LOGOS[courseType];
diff --git a/src/components/site-header/SiteHeaderNavMenu.jsx b/src/components/site-header/SiteHeaderNavMenu.jsx
index a4843b10f..37a0cc94d 100644
--- a/src/components/site-header/SiteHeaderNavMenu.jsx
+++ b/src/components/site-header/SiteHeaderNavMenu.jsx
@@ -12,10 +12,10 @@ const SiteHeaderNavMenu = () => {
return (
<>
-
+
Dashboard
-
+
Find a Course
diff --git a/src/components/site-header/tests/SiteHeader.test.jsx b/src/components/site-header/tests/SiteHeader.test.jsx
index 3b89cd0a2..0c8eb6e64 100644
--- a/src/components/site-header/tests/SiteHeader.test.jsx
+++ b/src/components/site-header/tests/SiteHeader.test.jsx
@@ -1,10 +1,11 @@
import React from 'react';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { breakpoints } from '@edx/paragon';
import userEvent from '@testing-library/user-event';
import { AppContext } from '@edx/frontend-platform/react';
+import { MemoryRouter } from 'react-router-dom';
import SiteHeader from '../SiteHeader';
import { renderWithRouter } from '../../../utils/tests';
@@ -103,11 +104,10 @@ describe('', () => {
}])('renders getSmarter logo when on /executive-education-2u path', ({
route,
}) => {
- renderWithRouter(
- ,
- {
- route,
- },
+ render(
+
+ ,
+ ,
);
const getSmarterLogo = screen.queryByTestId('partner-header-logo-image-id');
diff --git a/src/components/skills-quiz-v2/SkillsQuiz.jsx b/src/components/skills-quiz-v2/SkillsQuiz.jsx
index 6ea4293ca..c32547ec5 100644
--- a/src/components/skills-quiz-v2/SkillsQuiz.jsx
+++ b/src/components/skills-quiz-v2/SkillsQuiz.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
import {
ModalDialog, useToggle, ActionRow, Button,
} from '@edx/paragon';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { useContext } from 'react';
import {
SKILL_BUILDER_TITLE,
@@ -20,11 +20,11 @@ import headerImage from '../skills-quiz/images/headerImage.png';
const SkillsQuizV2 = ({ isStyleAutoSuggest }) => {
const { enterpriseConfig } = useContext(AppContext);
- const history = useHistory();
+ const navigate = useNavigate();
const [isOpen, open, close] = useToggle(false);
const handleExit = () => {
- history.push(`/${enterpriseConfig.slug}/search`);
+ navigate(`/${enterpriseConfig.slug}/search`);
};
const TITLE = `edx - ${SKILL_BUILDER_TITLE}`;
diff --git a/src/components/skills-quiz/CourseCard.jsx b/src/components/skills-quiz/CourseCard.jsx
index bea9c6c2d..04c66629e 100644
--- a/src/components/skills-quiz/CourseCard.jsx
+++ b/src/components/skills-quiz/CourseCard.jsx
@@ -2,7 +2,7 @@ import React, { useContext, useMemo } from 'react';
import {
Badge, Card, Stack, Truncate,
} from '@edx/paragon';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
import PropTypes from 'prop-types';
import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
@@ -17,7 +17,7 @@ import { MAX_VISIBLE_SKILLS_COURSE, SKILL_NAME_CUTOFF_LIMIT } from './constants'
const CourseCard = ({
isLoading, course, allSkills,
}) => {
- const history = useHistory();
+ const navigate = useNavigate();
const { enterpriseConfig, authenticatedUser: { userId } } = useContext(AppContext);
const { slug, uuid } = enterpriseConfig;
const partnerDetails = useMemo(() => {
@@ -45,7 +45,7 @@ const CourseCard = ({
{ userId, enterprise: slug, selectedCourse: course.key },
);
- history.push(linkToCourse(course, slug));
+ navigate(linkToCourse(course, slug));
};
return (
diff --git a/src/components/skills-quiz/SearchProgramCard.jsx b/src/components/skills-quiz/SearchProgramCard.jsx
index fc3c9c590..91b50eb06 100644
--- a/src/components/skills-quiz/SearchProgramCard.jsx
+++ b/src/components/skills-quiz/SearchProgramCard.jsx
@@ -3,7 +3,7 @@ import React, {
} from 'react';
import PropTypes from 'prop-types';
import { v4 as uuidv4 } from 'uuid';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
import { camelCaseObject } from '@edx/frontend-platform/utils';
import {
@@ -33,7 +33,7 @@ const linkToProgram = (program, slug, enterpriseUUID, programUuid) => {
};
const SearchProgramCard = ({ index }) => {
- const history = useHistory();
+ const navigate = useNavigate();
const { enterpriseConfig, authenticatedUser: { userId } } = useContext(AppContext);
const { slug, uuid } = enterpriseConfig;
const {
@@ -159,7 +159,7 @@ const SearchProgramCard = ({ index }) => {
programUuid: programUuids[program.aggregationKey].uuid,
},
);
- history.push(url);
+ navigate(url);
};
if (hitCount === 0) {
diff --git a/src/components/skills-quiz/SkillsQuizPage.jsx b/src/components/skills-quiz/SkillsQuizPage.jsx
index 9e9e3dc0f..7ee088e1f 100644
--- a/src/components/skills-quiz/SkillsQuizPage.jsx
+++ b/src/components/skills-quiz/SkillsQuizPage.jsx
@@ -1,14 +1,14 @@
import React from 'react';
import { getConfig } from '@edx/frontend-platform/config';
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
import SkillsQuiz from './SkillsQuiz';
const SkillsQuizPage = () => {
const config = getConfig();
if (!config.ENABLE_SKILLS_QUIZ) {
- return ;
+ return ;
}
return ;
};
diff --git a/src/components/skills-quiz/SkillsQuizStepper.jsx b/src/components/skills-quiz/SkillsQuizStepper.jsx
index 57b250898..513106635 100644
--- a/src/components/skills-quiz/SkillsQuizStepper.jsx
+++ b/src/components/skills-quiz/SkillsQuizStepper.jsx
@@ -13,7 +13,7 @@ import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch-dom';
import { getConfig } from '@edx/frontend-platform/config';
import { SearchContext } from '@edx/frontend-enterprise-catalog-search';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
@@ -77,7 +77,7 @@ const SkillsQuizStepper = ({ isStyleAutoSuggest }) => {
const { name: jobs, current_job: currentJob } = refinements;
const { enterpriseConfig, authenticatedUser: { userId } } = useContext(AppContext);
- const history = useHistory();
+ const navigate = useNavigate();
const goalNotDefault = goal !== GOAL_DROPDOWN_DEFAULT_OPTION;
const goalExceptImproveAndJobSelected = goalNotDefault && checkValidGoalAndJobSelected(goal, jobs, false);
@@ -85,7 +85,7 @@ const SkillsQuizStepper = ({ isStyleAutoSuggest }) => {
const canContinueToRecommendedCourses = goalExceptImproveAndJobSelected || improveGoalAndCurrentJobSelected;
const closeSkillsQuiz = () => {
- history.push(`/${enterpriseConfig.slug}/search`);
+ navigate(`/${enterpriseConfig.slug}/search`);
sendEnterpriseTrackEvent(
enterpriseConfig.uuid,
'edx.ui.enterprise.learner_portal.skills_quiz.done.clicked',
diff --git a/src/components/skills-quiz/tests/SearchCourseCard.test.jsx b/src/components/skills-quiz/tests/SearchCourseCard.test.jsx
index 2238e50ba..30fbb3bdc 100644
--- a/src/components/skills-quiz/tests/SearchCourseCard.test.jsx
+++ b/src/components/skills-quiz/tests/SearchCourseCard.test.jsx
@@ -19,6 +19,12 @@ jest.mock('@edx/frontend-enterprise-utils', () => ({
sendEnterpriseTrackEvent: jest.fn(),
}));
+const mockedNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}));
+
const TEST_COURSE_KEY = 'test-course-key';
const TEST_TITLE = 'Test Title';
const TEST_CARD_IMG_URL = 'https://fake.image';
@@ -118,7 +124,7 @@ const SearchCourseCardWithContext = ({
describe('', () => {
test('renders the correct data', async () => {
- const { container, history } = renderWithRouter(
+ const { container } = renderWithRouter(
,
@@ -140,8 +146,7 @@ describe('', () => {
// handles click
userEvent.click(searchCourseCard);
- expect(history.entries).toHaveLength(2);
- expect(history.location.pathname).toContain(`${TEST_ENTERPRISE_SLUG}/course/${TEST_COURSE_KEY}`);
+ expect(mockedNavigate).toHaveBeenCalledWith(`/${TEST_ENTERPRISE_SLUG}/course/${TEST_COURSE_KEY}`);
});
test('renders the correct data with skills', async () => {
diff --git a/src/components/skills-quiz/tests/SearchProgramCard.test.jsx b/src/components/skills-quiz/tests/SearchProgramCard.test.jsx
index 332b7e86d..3dc36415e 100644
--- a/src/components/skills-quiz/tests/SearchProgramCard.test.jsx
+++ b/src/components/skills-quiz/tests/SearchProgramCard.test.jsx
@@ -21,6 +21,12 @@ jest.mock('@edx/frontend-enterprise-utils', () => ({
sendEnterpriseTrackEvent: jest.fn(),
}));
+const mockedNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}));
+
const PROGRAM_UUID = 'a9cbdeb6-5fc0-44ef-97f7-9ed605a149db';
const PROGRAM_TITLE = 'Intro to BatVerse';
const PROGRAM_TYPE_DISPLAYED = 'MicroMasters® Program';
@@ -128,7 +134,7 @@ const SearchProgramCardWithContext = ({
describe('', () => {
test('renders the correct data', async () => {
- const { container, history } = renderWithRouter(
+ const { container } = renderWithRouter(
,
@@ -152,8 +158,7 @@ describe('', () => {
// handles click
userEvent.click(searchProgramCard);
- expect(history.entries).toHaveLength(2);
- expect(history.location.pathname).toContain(`${TEST_ENTERPRISE_SLUG}/program/${PROGRAM_UUID}`);
+ expect(mockedNavigate).toHaveBeenCalledWith(`/${TEST_ENTERPRISE_SLUG}/program/${PROGRAM_UUID}`);
});
test('renders the correct data with skills', async () => {
diff --git a/src/components/skills-quiz/tests/SkillsCourses.test.jsx b/src/components/skills-quiz/tests/SkillsCourses.test.jsx
index ccf94243f..59ed172cb 100644
--- a/src/components/skills-quiz/tests/SkillsCourses.test.jsx
+++ b/src/components/skills-quiz/tests/SkillsCourses.test.jsx
@@ -117,7 +117,7 @@ const SkillsCoursesWithContext = ({
describe('', () => {
test('renders the correct data', async () => {
- const { container, history } = renderWithRouter(
+ const { container } = renderWithRouter(
,
@@ -137,8 +137,7 @@ describe('', () => {
});
userEvent.click(screen.getByTestId('skills-quiz-course-card'));
- expect(history.entries).toHaveLength(2);
- expect(history.location.pathname).toContain(`/${TEST_ENTERPRISE_SLUG}/course/${TEST_COURSE_KEY}`);
+ expect(window.location.pathname).toContain(`/${TEST_ENTERPRISE_SLUG}/course/${TEST_COURSE_KEY}`);
});
test('renders an alert in case of no courses returned', async () => {
diff --git a/src/utils/tests.jsx b/src/utils/tests.jsx
index 032c831c2..f773188f3 100644
--- a/src/utils/tests.jsx
+++ b/src/utils/tests.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import dayjs from 'dayjs';
// eslint-disable-next-line import/no-extraneous-dependencies