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

package/js/widgets/SyllabusCourseRunsList/components/CourseWishButton/index.login.spec.tsx

@@ -2,18 +2,15 @@
  * Test suite for CourseAddToWishlist component
  * for logged visitors
  */
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
-import { IntlProvider } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
 import userEvent from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import JoanieApiProvider from 'contexts/JoanieApiContext';
-import { SessionProvider } from 'contexts/SessionContext';
 import { HttpStatusCode } from 'utils/errors/HttpError';
-import { CourseLight } from 'types/Joanie';
 import { CourseLightFactory } from 'utils/test/factories/joanie';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
 import CourseWishButton from '.';
 
 jest.mock('utils/context', () => ({
@@ -24,63 +21,44 @@ jest.mock('utils/context', () => ({
       endpoint: 'https://authentication.test',
     },
     joanie_backend: {
-      endpoint: 'https://joanie.test',
+      endpoint: 'https://joanie.endpoint',
     },
   }).one(),
 }));
 
-const renderButton = (course: CourseLight) =>
-  render(
-    <IntlProvider locale="en">
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <JoanieApiProvider>
-          <SessionProvider>
-            <CourseWishButton course={course} />
-          </SessionProvider>
-        </JoanieApiProvider>
-      </QueryClientProvider>
-    </IntlProvider>,
-  );
-
 describe('CourseWishButton', () => {
+  const joanieSessionData = setupJoanieSession();
+  let nbApiCalls: number;
   const course = CourseLightFactory().one();
 
   beforeEach(() => {
-    // JoanieSessionProvider inital requests
-    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
-    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    fetchMock.restore();
+    nbApiCalls = joanieSessionData.nbSessionApiRequest;
   });
 
   it('renders a notify me button', async () => {
-    fetchMock.get(`https://joanie.test/api/v1.0/courses/${course.code}/wish/`, {
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.code}/wish/`, {
       status: HttpStatusCode.OK,
       body: {
         status: false,
       },
     });
-    renderButton(course);
+    render(<CourseWishButton course={course} />);
 
-    // wait for JoanieSession initialization
-    await waitFor(() => expect(screen.queryByText('loading...')).not.toBeInTheDocument());
     // wait for CourseAddToWishlist initialization
-    await waitFor(() => expect(screen.queryByTestId('spinner')).not.toBeInTheDocument());
+    await expectNoSpinner();
 
     const $notifyButton = screen.getByRole('button', { name: 'Notify me' });
     expect($notifyButton).toBeInTheDocument();
 
-    let nbApiCalls = 3; // JoanieSessionProvider initial requests
     nbApiCalls += 1; // useUserWishlistCourses inital fetch
     expect(fetchMock.calls().length).toBe(nbApiCalls);
 
-    fetchMock.post(`https://joanie.test/api/v1.0/courses/${course.code}/wish/`, HttpStatusCode.OK);
+    fetchMock.post(
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/wish/`,
+      HttpStatusCode.OK,
+    );
     fetchMock.get(
-      `https://joanie.test/api/v1.0/courses/${course.code}/wish/`,
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/wish/`,
       {
         status: HttpStatusCode.OK,
         body: {
@@ -90,7 +68,7 @@ describe('CourseWishButton', () => {
       { overwriteRoutes: true },
     );
 
-    await act(async () => userEvent.click($notifyButton));
+    await userEvent.click($notifyButton);
 
     await screen.findByRole('button', { name: 'Do not notify me anymore' });
     expect(screen.queryByRole('button', { name: 'Notify me' })).not.toBeInTheDocument();
@@ -101,25 +79,22 @@ describe('CourseWishButton', () => {
   });
 
   it('renders a "do not notify me" button', async () => {
-    fetchMock.get(`https://joanie.test/api/v1.0/courses/${course.code}/wish/`, {
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.code}/wish/`, {
       status: HttpStatusCode.OK,
       body: {
         status: true,
       },
     });
-    renderButton(course);
+    render(<CourseWishButton course={course} />);
 
-    // wait for JoanieSession initialization
-    await waitFor(() => expect(screen.queryByText('loading...')).not.toBeInTheDocument());
     // wait for CourseAddToWishlist initialization
-    await waitFor(() => expect(screen.queryByTestId('spinner')).not.toBeInTheDocument());
+    await expectNoSpinner();
 
     const $stopNotifyButton = await screen.findByRole('button', {
       name: 'Do not notify me anymore',
     });
     expect($stopNotifyButton).toBeInTheDocument();
 
-    let nbApiCalls = 3; // JoanieSessionProvider initial requests
     nbApiCalls += 1; // useUserWishlistCourses inital fetch
     expect(fetchMock.calls().length).toBe(nbApiCalls);
 
@@ -127,11 +102,11 @@ describe('CourseWishButton', () => {
     // react-query will refetch data using the GET url.
 
     fetchMock.delete(
-      `https://joanie.test/api/v1.0/courses/${course.code}/wish/`,
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/wish/`,
       HttpStatusCode.OK,
     );
     fetchMock.get(
-      `https://joanie.test/api/v1.0/courses/${course.code}/wish/`,
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/wish/`,
       {
         status: HttpStatusCode.OK,
         body: {
@@ -141,7 +116,7 @@ describe('CourseWishButton', () => {
       { overwriteRoutes: true },
     );
 
-    await act(async () => userEvent.click($stopNotifyButton));
+    await userEvent.click($stopNotifyButton);
 
     expect(await screen.findByRole('button', { name: 'Notify me' })).toBeInTheDocument();
     expect(

package/js/widgets/SyllabusCourseRunsList/components/CourseWishButton/index.logout.spec.tsx

@@ -2,18 +2,17 @@
  * Test suite for CourseAddToWishlist component
  * for anonymous visitors
  */
-import { render, screen, waitFor } from '@testing-library/react';
-import fetchMock from 'fetch-mock';
-import { IntlProvider } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import JoanieApiProvider from 'contexts/JoanieApiContext';
-import { SessionProvider } from 'contexts/SessionContext';
 import { location } from 'utils/indirection/window';
 import { CourseLightFactory } from 'utils/test/factories/joanie';
-import { CourseLight } from 'types/Joanie';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import CourseWishButton from '.';
 
 jest.mock('utils/indirection/window', () => ({
@@ -31,36 +30,28 @@ jest.mock('utils/context', () => ({
       endpoint: 'https://authentication.test',
     },
     joanie_backend: {
-      endpoint: 'https://joanie.test',
+      endpoint: 'https://joanie.endpoint',
     },
   }).one(),
 }));
 
-const renderButton = (course: CourseLight) =>
-  render(
-    <IntlProvider locale="en">
-      <QueryClientProvider client={createTestQueryClient({ user: null })}>
-        <JoanieApiProvider>
-          <SessionProvider>
-            <CourseWishButton course={course} />
-          </SessionProvider>
-        </JoanieApiProvider>
-      </QueryClientProvider>
-    </IntlProvider>,
-  );
-
 describe('CourseWishButton', () => {
+  setupJoanieSession();
   const course = CourseLightFactory().one();
 
-  afterEach(() => {
-    jest.clearAllMocks();
-    fetchMock.restore();
-  });
-
   it('renders a log me link', async () => {
-    renderButton(course);
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.code}/wish/`, {
+      status: HttpStatusCode.OK,
+      body: {
+        status: false,
+      },
+    });
+
+    render(<CourseWishButton course={course} />, {
+      queryOptions: { client: createTestQueryClient({ user: null }) },
+    });
     // wait for JoanieSession initialization
-    await waitFor(() => expect(screen.queryByText('loading...')).not.toBeInTheDocument());
+    await expectNoSpinner();
 
     const $logMeButton = await screen.findByRole('button', { name: 'Log in to be notified' });
     expect($logMeButton).toBeInTheDocument();

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

@@ -1,5 +1,6 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { CourseRunFactory } from 'utils/test/factories/richie';
+import { render } from 'utils/test/render';
 import { SyllabusSimpleCourseRunsList } from '.';
 
 jest.mock('widgets/SyllabusCourseRunsList/components/CourseRunItem', () => ({
@@ -16,7 +17,9 @@ describe('SyllabusSimpleCourseRunsList', () => {
   it('should render CourseRunItemWithEnrollment when checkEnrollment is true', () => {
     const courseRun = CourseRunFactory().one();
 
-    render(<SyllabusSimpleCourseRunsList courseRuns={[courseRun]} checkEnrollment />);
+    render(<SyllabusSimpleCourseRunsList courseRuns={[courseRun]} checkEnrollment />, {
+      wrapper: null,
+    });
 
     screen.getByText('CourseRunItemWithEnrollment');
   });
@@ -24,7 +27,7 @@ describe('SyllabusSimpleCourseRunsList', () => {
   it('should not render CourseRunItemWithEnrollment when checkEnrollment is false', () => {
     const courseRun = CourseRunFactory().one();
 
-    render(<SyllabusSimpleCourseRunsList courseRuns={[courseRun]} />);
+    render(<SyllabusSimpleCourseRunsList courseRuns={[courseRun]} />, { wrapper: null });
 
     screen.getByText('CourseRunItem');
   });
@@ -34,7 +37,9 @@ describe('SyllabusSimpleCourseRunsList', () => {
       snapshot: 'https://example.com/snaphosts/1/',
     }).one();
 
-    render(<SyllabusSimpleCourseRunsList courseRuns={[courseRun]} checkEnrollment />);
+    render(<SyllabusSimpleCourseRunsList courseRuns={[courseRun]} checkEnrollment />, {
+      wrapper: null,
+    });
 
     screen.getByText('CourseRunItem');
   });

package/js/widgets/SyllabusCourseRunsList/hooks/useCourseEnrollment/index.spec.tsx

@@ -1,5 +1,5 @@
 import { act, renderHook, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient } from '@tanstack/react-query';
 import { faker } from '@faker-js/faker';
 import fetchMock from 'fetch-mock';
 import { PropsWithChildren } from 'react';
@@ -10,11 +10,11 @@ import {
   UserFactory,
   CourseRunFactory,
 } from 'utils/test/factories/richie';
-import BaseSessionProvider from 'contexts/SessionContext/BaseSessionProvider';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { User } from 'types/User';
 import useCourseEnrollment from 'widgets/SyllabusCourseRunsList/hooks/useCourseEnrollment/index';
 import { HttpStatusCode } from 'utils/errors/HttpError';
+import { BaseAppWrapper } from 'utils/test/wrappers/BaseAppWrapper';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -38,15 +38,9 @@ describe('useCourseEnrollment', () => {
   const wrapper =
     (client: QueryClient) =>
     ({ children }: PropsWithChildren) => (
-      <QueryClientProvider client={client}>
-        <BaseSessionProvider>{children}</BaseSessionProvider>
-      </QueryClientProvider>
+      <BaseAppWrapper queryOptions={{ client }}>{children}</BaseAppWrapper>
     );
 
-  beforeEach(() => {
-    fetchMock.restore();
-  });
-
   it('does not make request when user is not authenticated', async () => {
     const user: User = UserFactory().one();
     const courseRun: CourseRun = CourseRunFactory().one();
@@ -60,9 +54,13 @@ describe('useCourseEnrollment', () => {
       wrapper: wrapper(createTestQueryClient({ user: null })),
     });
 
+    await waitFor(() => {
+      expect(result.current).not.toBeNull();
+    });
+
     expect(fetchMock.called()).toBeFalsy();
     expect(result.current.enrollment).toBeUndefined();
-    expect(result.current.enrollmentIsActive).toBeUndefined();
+    expect(result.current.enrollmentIsActive).toBe(false);
   });
 
   it('retrieves enrollment when user is authenticated', async () => {

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

@@ -4,14 +4,11 @@ import {
   getByRole,
   getByText,
   queryByRole,
-  render,
   screen,
   within,
 } from '@testing-library/react';
 import ReactDOM from 'react-dom';
-import { createIntl, IntlProvider } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { PropsWithChildren } from 'react';
+import { createIntl } from 'react-intl';
 import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
 import { faker } from '@faker-js/faker';
@@ -23,16 +20,14 @@ import {
 import SyllabusCourseRunsList from 'widgets/SyllabusCourseRunsList/index';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { CourseRun, Priority } from 'types';
-import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { CourseProductRelation } from 'types/Joanie';
 import { CourseLightFactory, CourseProductRelationFactory } from 'utils/test/factories/joanie';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import { StringHelper } from 'utils/StringHelper';
 import { computeStates } from 'utils/CourseRuns';
-import { User } from 'types/User';
-import { Nullable } from 'types/utils';
-import BaseSessionProvider from 'contexts/SessionContext/BaseSessionProvider';
 import { IntlHelper } from 'utils/IntlHelper';
+import { render } from 'utils/test/render';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 
 jest.mock('utils/context', () => {
   const mock = mockRichieContextFactory().one();
@@ -40,7 +35,7 @@ jest.mock('utils/context', () => {
     {
       backend: 'joanie',
       course_regexp: '^.*/api/v1.0((?:/(?:courses|course-runs|products)/[^/]+)+)/?$',
-      endpoint: 'https://joanie.test',
+      endpoint: 'https://joanie.endpoint',
     },
     {
       backend: 'openedx-hawthorn',
@@ -49,7 +44,7 @@ jest.mock('utils/context', () => {
     },
   ];
   mock.authentication = { backend: 'fonzie', endpoint: 'https://auth.test' };
-  mock.joanie_backend = { endpoint: 'https://joanie.test' };
+  mock.joanie_backend = { endpoint: 'https://joanie.endpoint' };
   return {
     __esModule: true,
     default: mock,
@@ -59,6 +54,9 @@ jest.mock('utils/context', () => {
 const MAX_ARCHIVED_COURSE_RUNS = 5;
 
 describe('<SyllabusCourseRunsList/>', () => {
+  let nbApiCalls: number;
+  const joanieSessionData = setupJoanieSession();
+
   beforeAll(() => {
     // @ts-ignore
     ReactDOM.createPortal = jest.fn((element) => {
@@ -66,24 +64,15 @@ describe('<SyllabusCourseRunsList/>', () => {
     });
   });
 
+  beforeEach(() => {
+    nbApiCalls = joanieSessionData.nbSessionApiRequest;
+  });
+
   afterEach(() => {
     // @ts-ignore
     ReactDOM.createPortal.mockClear();
-    fetchMock.restore();
   });
 
-  const Wrapper = ({ children, user = null }: PropsWithChildren<{ user?: Nullable<User> }>) => {
-    return (
-      <QueryClientProvider client={createTestQueryClient({ user })}>
-        <IntlProvider locale="en">
-          <JoanieApiProvider>
-            <BaseSessionProvider>{children}</BaseSessionProvider>
-          </JoanieApiProvider>
-        </IntlProvider>
-      </QueryClientProvider>
-    );
-  };
-
   const getHeaderContainer = (): HTMLElement => {
     return document.querySelector('.course-detail__row')!;
   };
@@ -176,7 +165,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: Wrapper,
+        queryOptions: { client: createTestQueryClient({ user: null }) },
       },
     );
 
@@ -213,7 +202,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: Wrapper,
+        queryOptions: { client: createTestQueryClient({ user: null }) },
       },
     );
 
@@ -250,7 +239,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: Wrapper,
+        queryOptions: { client: createTestQueryClient({ user: null }) },
       },
     );
 
@@ -295,7 +284,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: Wrapper,
+        queryOptions: { client: createTestQueryClient({ user: null }) },
       },
     );
 
@@ -315,7 +304,7 @@ describe('<SyllabusCourseRunsList/>', () => {
   it('has one opened product', async () => {
     const course = CourseLightFactory().one();
     const relation = CourseProductRelationFactory().one();
-    const resourceLink = `https://joanie.test/api/v1.0/courses/${course.code}/products/${relation.product.id}/`;
+    const resourceLink = `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${relation.product.id}/`;
     fetchMock.get(resourceLink, relation);
 
     const courseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
@@ -329,7 +318,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: Wrapper,
+        queryOptions: { client: createTestQueryClient({ user: null }) },
       },
     );
 
@@ -353,7 +342,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: Wrapper,
+        queryOptions: { client: createTestQueryClient({ user: null }) },
       },
     );
     getByRole(getPortalContainer(), 'heading', {
@@ -378,7 +367,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: Wrapper,
+        queryOptions: { client: createTestQueryClient({ user: null }) },
       },
     );
     getByRole(getPortalContainer(), 'heading', {
@@ -415,7 +404,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: Wrapper,
+        queryOptions: { client: createTestQueryClient({ user: null }) },
       },
     );
 
@@ -467,7 +456,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: Wrapper,
+        queryOptions: { client: createTestQueryClient({ user: null }) },
       },
     );
 
@@ -494,7 +483,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: Wrapper,
+        queryOptions: { client: createTestQueryClient({ user: null }) },
       },
     );
 
@@ -540,7 +529,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: Wrapper,
+        queryOptions: { client: createTestQueryClient({ user: null }) },
       },
     );
 
@@ -600,7 +589,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: Wrapper,
+        queryOptions: { client: createTestQueryClient({ user: null }) },
       },
     );
 
@@ -651,7 +640,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: Wrapper,
+        queryOptions: { client: createTestQueryClient({ user: null }) },
       },
     );
 
@@ -711,7 +700,7 @@ describe('<SyllabusCourseRunsList/>', () => {
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
       {
-        wrapper: ({ children }) => <Wrapper user={user}>{children}</Wrapper>,
+        queryOptions: { client: createTestQueryClient({ user }) },
       },
     );
 
@@ -730,7 +719,7 @@ describe('<SyllabusCourseRunsList/>', () => {
     const links = screen.getAllByRole('link');
     expect(links.length).toBe(1);
     const calledUrls = fetchMock.calls().map((call) => call[0]);
-    expect(calledUrls).toHaveLength(1);
+    expect(calledUrls).toHaveLength(nbApiCalls + 1);
 
     // Assert user's enrollment state has been checked for the ongoing course run.
     const link = within(portalContainer).getByRole('link');

package/js/widgets/UserLogin/components/UserMenu/index.spec.tsx

@@ -1,6 +1,7 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from 'react-intl';
+import { IntlWrapper } from 'utils/test/wrappers/IntlWrapper';
+import { render } from 'utils/test/render';
 import { UserMenu } from '.';
 
 /* Enforce to use DesktopUserMenu by default */
@@ -44,9 +45,10 @@ describe('<UserMenu />', () => {
 
   it('renders a dropdown with links matching the data passed to the "link" prop', async () => {
     render(
-      <IntlProvider locale="en">
+      <IntlWrapper>
         <UserMenu {...props} />
-      </IntlProvider>,
+      </IntlWrapper>,
+      { wrapper: null },
     );
 
     const button = screen.getByLabelText('Access to your profile settings', {
@@ -69,9 +71,10 @@ describe('<UserMenu />', () => {
     mockMatches = false;
 
     render(
-      <IntlProvider locale="en">
+      <IntlWrapper>
         <UserMenu {...props} />
-      </IntlProvider>,
+      </IntlWrapper>,
+      { wrapper: null },
     );
 
     screen.getByRole('heading', { name: 'John Doe' });