richie-education 2.25.0-b2.dev124 → 2.25.0-b2.dev127

package/js/hooks/useUnionResource/index.spec.tsx

@@ -1,19 +1,13 @@
 import { renderHook, act, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
 import fetchMock from 'fetch-mock';
-import { PropsWithChildren } from 'react';
+import queryString from 'query-string';
 import { PaginatedResourceQuery } from 'types/Joanie';
-import { History, HistoryContext } from 'hooks/useHistory';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { SessionProvider } from 'contexts/SessionContext';
 import { Deferred } from 'utils/test/deferred';
-
 import { noop } from 'utils';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { PER_PAGE } from 'settings';
 import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
-import { FetchEntityData } from './utils/fetchEntities';
+import { BaseAppWrapper } from 'utils/test/wrappers/BaseAppWrapper';
 import { QueryConfig, FetchDataFunction } from './utils/fetchEntity';
 import useUnionResource from '.';
 
@@ -37,49 +31,6 @@ interface TestDataB {
   created_on: string;
 }
 
-const renderUseUnionResource = <
-  DataA extends FetchEntityData,
-  DataB extends FetchEntityData,
-  FiltersA extends PaginatedResourceQuery,
-  FiltersB extends PaginatedResourceQuery,
->(
-  queryAConfig: QueryConfig<DataA, FiltersA>,
-  queryBConfig: QueryConfig<DataB, FiltersB>,
-) => {
-  const Wrapper = ({ client, children }: PropsWithChildren<{ client?: QueryClient }>) => {
-    const historyPushState = jest.fn();
-    const historyReplaceState = jest.fn();
-    const makeHistoryOf: (params: any) => History = () => [
-      {
-        state: { name: '', data: {} },
-        title: '',
-        url: `/`,
-      },
-      historyPushState,
-      historyReplaceState,
-    ];
-
-    return (
-      <QueryClientProvider client={client ?? createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <HistoryContext.Provider value={makeHistoryOf({})}>
-            <SessionProvider>{children}</SessionProvider>
-          </HistoryContext.Provider>
-        </IntlProvider>
-      </QueryClientProvider>
-    );
-  };
-
-  return renderHook(
-    () =>
-      useUnionResource<DataA, DataB, FiltersA, FiltersB>({
-        queryAConfig,
-        queryBConfig,
-      }),
-    { wrapper: Wrapper },
-  );
-};
-
 describe('useUnionResource', () => {
   const perPage = PER_PAGE.useUnionResources;
   let dataAList: TestDataA[];
@@ -111,14 +62,14 @@ describe('useUnionResource', () => {
 
       { name: 'TestDataB', id: '14', created_on: '2022-12-03' },
     ];
-    const dummyFetchWrapper = async (url: string) => {
-      const res = await fetch(url);
+    const dummyFetchWrapper = async (url: string, queryParams: { [key: string]: any }) => {
+      const res = await fetch(`${url}?${queryString.stringify(queryParams)}`);
       return res.json();
     };
-    const fetchDataA = ({ page }: { page: number }) =>
-      dummyFetchWrapper(`http://data.a/?page=${page}`);
+    const fetchDataA = ({ page, isFiltered }: { page: number; isFiltered?: boolean }) =>
+      dummyFetchWrapper('http://data.a/', { page, isFiltered });
     const fetchDataB = ({ page }: { page: number }) =>
-      dummyFetchWrapper(`http://data.b/?page=${page}`);
+      dummyFetchWrapper('http://data.b/', { page });
 
     queryAConfig = {
       queryKey: ['resourceA'],
@@ -132,11 +83,6 @@ describe('useUnionResource', () => {
     };
   });
 
-  afterEach(() => {
-    jest.clearAllMocks();
-    fetchMock.restore();
-  });
-
   it('should handle loading state', async () => {
     const dataADeferred = new Deferred();
     const dataBDeferred = new Deferred();
@@ -144,12 +90,16 @@ describe('useUnionResource', () => {
     const pendingDataBPromise = () => dataBDeferred.promise;
     queryAConfig.fn = pendingDataAPromise as FetchDataFunction<TestDataA, TestDataAFilters>;
     queryBConfig.fn = pendingDataBPromise as FetchDataFunction<TestDataB, PaginatedResourceQuery>;
-    const { result } = renderUseUnionResource<
-      TestDataA,
-      TestDataB,
-      TestDataAFilters,
-      PaginatedResourceQuery
-    >(queryAConfig, queryBConfig);
+
+    const { result } = renderHook(
+      () =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig,
+          queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
+
     expect(result.current.isLoading).toBe(true);
     expect(result.current.hasMore).toBe(false);
 
@@ -164,12 +114,15 @@ describe('useUnionResource', () => {
   it('should render less than 1 page of dataA', async () => {
     fetchMock.get('http://data.a/?page=1', mockPaginatedResponse([dataAList[0]], 1, false));
     fetchMock.get('http://data.b/?page=1', mockPaginatedResponse([], 0, false));
-    const { result } = renderUseUnionResource<
-      TestDataA,
-      TestDataB,
-      TestDataAFilters,
-      PaginatedResourceQuery
-    >(queryAConfig, queryBConfig);
+
+    const { result } = renderHook(
+      () =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig,
+          queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
     expect(result.current.hasMore).toBe(false);
@@ -180,12 +133,15 @@ describe('useUnionResource', () => {
   it('should render less than 1 page of dataB', async () => {
     fetchMock.get('http://data.a/?page=1', mockPaginatedResponse([], 0, false));
     fetchMock.get('http://data.b/?page=1', mockPaginatedResponse([dataBList[0]], 1, false));
-    const { result } = renderUseUnionResource<
-      TestDataA,
-      TestDataB,
-      TestDataAFilters,
-      PaginatedResourceQuery
-    >(queryAConfig, queryBConfig);
+
+    const { result } = renderHook(
+      () =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig,
+          queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
     expect(result.current.hasMore).toBe(false);
@@ -196,12 +152,15 @@ describe('useUnionResource', () => {
   it('should renders less than 1 page of both dataA and dataB', async () => {
     fetchMock.get('http://data.a/?page=1', mockPaginatedResponse([dataAList[0]], 1, false));
     fetchMock.get('http://data.b/?page=1', mockPaginatedResponse([dataBList[0]], 1, false));
-    const { result } = renderUseUnionResource<
-      TestDataA,
-      TestDataB,
-      TestDataAFilters,
-      PaginatedResourceQuery
-    >(queryAConfig, queryBConfig);
+
+    const { result } = renderHook(
+      () =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig,
+          queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
     expect(result.current.hasMore).toBe(false);
@@ -237,12 +196,14 @@ describe('useUnionResource', () => {
       mockPaginatedResponse(dataBList.slice(perPage * 2, perPage * 3), dataAList.length, false),
     );
 
-    const { result } = renderUseUnionResource<
-      TestDataA,
-      TestDataB,
-      TestDataAFilters,
-      PaginatedResourceQuery
-    >(queryAConfig, queryBConfig);
+    const { result } = renderHook(
+      () =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig,
+          queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
     expect(result.current.hasMore).toBe(true);
@@ -297,12 +258,16 @@ describe('useUnionResource', () => {
     const dataADeferred = new Deferred();
     const pendingDataAPromise = () => dataADeferred.promise;
     queryAConfig.fn = pendingDataAPromise as FetchDataFunction<TestDataA, TestDataAFilters>;
-    const { result } = renderUseUnionResource<
-      TestDataA,
-      TestDataB,
-      TestDataAFilters,
-      PaginatedResourceQuery
-    >(queryAConfig, queryBConfig);
+
+    const { result } = renderHook(
+      () =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig,
+          queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
+
     expect(result.current.isLoading).toBe(true);
 
     await act(() => {
@@ -313,4 +278,40 @@ describe('useUnionResource', () => {
     expect(result.current.isLoading).toBe(false);
     expect(result.current.error).toBe('An error occurred while fetching data. Please retry later.');
   });
+
+  it('should refetch data when filters change', async () => {
+    fetchMock.get('http://data.a/?page=1', mockPaginatedResponse([dataAList[0]], 1, false));
+    fetchMock.get('http://data.b/?page=1', mockPaginatedResponse([], 0, false));
+
+    const { result, rerender } = renderHook(
+      (queries: {
+        queryA?: QueryConfig<TestDataA, TestDataAFilters>;
+        queryB?: QueryConfig<TestDataB, PaginatedResourceQuery>;
+      }) =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig: queries?.queryA || queryAConfig,
+          queryBConfig: queries?.queryB || queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    let calledUrls = fetchMock.calls().map((call) => call[0]);
+    expect(calledUrls).toHaveLength(2);
+    expect(calledUrls).toContain('http://data.a/?page=1');
+    expect(calledUrls).toContain('http://data.b/?page=1');
+
+    queryAConfig.filters = { isFiltered: true };
+    fetchMock.get(
+      'http://data.a/?isFiltered=true&page=1',
+      mockPaginatedResponse([dataAList[0]], 1, false),
+    );
+    rerender({ queryA: queryAConfig, queryB: queryBConfig });
+    expect(result.current.isLoading).toBe(true);
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    calledUrls = fetchMock.calls().map((call) => call[0]);
+    expect(calledUrls).toHaveLength(4);
+    expect(calledUrls).toContain('http://data.a/?isFiltered=true&page=1');
+  });
 });

package/js/hooks/useUnionResource/index.ts

@@ -90,6 +90,8 @@ const useUnionResource = <
   const eofRef = useRef<Record<string, number>>(queryClient.getQueryData(eofQueryKey) ?? {});
   log('eof', eofRef.current);
 
+  const [unionQueryKey, setUnionQueryKey] = useState<string>();
+
   const reset = () => {
     setStack([]);
     setPage(0);
@@ -104,6 +106,18 @@ const useUnionResource = <
     useQueryKeyInvalidateListener(queryBConfig.queryKey, reset);
   }
 
+  useEffect(() => {
+    // filters have changes, new results will be fetch.
+    // let's reset every previous fetches states
+    reset();
+
+    // We need to fetch new results.
+    // reset all states isn't enought. If we've a research without results
+    // then the next reset would do nothing.
+    // to force execution of useEffect::fetchNewPage(), we use a uniq key build with current queries filters.
+    setUnionQueryKey(JSON.stringify(queryAConfig.filters) + JSON.stringify(queryBConfig.filters));
+  }, [JSON.stringify(queryAConfig.filters), JSON.stringify(queryBConfig.filters)]);
+
   useEffect(() => {
     async function fetchNewPage() {
       const {
@@ -145,11 +159,18 @@ const useUnionResource = <
 
     // we request more entities than we can display in the right order
     // it's time for new fetching and sorting.
-    if (cursor > integrityCount) {
+    if (!isSyncing && cursor > integrityCount) {
       setIsSyncing(true);
       fetchNewPage();
     }
-  }, [cursor, stack.length]); // stack.length is added in the dependency array to force a new fetch on reset.
+  }, [
+    cursor,
+    // FIXME(rlecellier): when stack.length === 0, invalidate the query will not refetch.
+    // stack.length is added in the dependency array to force a new fetch on reset.
+    stack.length,
+    // unionQueryKey assure that we refetch data when query filters change.
+    unionQueryKey,
+  ]);
 
   const cursorToUse = Math.min(cursor, integrityCount);
   const next = () => {

package/js/pages/DashboardCourses/index.spec.tsx

@@ -1,13 +1,8 @@
-import { act, getByRole, render, screen, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
+import { act, getByRole, screen, waitFor } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
-import {
-  UserFactory,
-  RichieContextFactory as mockRichieContextFactory,
-} from 'utils/test/factories/richie';
-import { History, HistoryContext } from 'hooks/useHistory';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import {
   CourseProductRelationFactory,
@@ -15,7 +10,6 @@ import {
   CredentialOrderFactory,
 } from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { SessionProvider } from 'contexts/SessionContext';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
 import { CourseLight, CourseProductRelation, Enrollment, CredentialOrder } from 'types/Joanie';
 import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
@@ -25,6 +19,9 @@ import { isOrder } from 'pages/DashboardCourses/useOrdersEnrollments';
 import { noop } from 'utils';
 import { PER_PAGE } from 'settings';
 import { HttpStatusCode } from 'utils/errors/HttpError';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -52,44 +49,8 @@ jest.mock('hooks/useIntersectionObserver', () => ({
 }));
 
 describe('<DashboardCourses/>', () => {
+  setupJoanieSession();
   const perPage = PER_PAGE.useOrdersEnrollments;
-  const historyPushState = jest.fn();
-  const historyReplaceState = jest.fn();
-  const makeHistoryOf: (params: any) => History = () => [
-    {
-      state: { name: '', data: {} },
-      title: '',
-      url: `/`,
-    },
-    historyPushState,
-    historyReplaceState,
-  ];
-
-  beforeEach(() => {
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    fetchMock.restore();
-  });
-
-  const Wrapper = ({ client }: { client?: QueryClient }) => {
-    const user = UserFactory().one();
-    return (
-      <QueryClientProvider client={client ?? createTestQueryClient({ user })}>
-        <IntlProvider locale="en">
-          <HistoryContext.Provider value={makeHistoryOf({})}>
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />
-            </SessionProvider>
-          </HistoryContext.Provider>
-        </IntlProvider>
-      </QueryClientProvider>
-    );
-  };
 
   const mockOrders = (orders: CredentialOrder[], client?: QueryClient) => {
     const relations: Record<string, CourseProductRelation> = {};
@@ -150,7 +111,9 @@ describe('<DashboardCourses/>', () => {
       enrollmentsDeferred.promise,
     );
 
-    render(<Wrapper />);
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
 
     await expectSpinner('Loading orders and enrollments...');
     expect(await screen.queryByRole('button', { name: 'Load more' })).not.toBeInTheDocument();
@@ -242,7 +205,9 @@ describe('<DashboardCourses/>', () => {
 
     const entities = merge(orders, enrollments);
 
-    render(<Wrapper client={client} />);
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
 
     // Slice 1.
     await expectNoSpinner('Loading orders and enrollments...');
@@ -277,7 +242,10 @@ describe('<DashboardCourses/>', () => {
       { results: [], next: null, previous: null, count: 0 },
     );
 
-    render(<Wrapper />);
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+
     ordersDeferred.resolve({
       status: HttpStatusCode.INTERNAL_SERVER_ERROR,
       body: 'Internal Server Error',

package/js/utils/test/wrappers/BaseAppWrapper.tsx

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react';
+import { SessionProvider } from 'contexts/SessionContext';
+import { IntlWrapper } from './IntlWrapper';
+import { ReactQueryWrapper } from './ReactQueryWrapper';
+import { AppWrapperProps } from './types';
+
+export const BaseAppWrapper = ({
+  children,
+  intlOptions,
+  queryOptions,
+}: PropsWithChildren<AppWrapperProps>) => {
+  return (
+    <IntlWrapper {...(intlOptions || { locale: 'en' })}>
+      <ReactQueryWrapper {...(queryOptions || {})}>
+        <SessionProvider>{children}</SessionProvider>
+      </ReactQueryWrapper>
+    </IntlWrapper>
+  );
+};

package/js/utils/test/wrappers/BaseJoanieAppWrapper.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { IntlWrapper } from './IntlWrapper';
+import { ReactQueryWrapper } from './ReactQueryWrapper';
+import { AppWrapperProps } from './types';
+
+export const BaseJoanieAppWrapper = ({
+  children,
+  intlOptions,
+  queryOptions,
+}: PropsWithChildren<AppWrapperProps>) => {
+  return (
+    <IntlWrapper {...(intlOptions || { locale: 'en' })}>
+      <ReactQueryWrapper {...(queryOptions || {})}>
+        <JoanieSessionProvider>{children}</JoanieSessionProvider>
+      </ReactQueryWrapper>
+    </IntlWrapper>
+  );
+};

package/js/utils/test/wrappers/JoanieAppWrapper.tsx

@@ -1,12 +1,10 @@
 import { CunninghamProvider } from '@openfun/cunningham-react';
 import { PropsWithChildren } from 'react';
 import fetchMock from 'fetch-mock';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
 import { DashboardBreadcrumbsProvider } from 'widgets/Dashboard/contexts/DashboardBreadcrumbsContext';
-import { IntlWrapper } from './IntlWrapper';
-import { ReactQueryWrapper } from './ReactQueryWrapper';
 import { RouterWrapper } from './RouterWrapper';
 import { AppWrapperProps } from './types';
+import { BaseJoanieAppWrapper } from './BaseJoanieAppWrapper';
 
 export const setupJoanieSession = () => {
   beforeEach(() => {
@@ -21,10 +19,6 @@ export const setupJoanieSession = () => {
   };
 };
 
-export const JoanieSessionWrapper = ({ children }: PropsWithChildren) => {
-  return <JoanieSessionProvider>{children}</JoanieSessionProvider>;
-};
-
 export const JoanieAppWrapper = ({
   children,
   intlOptions,
@@ -32,16 +26,12 @@ export const JoanieAppWrapper = ({
   routerOptions,
 }: PropsWithChildren<AppWrapperProps>) => {
   return (
-    <IntlWrapper {...(intlOptions || { locale: 'en' })}>
+    <BaseJoanieAppWrapper intlOptions={intlOptions} queryOptions={queryOptions}>
       <CunninghamProvider>
-        <ReactQueryWrapper {...(queryOptions || {})}>
-          <JoanieSessionWrapper>
-            <DashboardBreadcrumbsProvider>
-              <RouterWrapper {...routerOptions}>{children}</RouterWrapper>
-            </DashboardBreadcrumbsProvider>
-          </JoanieSessionWrapper>
-        </ReactQueryWrapper>
+        <DashboardBreadcrumbsProvider>
+          <RouterWrapper {...routerOptions}>{children}</RouterWrapper>
+        </DashboardBreadcrumbsProvider>
       </CunninghamProvider>
-    </IntlWrapper>
+    </BaseJoanieAppWrapper>
   );
 };

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderContract.useUnionResource.cache.spec.tsx

@@ -1,13 +1,9 @@
 // FIXME: this test is about useUnionResource behavior.
 // we need to rewrite it in useUnionResource tests suite as small and generic as possible.
-import { QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
 import fetchMock from 'fetch-mock';
-import { act, render, screen, waitFor, within } from '@testing-library/react';
+import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { SessionProvider } from 'contexts/SessionContext';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import {
   ContractFactory,
@@ -19,6 +15,9 @@ import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessa
 import { Deferred } from 'utils/test/deferred';
 import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
 import { CONTRACT_SETTINGS } from 'settings';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -35,31 +34,15 @@ jest.mock('hooks/useIntersectionObserver', () => ({
 }));
 
 describe('<DashboardItemOrder/> Contract', () => {
-  const Wrapper = (route: string) => {
-    return (
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <SessionProvider>
-            <DashboardTest initialRoute={route} />
-          </SessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>
-    );
-  };
+  setupJoanieSession();
 
   beforeEach(() => {
     jest.useFakeTimers();
     jest.clearAllTimers();
-
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
   });
 
   afterEach(() => {
     jest.restoreAllMocks();
-    jest.clearAllMocks();
-    fetchMock.restore();
   });
 
   describe('writable', () => {
@@ -103,9 +86,10 @@ describe('<DashboardItemOrder/> Contract', () => {
       // RTL too. See https://github.com/testing-library/user-event/issues/833.
       const user = userEvent.setup({ delay: null });
 
-      render(Wrapper(LearnerDashboardPaths.COURSES));
+      render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
 
-      // console.log('apiCalls:2', fetchMock.calls().length);
       await expectNoSpinner('Loading orders and enrollments...');
 
       expect(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev124",
+  "version": "2.25.0-b2.dev127",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {