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

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.spec.tsx

@@ -5,17 +5,12 @@ import {
   getByText,
   queryByRole,
   queryByText,
-  render,
   screen,
   waitFor,
   within,
 } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
 import { faker } from '@faker-js/faker';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { PropsWithChildren } from 'react';
 import fetchMock from 'fetch-mock';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
 import { userEvent } from '@storybook/testing-library';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import {
@@ -31,8 +26,6 @@ import {
   TargetCourseFactory,
 } from 'utils/test/factories/joanie';
 import { Certificate, CourseLight, CourseRun, CredentialOrder, OrderState } from 'types/Joanie';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { SessionProvider } from 'contexts/SessionContext';
 import { resolveAll } from 'utils/resolveAll';
 import { confirm } from 'utils/indirection/window';
 import { Priority } from 'types';
@@ -43,6 +36,9 @@ import { Deferred } from 'utils/test/deferred';
 import { expectBreadcrumbsToEqualParts } from 'utils/test/expectBreadcrumbsToEqualParts';
 import { mockCourseProductWithOrder } from 'utils/test/mockCourseProductWithOrder';
 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';
 import { LearnerDashboardPaths } from '../../../utils/learnerRouteMessages';
 import { DashboardTest } from '../../DashboardTest';
 import { DashboardItemOrder } from './DashboardItemOrder';
@@ -60,43 +56,12 @@ jest.mock('utils/indirection/window', () => ({
 }));
 
 describe('<DashboardItemOrder/>', () => {
-  const wrapper = ({ children }: PropsWithChildren) => {
-    const router = createMemoryRouter([{ index: true, element: children }]);
-    return (
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <SessionProvider>
-            <RouterProvider router={router} />
-          </SessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>
-    );
-  };
-  const WrapperWithDashboard = (route: string) => {
-    return (
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <SessionProvider>
-            <DashboardTest initialRoute={route} />
-          </SessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>
-    );
-  };
+  setupJoanieSession();
 
   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/', []);
     fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
   });
 
-  afterEach(() => {
-    jest.restoreAllMocks();
-    jest.clearAllMocks();
-    fetchMock.restore();
-  });
-
   /**
    * Global
    */
@@ -106,7 +71,7 @@ describe('<DashboardItemOrder/>', () => {
     order.target_courses = [];
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} />, { wrapper });
+    render(<DashboardItemOrder order={order} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -134,7 +99,7 @@ describe('<DashboardItemOrder/>', () => {
       deferred.promise,
     );
 
-    render(<DashboardItemOrder order={order} showCertificate={true} />, { wrapper });
+    render(<DashboardItemOrder order={order} showCertificate={true} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -153,7 +118,7 @@ describe('<DashboardItemOrder/>', () => {
     order.target_courses = [];
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} />, { wrapper });
+    render(<DashboardItemOrder order={order} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -167,7 +132,7 @@ describe('<DashboardItemOrder/>', () => {
     order.target_courses = [];
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} />, { wrapper });
+    render(<DashboardItemOrder order={order} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     const moreButton = screen.getByRole('combobox', {
@@ -190,7 +155,7 @@ describe('<DashboardItemOrder/>', () => {
     order.target_courses = [];
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} />, { wrapper });
+    render(<DashboardItemOrder order={order} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -202,7 +167,7 @@ describe('<DashboardItemOrder/>', () => {
     const order: CredentialOrder = CredentialOrderFactory().one();
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} />, { wrapper });
+    render(<DashboardItemOrder order={order} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -226,7 +191,7 @@ describe('<DashboardItemOrder/>', () => {
 
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} />, { wrapper });
+    render(<DashboardItemOrder order={order} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -255,7 +220,7 @@ describe('<DashboardItemOrder/>', () => {
 
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} />, { wrapper });
+    render(<DashboardItemOrder order={order} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     screen.getByText('Ref. ' + (order.course as CourseLight).code);
@@ -276,9 +241,7 @@ describe('<DashboardItemOrder/>', () => {
     order.target_courses = [];
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
-      wrapper,
-    });
+    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -305,9 +268,7 @@ describe('<DashboardItemOrder/>', () => {
 
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
-      wrapper,
-    });
+    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -382,7 +343,11 @@ describe('<DashboardItemOrder/>', () => {
       }).many(1),
     };
 
-    render(WrapperWithDashboard(LearnerDashboardPaths.ORDER.replace(':orderId', order.id)));
+    render(
+      <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
+      { wrapper: BaseJoanieAppWrapper },
+    );
+
     // Wait for the order to be rendered.
     await screen.findByRole('heading', { level: 5, name: product.title });
 
@@ -456,7 +421,11 @@ describe('<DashboardItemOrder/>', () => {
       body: 'Internal Server Error',
     });
 
-    render(WrapperWithDashboard(LearnerDashboardPaths.ORDER.replace(':orderId', order.id)));
+    render(
+      <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
+      { wrapper: BaseJoanieAppWrapper },
+    );
+
     // Wait for the order to be rendered.
     await screen.findByRole('heading', { level: 5, name: product.title });
 
@@ -526,7 +495,10 @@ describe('<DashboardItemOrder/>', () => {
       target_enrollments: EnrollmentFactory({ course_run: newEnrolledCourseRun }).many(1),
     };
 
-    render(WrapperWithDashboard(LearnerDashboardPaths.ORDER.replace(':orderId', order.id)));
+    render(
+      <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
+      { wrapper: BaseJoanieAppWrapper },
+    );
 
     // Wait for the order to be rendered.
     await screen.findByRole('heading', { level: 5, name: product.title });
@@ -624,7 +596,10 @@ describe('<DashboardItemOrder/>', () => {
     const courseRun = order.target_courses[0].course_runs[0];
     const newEnrolledCourseRun = order.target_courses[0].course_runs[1];
 
-    render(WrapperWithDashboard(LearnerDashboardPaths.ORDER.replace(':orderId', order.id)));
+    render(
+      <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
+      { wrapper: BaseJoanieAppWrapper },
+    );
 
     // Wait for the order to be rendered.
     await screen.findByRole('heading', { level: 5, name: product.title });
@@ -715,7 +690,10 @@ describe('<DashboardItemOrder/>', () => {
       ],
     };
 
-    render(WrapperWithDashboard(LearnerDashboardPaths.ORDER.replace(':orderId', order.id)));
+    render(
+      <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
+      { wrapper: BaseJoanieAppWrapper },
+    );
 
     // Wait for the order to be rendered.
     await screen.findByRole('heading', { level: 5, name: product.title });
@@ -779,9 +757,7 @@ describe('<DashboardItemOrder/>', () => {
     }).one();
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
-      wrapper,
-    });
+    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
 
@@ -816,9 +792,7 @@ describe('<DashboardItemOrder/>', () => {
 
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
-      wrapper,
-    });
+    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -846,9 +820,7 @@ describe('<DashboardItemOrder/>', () => {
 
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
-      wrapper,
-    });
+    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
@@ -864,9 +836,7 @@ describe('<DashboardItemOrder/>', () => {
     const order: CredentialOrder = CredentialOrderFactory().one();
     const { product } = mockCourseProductWithOrder(order);
 
-    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />, {
-      wrapper,
-    });
+    render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
 

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

@@ -1,11 +1,7 @@
-import { QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
 import fetchMock from 'fetch-mock';
 import { faker } from '@faker-js/faker';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 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 { CourseLight } from 'types/Joanie';
 import {
@@ -17,6 +13,9 @@ import {
 import { mockCourseProductWithOrder } from 'utils/test/mockCourseProductWithOrder';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
 import { expectBannerError } from 'utils/test/expectBanner';
+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,
@@ -43,21 +42,8 @@ jest.mock('settings', () => ({
 }));
 
 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(() => {
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
     fetchMock.get(
       'begin:https://joanie.endpoint/api/v1.0/enrollments/',
       { results: [], next: null, previous: null, count: null },
@@ -66,12 +52,6 @@ describe('<DashboardItemOrder/> Contract', () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/me', []);
   });
 
-  afterEach(() => {
-    jest.restoreAllMocks();
-    jest.clearAllMocks();
-    fetchMock.restore();
-  });
-
   describe('non writable', () => {
     it('renders a non-writable order without contract attribute', async () => {
       const order = CredentialOrderFactory({
@@ -89,7 +69,9 @@ describe('<DashboardItemOrder/> Contract', () => {
 
       const { product } = mockCourseProductWithOrder(order);
 
-      render(Wrapper(LearnerDashboardPaths.COURSES));
+      render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
 
       await screen.findByRole('heading', { level: 5, name: product.title });
 
@@ -121,7 +103,9 @@ describe('<DashboardItemOrder/> Contract', () => {
 
       const { product } = mockCourseProductWithOrder(order);
 
-      render(Wrapper(LearnerDashboardPaths.COURSES));
+      render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
 
       await screen.findByRole('heading', { level: 5, name: product.title });
 
@@ -153,7 +137,9 @@ describe('<DashboardItemOrder/> Contract', () => {
 
       const { product } = mockCourseProductWithOrder(order);
 
-      render(Wrapper(LearnerDashboardPaths.COURSES));
+      render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
 
       await screen.findByRole('heading', { level: 5, name: product.title });
 
@@ -186,7 +172,11 @@ describe('<DashboardItemOrder/> Contract', () => {
         { overwriteRoutes: true },
       );
 
-      render(Wrapper(LearnerDashboardPaths.ORDER.replace(':orderId', order.id)));
+      render(
+        <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
+        { wrapper: BaseJoanieAppWrapper },
+      );
+
       expect(
         await screen.findByRole('heading', { level: 5, name: product.title }),
       ).toBeInTheDocument();
@@ -208,7 +198,10 @@ describe('<DashboardItemOrder/> Contract', () => {
         { overwriteRoutes: true },
       );
 
-      render(Wrapper(LearnerDashboardPaths.ORDER.replace(':orderId', order.id)));
+      render(
+        <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
+        { wrapper: BaseJoanieAppWrapper },
+      );
       expect(
         await screen.findByRole('heading', { level: 5, name: product.title }),
       ).toBeInTheDocument();
@@ -246,7 +239,10 @@ describe('<DashboardItemOrder/> Contract', () => {
         { overwriteRoutes: true },
       );
 
-      render(Wrapper(LearnerDashboardPaths.ORDER.replace(':orderId', order.id)));
+      render(
+        <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
+        { wrapper: BaseJoanieAppWrapper },
+      );
 
       expect(
         await screen.findByRole('heading', { level: 5, name: product.title }),
@@ -292,7 +288,10 @@ describe('<DashboardItemOrder/> Contract', () => {
       }/download/`;
       fetchMock.get(DOWNLOAD_URL, 'contract content');
 
-      render(Wrapper(LearnerDashboardPaths.ORDER.replace(':orderId', order.id)));
+      render(
+        <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
+        { wrapper: BaseJoanieAppWrapper },
+      );
       expect(await screen.findByRole('button', { name: 'Download' })).toBeInTheDocument();
     });
   });

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateLearnerMessage/index.spec.tsx

@@ -1,21 +1,19 @@
 import React, { PropsWithChildren } from 'react';
-import { render, screen } from '@testing-library/react';
-import { IntlProvider, createIntl } from 'react-intl';
+import { screen } from '@testing-library/react';
+import { createIntl } from 'react-intl';
 import {
   ContractDefinitionFactory,
   ContractFactory,
   CredentialOrderFactory,
 } from 'utils/test/factories/joanie';
 import { OrderState } from 'types/Joanie';
+import { render } from 'utils/test/render';
+import { IntlWrapper } from 'utils/test/wrappers/IntlWrapper';
 import OrderStateLearnerMessage, { messages } from '.';
 
 const intl = createIntl({ locale: 'en' });
 
 describe('<DashboardItemOrder/>', () => {
-  const Wrapper = ({ children }: PropsWithChildren) => (
-    <IntlProvider locale="en">{children}</IntlProvider>
-  );
-
   it.each([
     [OrderState.DRAFT, 'Draft'],
     [OrderState.SUBMITTED, 'Submitted'],
@@ -25,11 +23,9 @@ describe('<DashboardItemOrder/>', () => {
     'should display message from order state: %s when order have no contract',
     (state, expectedMessage) => {
       const order = CredentialOrderFactory({ state }).one();
-      render(
-        <Wrapper>
-          <OrderStateLearnerMessage order={order} />
-        </Wrapper>,
-      );
+      render(<OrderStateLearnerMessage order={order} />, {
+        wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+      });
       expect(screen.getByText(expectedMessage)).toBeInTheDocument();
     },
   );
@@ -46,11 +42,9 @@ describe('<DashboardItemOrder/>', () => {
         state,
         contract: ContractFactory().one(),
       }).one();
-      render(
-        <Wrapper>
-          <OrderStateLearnerMessage order={orderWithContract} />
-        </Wrapper>,
-      );
+      render(<OrderStateLearnerMessage order={orderWithContract} />, {
+        wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+      });
       expect(screen.getByText(expectedMessage)).toBeInTheDocument();
     },
   );
@@ -63,11 +57,9 @@ describe('<DashboardItemOrder/>', () => {
 
     const contractDefinition = ContractDefinitionFactory().one();
 
-    render(
-      <Wrapper>
-        <OrderStateLearnerMessage order={order} contractDefinition={contractDefinition} />
-      </Wrapper>,
-    );
+    render(<OrderStateLearnerMessage order={order} contractDefinition={contractDefinition} />, {
+      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+    });
     expect(screen.getByText('Signature required')).toBeInTheDocument();
   });
 
@@ -77,11 +69,9 @@ describe('<DashboardItemOrder/>', () => {
       contract: ContractFactory({ student_signed_on: new Date().toISOString() }).one(),
       certificate_id: undefined,
     }).one();
-    render(
-      <Wrapper>
-        <OrderStateLearnerMessage order={order} />
-      </Wrapper>,
-    );
+    render(<OrderStateLearnerMessage order={order} />, {
+      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+    });
     expect(
       screen.getByText(intl.formatMessage(messages.statusOnGoing), {
         exact: false,
@@ -98,11 +88,9 @@ describe('<DashboardItemOrder/>', () => {
       }).one(),
       certificate_id: 'FAKE_CERTIFICATE_ID',
     }).one();
-    render(
-      <Wrapper>
-        <OrderStateLearnerMessage order={order} />
-      </Wrapper>,
-    );
+    render(<OrderStateLearnerMessage order={order} />, {
+      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+    });
     expect(
       screen.getByText(intl.formatMessage(messages.statusCompleted), {
         exact: false,

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateTeacherMessage/index.spec.tsx

@@ -1,21 +1,19 @@
 import React, { PropsWithChildren } from 'react';
-import { render, screen } from '@testing-library/react';
-import { IntlProvider, createIntl } from 'react-intl';
+import { screen } from '@testing-library/react';
+import { createIntl } from 'react-intl';
 import {
   ContractDefinitionFactory,
   ContractFactory,
   CredentialOrderFactory,
 } from 'utils/test/factories/joanie';
 import { OrderState } from 'types/Joanie';
+import { render } from 'utils/test/render';
+import { IntlWrapper } from 'utils/test/wrappers/IntlWrapper';
 import OrderStateTeacherMessage, { messages } from '.';
 
 const intl = createIntl({ locale: 'en' });
 
 describe('<OrderStateTeacherMessage/>', () => {
-  const Wrapper = ({ children }: PropsWithChildren) => (
-    <IntlProvider locale="en">{children}</IntlProvider>
-  );
-
   it.each([
     [OrderState.DRAFT, 'Pending'],
     [OrderState.SUBMITTED, 'Pending'],
@@ -25,11 +23,9 @@ describe('<OrderStateTeacherMessage/>', () => {
     'should display message from order state: %s when order have no contract',
     (state, expectedMessage) => {
       const order = CredentialOrderFactory({ state }).one();
-      render(
-        <Wrapper>
-          <OrderStateTeacherMessage order={order} />
-        </Wrapper>,
-      );
+      render(<OrderStateTeacherMessage order={order} />, {
+        wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+      });
       expect(screen.getByText(expectedMessage)).toBeInTheDocument();
     },
   );
@@ -47,12 +43,13 @@ describe('<OrderStateTeacherMessage/>', () => {
         contract: ContractFactory().one(),
       }).one();
       render(
-        <Wrapper>
-          <OrderStateTeacherMessage
-            order={orderWithContract}
-            contractDefinition={ContractDefinitionFactory().one()}
-          />
-        </Wrapper>,
+        <OrderStateTeacherMessage
+          order={orderWithContract}
+          contractDefinition={ContractDefinitionFactory().one()}
+        />,
+        {
+          wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+        },
       );
       expect(screen.getByText(expectedMessage)).toBeInTheDocument();
     },
@@ -66,11 +63,9 @@ describe('<OrderStateTeacherMessage/>', () => {
 
     const contractDefinition = ContractDefinitionFactory().one();
 
-    render(
-      <Wrapper>
-        <OrderStateTeacherMessage order={order} contractDefinition={contractDefinition} />
-      </Wrapper>,
-    );
+    render(<OrderStateTeacherMessage order={order} contractDefinition={contractDefinition} />, {
+      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+    });
     expect(screen.getByText("Pending for learner's signature")).toBeInTheDocument();
   });
 
@@ -83,11 +78,9 @@ describe('<OrderStateTeacherMessage/>', () => {
     }).one();
     const contractDefinition = ContractDefinitionFactory().one();
 
-    render(
-      <Wrapper>
-        <OrderStateTeacherMessage order={order} contractDefinition={contractDefinition} />
-      </Wrapper>,
-    );
+    render(<OrderStateTeacherMessage order={order} contractDefinition={contractDefinition} />, {
+      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+    });
     expect(screen.getByText('To be signed')).toBeInTheDocument();
   });
 
@@ -96,11 +89,9 @@ describe('<OrderStateTeacherMessage/>', () => {
       state: OrderState.VALIDATED,
       certificate_id: undefined,
     }).one();
-    render(
-      <Wrapper>
-        <OrderStateTeacherMessage order={order} />
-      </Wrapper>,
-    );
+    render(<OrderStateTeacherMessage order={order} />, {
+      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+    });
     expect(
       screen.getByText(intl.formatMessage(messages.statusOnGoing), {
         exact: false,
@@ -113,11 +104,9 @@ describe('<OrderStateTeacherMessage/>', () => {
       state: OrderState.VALIDATED,
       certificate_id: 'FAKE_CERTIFICATE_ID',
     }).one();
-    render(
-      <Wrapper>
-        <OrderStateTeacherMessage order={order} />
-      </Wrapper>,
-    );
+    render(<OrderStateTeacherMessage order={order} />, {
+      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+    });
     expect(
       screen.getByText(intl.formatMessage(messages.statusCompleted), {
         exact: false,