richie-education 2.25.0-b2.dev148 → 2.25.0-b2.dev152

package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/index.joanie.spec.tsx

@@ -1,7 +1,5 @@
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
 
 import { faker } from '@faker-js/faker';
 import { Deferred } from 'utils/test/deferred';
@@ -9,12 +7,12 @@ import { EnrollmentFactory as JoanieEnrollment } from 'utils/test/factories/joan
 import {
   CourseRunFactory,
   RichieContextFactory as mockRichieContextFactory,
-  UserFactory,
 } from 'utils/test/factories/richie';
-import { SessionProvider } from 'contexts/SessionContext';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { HttpStatusCode } from 'utils/errors/HttpError';
 import { Priority } from 'types';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
 import CourseRunEnrollment from './index';
 
 jest.mock('utils/errors/handle');
@@ -40,22 +38,15 @@ jest.mock('utils/context', () => ({
 }));
 
 describe('<CourseRunEnrollment /> with joanie backend ', () => {
+  setupJoanieSession();
   const endpoint = 'https://joanie.endpoint';
 
   beforeEach(() => {
     jest.useFakeTimers();
     sessionStorage.clear();
-    fetchMock
-      .get('https://joanie.endpoint/api/v1.0/addresses/', [])
-      .get('https://joanie.endpoint/api/v1.0/credit-cards/', [])
-      .get('https://joanie.endpoint/api/v1.0/orders/', []);
   });
 
-  afterEach(() => {
-    fetchMock.restore();
-  });
   it('shows an "Enroll" button and allows the user to enroll', async () => {
-    const user = UserFactory().one();
     const courseRun = CourseRunFactory().one();
     courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${courseRun.id}`;
 
@@ -65,19 +56,8 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
       enrollmentDeferred.promise,
     );
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <CourseRunEnrollment courseRun={courseRun} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
-    });
-
-    screen.getByRole('status', { name: 'Loading enrollment information...' });
+    render(<CourseRunEnrollment courseRun={courseRun} />);
+    await expectSpinner('Loading enrollment information...');
 
     await act(async () => {
       enrollmentDeferred.resolve({
@@ -85,6 +65,7 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
         results: [],
       });
     });
+    await expectNoSpinner('Loading enrollment information...');
 
     const button = await screen.findByRole('button', { name: 'Enroll now' });
     const enrollActionDeferred = new Deferred();
@@ -93,11 +74,11 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
     await act(async () => {
       enrollActionDeferred.resolve(true);
     });
-    await screen.findByText('Unenroll from this course');
+
+    expect(await screen.findByText('Unenroll from this course')).toBeInTheDocument();
   });
 
   it('shows an error message when enrollment get request failed', async () => {
-    const user = UserFactory().one();
     const courseRun = CourseRunFactory().one();
     const joanieEnrollmentId = faker.string.uuid();
     courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${joanieEnrollmentId}`;
@@ -107,25 +88,14 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
       HttpStatusCode.INTERNAL_SERVER_ERROR,
     );
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <CourseRunEnrollment courseRun={courseRun} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
-    });
+    render(<CourseRunEnrollment courseRun={courseRun} />);
 
-    await screen.findByText('Enrollment fetching failed');
+    expect(await screen.findByText('Enrollment fetching failed')).toBeInTheDocument();
   });
 
   it('shows a link to the course if the user is already enrolled', async () => {
     // Joanie session requests
     let nbApiCalls = 3;
-    const user = UserFactory().one();
     const joanieEnrollment = JoanieEnrollment({ is_active: true }).one();
     const courseRun = CourseRunFactory().one();
     courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${joanieEnrollment.course_run.id}/`;
@@ -142,17 +112,7 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
     );
     nbApiCalls += 1;
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <CourseRunEnrollment courseRun={courseRun} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
-    });
+    render(<CourseRunEnrollment courseRun={courseRun} />);
 
     const $goToCourseButton = await screen.findByRole('link', { name: 'Go to course' });
     expect($goToCourseButton).toBeInTheDocument();
@@ -162,7 +122,6 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
   });
 
   it('shows an "Unenroll" text and allows the user to unenroll', async () => {
-    const user = UserFactory().one();
     const courseRun = CourseRunFactory().one();
     courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${courseRun.id}`;
 
@@ -172,19 +131,8 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
       enrollmentDeferred.promise,
     );
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <CourseRunEnrollment courseRun={courseRun} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
-    });
-
-    screen.getByRole('status', { name: 'Loading enrollment information...' });
+    render(<CourseRunEnrollment courseRun={courseRun} />);
+    await expectSpinner('Loading enrollment information...');
 
     await act(async () => {
       enrollmentDeferred.resolve({
@@ -213,11 +161,10 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
       enrollActionDeferred.resolve(false);
     });
 
-    await screen.findByRole('button', { name: 'Enroll now' });
+    expect(await screen.findByRole('button', { name: 'Enroll now' })).toBeInTheDocument();
   });
 
   it('shows an error message when the enrollment fails', async () => {
-    const user = UserFactory().one();
     const courseRun = CourseRunFactory().one();
     courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${courseRun.id}`;
 
@@ -227,19 +174,9 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
       enrollmentDeferred.promise,
     );
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <CourseRunEnrollment courseRun={courseRun} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
-    });
+    render(<CourseRunEnrollment courseRun={courseRun} />);
+    await expectSpinner('Loading enrollment information...');
 
-    screen.getByRole('status', { name: 'Loading enrollment information...' });
     await act(async () => {
       enrollmentDeferred.resolve({
         count: 0,
@@ -249,14 +186,11 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
 
     const button = await screen.findByRole('button', { name: 'Enroll now' });
     fetchMock.post(`${endpoint}/api/v1.0/enrollments/`, HttpStatusCode.INTERNAL_SERVER_ERROR);
-    await act(async () => {
-      fireEvent.click(button);
-    });
-    await screen.findByText('Your enrollment request failed.');
+    fireEvent.click(button);
+    expect(await screen.findByText('Your enrollment request failed.')).toBeInTheDocument();
   });
 
   it('shows an error message when the unenrollment fails', async () => {
-    const user = UserFactory().one();
     const courseRun = CourseRunFactory().one();
     courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${courseRun.id}`;
 
@@ -266,19 +200,8 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
       enrollmentDeferred.promise,
     );
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <CourseRunEnrollment courseRun={courseRun} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
-    });
-
-    screen.getByRole('status', { name: 'Loading enrollment information...' });
+    render(<CourseRunEnrollment courseRun={courseRun} />);
+    await expectSpinner('Loading enrollment information...');
 
     await act(async () => {
       enrollmentDeferred.resolve({

package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/index.openedx.spec.tsx

@@ -1,7 +1,5 @@
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
 import { CourseRun } from 'types';
 import { Deferred } from 'utils/test/deferred';
 import {
@@ -10,10 +8,12 @@ import {
   UserFactory,
 } from 'utils/test/factories/richie';
 import { handle } from 'utils/errors/handle';
-import { SessionProvider } from 'contexts/SessionContext';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { User } from 'types/User';
 import { HttpStatusCode } from 'utils/errors/HttpError';
+import { BaseAppWrapper } from 'utils/test/wrappers/BaseAppWrapper';
+import { render } from 'utils/test/render';
+import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
 import CourseRunEnrollment from './index';
 
 jest.mock('utils/errors/handle');
@@ -43,14 +43,6 @@ describe('<CourseRunEnrollment />', () => {
   beforeEach(() => {
     jest.useFakeTimers();
     sessionStorage.clear();
-    fetchMock
-      .get('https://joanie.endpoint/api/v1.0/addresses/', [])
-      .get('https://joanie.endpoint/api/v1.0/credit-cards/', [])
-      .get('https://joanie.endpoint/api/v1.0/orders/', []);
-  });
-
-  afterEach(() => {
-    fetchMock.restore();
   });
 
   it('shows an "Enroll" button and allows the user to enroll', async () => {
@@ -65,22 +57,16 @@ describe('<CourseRunEnrollment />', () => {
       enrollmentsDeferred.promise,
     );
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <CourseRunEnrollment courseRun={courseRun} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
+    render(<CourseRunEnrollment courseRun={courseRun} />, {
+      wrapper: BaseAppWrapper,
+      queryOptions: { client: createTestQueryClient({ user }) },
     });
-    screen.getByRole('status', { name: 'Loading enrollment information...' });
+    await expectSpinner('Loading enrollment information...');
 
     await act(async () => {
       enrollmentsDeferred.resolve({});
     });
+    await expectNoSpinner('Loading enrollment information...');
 
     const button = await screen.findByRole('button', { name: 'Enroll now' });
 
@@ -110,16 +96,9 @@ describe('<CourseRunEnrollment />', () => {
       enrollmentDeferred.promise,
     );
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <CourseRunEnrollment courseRun={courseRun} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
+    render(<CourseRunEnrollment courseRun={courseRun} />, {
+      wrapper: BaseAppWrapper,
+      queryOptions: { client: createTestQueryClient({ user }) },
     });
 
     screen.getByRole('status', { name: 'Loading enrollment information...' });
@@ -160,16 +139,9 @@ describe('<CourseRunEnrollment />', () => {
       enrollmentDeferred.promise,
     );
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <CourseRunEnrollment courseRun={courseRun} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
+    render(<CourseRunEnrollment courseRun={courseRun} />, {
+      wrapper: BaseAppWrapper,
+      queryOptions: { client: createTestQueryClient({ user }) },
     });
 
     screen.getByRole('status', { name: 'Loading enrollment information...' });
@@ -206,16 +178,9 @@ describe('<CourseRunEnrollment />', () => {
       enrollmentsDeferred.promise,
     );
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <CourseRunEnrollment courseRun={courseRun} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
+    render(<CourseRunEnrollment courseRun={courseRun} />, {
+      wrapper: BaseAppWrapper,
+      queryOptions: { client: createTestQueryClient({ user }) },
     });
 
     screen.getByRole('status', { name: 'Loading enrollment information...' });
@@ -244,16 +209,9 @@ describe('<CourseRunEnrollment />', () => {
       enrollmentsDeferred.promise,
     );
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <CourseRunEnrollment courseRun={courseRun} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
+    render(<CourseRunEnrollment courseRun={courseRun} />, {
+      wrapper: BaseAppWrapper,
+      queryOptions: { client: createTestQueryClient({ user }) },
     });
 
     screen.getByRole('status', { name: 'Loading enrollment information...' });
@@ -277,16 +235,9 @@ describe('<CourseRunEnrollment />', () => {
     courseRun.resource_link = 'https://openedx.endpoint' + courseRun.resource_link;
     courseRun.state.priority = 4;
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user: null })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <CourseRunEnrollment courseRun={courseRun} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
+    render(<CourseRunEnrollment courseRun={courseRun} />, {
+      wrapper: BaseAppWrapper,
+      queryOptions: { client: createTestQueryClient({ user: null }) },
     });
 
     screen.getByText('Enrollment in this course run is closed at the moment');
@@ -298,16 +249,9 @@ describe('<CourseRunEnrollment />', () => {
     courseRun.resource_link = 'https://openedx.endpoint' + courseRun.resource_link;
     courseRun.state.priority = 0;
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user: null })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <CourseRunEnrollment courseRun={courseRun} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
+    render(<CourseRunEnrollment courseRun={courseRun} />, {
+      wrapper: BaseAppWrapper,
+      queryOptions: { client: createTestQueryClient({ user: null }) },
     });
 
     screen.getByRole('button', { name: 'Log in to enroll' });

package/js/widgets/SyllabusCourseRunsList/components/CourseRunItem/index.spec.tsx

@@ -1,6 +1,7 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { CourseRunFactory } from 'utils/test/factories/richie';
+import { render } from 'utils/test/render';
 import CourseRunItem from '.';
 
 describe('CourseRunItem', () => {
@@ -15,6 +16,7 @@ describe('CourseRunItem', () => {
       <IntlProvider locale="en">
         <CourseRunItem item={courseRun} />
       </IntlProvider>,
+      { wrapper: null },
     );
 
     // First title letter should have been capitalized
@@ -33,6 +35,7 @@ describe('CourseRunItem', () => {
       <IntlProvider locale="en">
         <CourseRunItem item={courseRun} />
       </IntlProvider>,
+      { wrapper: null },
     );
 
     // Only dates should have been displayed.

package/js/widgets/SyllabusCourseRunsList/components/CourseRunItemWithEnrollment/index.spec.tsx

@@ -1,7 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
-import { PropsWithChildren } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import {
   CourseRunFactory,
@@ -9,7 +6,8 @@ import {
   UserFactory,
 } from 'utils/test/factories/richie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import BaseSessionProvider from 'contexts/SessionContext/BaseSessionProvider';
+import { BaseAppWrapper } from 'utils/test/wrappers/BaseAppWrapper';
+import { render } from 'utils/test/render';
 import CourseRunItemWithEnrollment from '.';
 
 jest.mock('utils/context', () => ({
@@ -26,32 +24,21 @@ jest.mock('utils/context', () => ({
 }));
 
 describe('CourseRunItemWithEnrollment', () => {
-  const Wrapper = ({ client, children }: PropsWithChildren<{ client?: QueryClient }>) => {
-    return (
-      <QueryClientProvider client={client ?? createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <BaseSessionProvider>{children}</BaseSessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>
-    );
-  };
-
-  beforeEach(() => {
-    fetchMock.restore();
-  });
-
-  it('should not render enrollment information when user is anonymous', () => {
+  it('should not render enrollment information when user is anonymous', async () => {
     const courseRun = CourseRunFactory({
       title: 'run',
       start: new Date('2023-01-01').toISOString(),
       end: new Date('2023-12-31').toISOString(),
     }).one();
 
-    render(
-      <Wrapper client={createTestQueryClient({ user: null })}>
-        <CourseRunItemWithEnrollment item={courseRun} />
-      </Wrapper>,
-    );
+    render(<CourseRunItemWithEnrollment item={courseRun} />, {
+      wrapper: BaseAppWrapper,
+      queryOptions: { client: createTestQueryClient({ user: null }) },
+    });
+    // session loader
+    await waitFor(() => {
+      expect(screen.queryByText('loading...')).not.toBeInTheDocument();
+    });
 
     // First title letter should have been capitalized
     // Dates should have been formatted as "Month day, year"
@@ -76,11 +63,14 @@ describe('CourseRunItemWithEnrollment', () => {
       },
     );
 
-    render(
-      <Wrapper client={createTestQueryClient({ user })}>
-        <CourseRunItemWithEnrollment item={courseRun} />
-      </Wrapper>,
-    );
+    render(<CourseRunItemWithEnrollment item={courseRun} />, {
+      wrapper: BaseAppWrapper,
+      queryOptions: { client: createTestQueryClient({ user }) },
+    });
+    // session loader
+    await waitFor(() => {
+      expect(screen.queryByText('loading...')).not.toBeInTheDocument();
+    });
 
     // Only dates should have been displayed.
     screen.getByText('Run, from Jan 01, 2023 to Dec 31, 2023');
@@ -107,11 +97,14 @@ describe('CourseRunItemWithEnrollment', () => {
       },
     );
 
-    render(
-      <Wrapper client={createTestQueryClient({ user })}>
-        <CourseRunItemWithEnrollment item={courseRun} />
-      </Wrapper>,
-    );
+    render(<CourseRunItemWithEnrollment item={courseRun} />, {
+      wrapper: BaseAppWrapper,
+      queryOptions: { client: createTestQueryClient({ user }) },
+    });
+    // session loader
+    await waitFor(() => {
+      expect(screen.queryByText('loading...')).not.toBeInTheDocument();
+    });
 
     // Only dates should have been displayed.
     screen.getByText('Run, from Jan 01, 2023 to Dec 31, 2023');

package/js/widgets/SyllabusCourseRunsList/components/CourseWishButton/hooks/useCourseWish/index.spec.tsx

@@ -1,17 +1,12 @@
 import { act, renderHook, waitFor } from '@testing-library/react';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
 import fetchMock from 'fetch-mock';
-import { PropsWithChildren } from 'react';
 import { Deferred } from 'utils/test/deferred';
 import {
   CourseLightFactory,
   RichieContextFactory as mockRichieContextFactory,
 } from 'utils/test/factories/richie';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import JoanieApiProvider from 'contexts/JoanieApiContext';
-import BaseSessionProvider from 'contexts/SessionContext/BaseSessionProvider';
 import { HttpStatusCode } from 'utils/errors/HttpError';
+import { JoanieAppWrapper, setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { useCourseWish } from '.';
 
 jest.mock('utils/context', () => ({
@@ -22,37 +17,23 @@ jest.mock('utils/context', () => ({
       endpoint: 'https://authentication.test',
     },
     joanie_backend: {
-      endpoint: 'https://joanie.test',
+      endpoint: 'https://joanie.endpoint',
     },
   }).one(),
 }));
 
 describe('useCourseWish', () => {
+  setupJoanieSession();
   const course = CourseLightFactory().one();
 
-  afterEach(() => {
-    jest.clearAllMocks();
-    fetchMock.restore();
-  });
-
-  const Wrapper = ({ children }: PropsWithChildren) => (
-    <IntlProvider locale="en">
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <JoanieApiProvider>
-          <BaseSessionProvider>{children}</BaseSessionProvider>
-        </JoanieApiProvider>
-      </QueryClientProvider>
-    </IntlProvider>
-  );
-
   it('retrieves course wish', async () => {
     const responseDeferred = new Deferred();
 
-    const urlGetWishlistById = `https://joanie.test/api/v1.0/courses/${course.id}/wish/`;
+    const urlGetWishlistById = `https://joanie.endpoint/api/v1.0/courses/${course.id}/wish/`;
     fetchMock.get(urlGetWishlistById, responseDeferred.promise);
 
     const { result } = renderHook(() => useCourseWish(course.id), {
-      wrapper: Wrapper,
+      wrapper: JoanieAppWrapper,
     });
 
     await waitFor(() => expect(result.current.states.fetching).toBe(true));
@@ -72,7 +53,7 @@ describe('useCourseWish', () => {
   });
 
   it('adds a course wish', async () => {
-    const urlWishlist = `https://joanie.test/api/v1.0/courses/${course.code}/wish/`;
+    const urlWishlist = `https://joanie.endpoint/api/v1.0/courses/${course.code}/wish/`;
     fetchMock.get(urlWishlist, {
       status: HttpStatusCode.OK,
       body: {
@@ -80,7 +61,7 @@ describe('useCourseWish', () => {
       },
     });
     const { result } = renderHook(() => useCourseWish(course.code!), {
-      wrapper: Wrapper,
+      wrapper: JoanieAppWrapper,
     });
     fetchMock.restore();
 
@@ -106,7 +87,7 @@ describe('useCourseWish', () => {
   });
 
   it('removes a course to user wishlist', async () => {
-    const url = `https://joanie.test/api/v1.0/courses/${course.code}/wish/`;
+    const url = `https://joanie.endpoint/api/v1.0/courses/${course.code}/wish/`;
     fetchMock.get(url, {
       status: HttpStatusCode.OK,
       body: {
@@ -114,7 +95,7 @@ describe('useCourseWish', () => {
       },
     });
     const { result } = renderHook(() => useCourseWish(course.code!), {
-      wrapper: Wrapper,
+      wrapper: JoanieAppWrapper,
     });
     fetchMock.restore();