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

package/js/contexts/JoanieApiContext/index.spec.tsx

@@ -8,7 +8,7 @@ jest.mock('utils/context', () => ({
   __esModule: true,
   default: mockRichieContextFactory({
     joanie_backend: {
-      endpoint: 'https://joanie.test',
+      endpoint: 'https://joanie.endpoint',
     },
   }).one(),
 }));

package/js/contexts/SessionContext/JoanieSessionProvider.spec.tsx

@@ -1,7 +1,5 @@
 import fetchMock from 'fetch-mock';
-import { IntlProvider } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { act, render, renderHook, waitFor } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { PropsWithChildren } from 'react';
 import {
   RichieContextFactory as mockRichieContextFactory,
@@ -11,7 +9,9 @@ import { Deferred } from 'utils/test/deferred';
 import { REACT_QUERY_SETTINGS, RICHIE_USER_TOKEN } from 'settings';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { HttpStatusCode } from 'utils/errors/HttpError';
-import JoanieSessionProvider from './JoanieSessionProvider';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import { useSession } from '.';
 
 jest.mock('utils/errors/handle');
@@ -19,7 +19,7 @@ jest.mock('utils/context', () => ({
   __esModule: true,
   default: mockRichieContextFactory({
     authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
-    joanie_backend: { endpoint: 'https://joanie.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
   }).one(),
 }));
 jest.mock('utils/indirection/window', () => ({
@@ -30,23 +30,10 @@ jest.mock('utils/indirection/window', () => ({
 
 // - Joanie Session Provider test suite
 describe('JoanieSessionProvider', () => {
-  const Wrapper = ({ children }: PropsWithChildren) => (
-    <IntlProvider locale="en">
-      <QueryClientProvider client={createTestQueryClient({ persister: true })}>
-        <JoanieSessionProvider>{children}</JoanieSessionProvider>
-      </QueryClientProvider>
-    </IntlProvider>
-  );
-
+  setupJoanieSession();
   beforeEach(() => {
-    fetchMock.restore();
     jest.useFakeTimers();
     sessionStorage.clear();
-
-    fetchMock
-      .get('https://joanie.endpoint.test/api/v1.0/addresses/', [])
-      .get('https://joanie.endpoint.test/api/v1.0/credit-cards/', [])
-      .get('https://joanie.endpoint.test/api/v1.0/orders/', []);
   });
 
   afterEach(() => {
@@ -59,9 +46,13 @@ describe('JoanieSessionProvider', () => {
 
     fetchMock.get('https://auth.endpoint.test/api/v1.0/user/me', user);
 
-    await act(async () => {
-      render(<Wrapper />);
-    });
+    render(
+      <BaseJoanieAppWrapper
+        queryOptions={{ client: createTestQueryClient({ persister: true }) }}
+      />,
+      { wrapper: null },
+    );
+
     await waitFor(async () => {
       expect(fetchMock.lastUrl()).toEqual('https://auth.endpoint.test/api/v1.0/user/me');
     });
@@ -74,9 +65,12 @@ describe('JoanieSessionProvider', () => {
     sessionStorage.setItem(RICHIE_USER_TOKEN, 'richie');
     fetchMock.get('https://auth.endpoint.test/api/v1.0/user/me', HttpStatusCode.FORBIDDEN);
 
-    await act(async () => {
-      render(<Wrapper />);
-    });
+    render(
+      <BaseJoanieAppWrapper
+        queryOptions={{ client: createTestQueryClient({ persister: true }) }}
+      />,
+      { wrapper: null },
+    );
     await waitFor(async () => {
       expect(fetchMock.lastUrl()).toEqual('https://auth.endpoint.test/api/v1.0/user/me');
     });
@@ -89,9 +83,12 @@ describe('JoanieSessionProvider', () => {
 
     fetchMock.get('https://auth.endpoint.test/api/v1.0/user/me', deferredUser.promise);
 
-    await act(async () => {
-      render(<Wrapper />);
-    });
+    render(
+      <BaseJoanieAppWrapper
+        queryOptions={{ client: createTestQueryClient({ persister: true }) }}
+      />,
+      { wrapper: null },
+    );
 
     await act(async () => deferredUser.resolve(user));
 
@@ -99,9 +96,9 @@ describe('JoanieSessionProvider', () => {
       const calls = fetchMock.calls();
       expect(calls).toHaveLength(4);
       expect(calls[0][0]).toEqual('https://auth.endpoint.test/api/v1.0/user/me');
-      expect(calls[1][0]).toEqual('https://joanie.endpoint.test/api/v1.0/addresses/');
-      expect(calls[2][0]).toEqual('https://joanie.endpoint.test/api/v1.0/credit-cards/');
-      expect(calls[3][0]).toEqual('https://joanie.endpoint.test/api/v1.0/orders/');
+      expect(calls[1][0]).toEqual('https://joanie.endpoint/api/v1.0/addresses/');
+      expect(calls[2][0]).toEqual('https://joanie.endpoint/api/v1.0/credit-cards/');
+      expect(calls[3][0]).toEqual('https://joanie.endpoint/api/v1.0/orders/');
     });
   });
 
@@ -110,10 +107,12 @@ describe('JoanieSessionProvider', () => {
 
     fetchMock.get('https://auth.endpoint.test/api/v1.0/user/me', deferredUser.promise);
 
-    await act(async () => {
-      render(<Wrapper />);
-    });
-
+    render(
+      <BaseJoanieAppWrapper
+        queryOptions={{ client: createTestQueryClient({ persister: true }) }}
+      />,
+      { wrapper: null },
+    );
     await act(async () => deferredUser.resolve(null));
 
     await waitFor(async () =>
@@ -130,7 +129,11 @@ describe('JoanieSessionProvider', () => {
 
     fetchMock.get('https://auth.endpoint.test/api/v1.0/user/me', userDeferred.promise);
     const { result, rerender } = renderHook(useSession, {
-      wrapper: Wrapper,
+      wrapper: ({ children }: PropsWithChildren) => (
+        <BaseJoanieAppWrapper queryOptions={{ client: createTestQueryClient({ persister: true }) }}>
+          {children}
+        </BaseJoanieAppWrapper>
+      ),
     });
 
     await act(async () => {
@@ -162,7 +165,11 @@ describe('JoanieSessionProvider', () => {
 
     fetchMock.get('https://auth.endpoint.test/api/v1.0/user/me', userDeferred.promise);
     const { result, rerender } = renderHook(useSession, {
-      wrapper: Wrapper,
+      wrapper: ({ children }: PropsWithChildren) => (
+        <BaseJoanieAppWrapper queryOptions={{ client: createTestQueryClient({ persister: true }) }}>
+          {children}
+        </BaseJoanieAppWrapper>
+      ),
     });
 
     await act(async () => {

package/js/contexts/SessionContext/index.spec.tsx

@@ -1,7 +1,6 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { faker } from '@faker-js/faker';
 import fetchMock from 'fetch-mock';
-import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
+import { act, renderHook, screen, waitFor } from '@testing-library/react';
 import { PropsWithChildren } from 'react';
 import {
   RichieContextFactory as mockRichieContextFactory,
@@ -12,7 +11,8 @@ import { REACT_QUERY_SETTINGS } from 'settings';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { User } from 'types/User';
 import { HttpStatusCode } from 'utils/errors/HttpError';
-import BaseSessionProvider from './BaseSessionProvider';
+import { render } from 'utils/test/render';
+import { BaseAppWrapper } from 'utils/test/wrappers/BaseAppWrapper';
 import { useSession } from '.';
 
 jest.mock('utils/context', () => ({
@@ -23,7 +23,7 @@ jest.mock('utils/context', () => ({
       backend: 'openedx-hawthorn',
     },
     joanie_backend: {
-      endpoint: 'https://joanie.test',
+      endpoint: 'https://joanie.endpoint',
     },
   }).one(),
 }));
@@ -35,18 +35,9 @@ jest.mock('utils/indirection/window', () => ({
 }));
 
 describe('SessionProvider', () => {
-  const wrapper =
-    (client?: QueryClient) =>
-    ({ children }: PropsWithChildren) => (
-      <QueryClientProvider client={client ?? createTestQueryClient({ persister: true })}>
-        <BaseSessionProvider>{children}</BaseSessionProvider>
-      </QueryClientProvider>
-    );
-
   beforeEach(() => {
     jest.useFakeTimers();
     jest.resetModules();
-    fetchMock.restore();
     sessionStorage.clear();
   });
 
@@ -69,7 +60,7 @@ describe('SessionProvider', () => {
     }));
     const { SessionProvider: Provider } = require('.');
 
-    render(<Provider />);
+    render(<Provider />, { wrapper: null });
 
     await screen.findByText('BaseSessionProvider');
   });
@@ -88,7 +79,7 @@ describe('SessionProvider', () => {
     }));
     const { SessionProvider: Provider } = require('.');
 
-    render(<Provider />);
+    render(<Provider />, { wrapper: null });
 
     await screen.findByText('JoanieSessionProvider');
   });
@@ -100,7 +91,11 @@ describe('SessionProvider', () => {
       fetchMock.get('https://endpoint.test/api/user/v1/me', userDeferred.promise);
 
       const { result } = renderHook(() => useSession(), {
-        wrapper: wrapper(),
+        wrapper: ({ children }: PropsWithChildren) => (
+          <BaseAppWrapper queryOptions={{ client: createTestQueryClient({ persister: true }) }}>
+            {children}
+          </BaseAppWrapper>
+        ),
       });
 
       await act(async () => {
@@ -127,7 +122,13 @@ describe('SessionProvider', () => {
       const username = faker.internet.userName();
       const userDeferred = new Deferred();
       fetchMock.get('https://endpoint.test/api/user/v1/me', userDeferred.promise);
-      const { result } = renderHook(useSession, { wrapper: wrapper() });
+      const { result } = renderHook(useSession, {
+        wrapper: ({ children }: PropsWithChildren) => (
+          <BaseAppWrapper queryOptions={{ client: createTestQueryClient({ persister: true }) }}>
+            {children}
+          </BaseAppWrapper>
+        ),
+      });
 
       await act(async () => {
         userDeferred.resolve({ username });
@@ -150,7 +151,13 @@ describe('SessionProvider', () => {
 
       fetchMock.get('https://endpoint.test/api/user/v1/me', userDeferred.promise);
       fetchMock.get('https://endpoint.test/logout', HttpStatusCode.OK);
-      const { result } = renderHook(useSession, { wrapper: wrapper() });
+      const { result } = renderHook(useSession, {
+        wrapper: ({ children }: PropsWithChildren) => (
+          <BaseAppWrapper queryOptions={{ client: createTestQueryClient({ persister: true }) }}>
+            {children}
+          </BaseAppWrapper>
+        ),
+      });
 
       await act(async () => {
         userDeferred.resolve({ username });
@@ -178,7 +185,11 @@ describe('SessionProvider', () => {
       fetchMock.get('https://endpoint.test/api/user/v1/me', HttpStatusCode.OK);
 
       const { result } = renderHook(useSession, {
-        wrapper: wrapper(createTestQueryClient({ user })),
+        wrapper: ({ children }: PropsWithChildren) => (
+          <BaseAppWrapper queryOptions={{ client: createTestQueryClient({ user }) }}>
+            {children}
+          </BaseAppWrapper>
+        ),
       });
 
       expect(result.current.user).toStrictEqual(user);
@@ -190,7 +201,13 @@ describe('SessionProvider', () => {
       const userDeferred = new Deferred();
 
       fetchMock.get('https://endpoint.test/api/user/v1/me', userDeferred.promise);
-      const { result, rerender } = renderHook(useSession, { wrapper: wrapper() });
+      const { result, rerender } = renderHook(useSession, {
+        wrapper: ({ children }: PropsWithChildren) => (
+          <BaseAppWrapper queryOptions={{ client: createTestQueryClient({ persister: true }) }}>
+            {children}
+          </BaseAppWrapper>
+        ),
+      });
 
       await act(async () => {
         userDeferred.resolve(user);
@@ -225,7 +242,11 @@ describe('SessionProvider', () => {
 
       fetchMock.get('https://endpoint.test/api/user/v1/me', userDeferred.promise);
       const { result, rerender } = renderHook(useSession, {
-        wrapper: wrapper(),
+        wrapper: ({ children }: PropsWithChildren) => (
+          <BaseAppWrapper queryOptions={{ client: createTestQueryClient({ persister: true }) }}>
+            {children}
+          </BaseAppWrapper>
+        ),
       });
 
       await act(async () => {

package/js/contexts/SessionContext/no-authentication.spec.tsx

@@ -1,8 +1,9 @@
-import { render, renderHook, screen } from '@testing-library/react';
+import { renderHook, screen } from '@testing-library/react';
 import { PropsWithChildren } from 'react';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { handle as mockHandle } from 'utils/errors/handle';
 import { noop } from 'utils';
+import { render } from 'utils/test/render';
 import { SessionProvider, useSession } from '.';
 
 jest.mock('utils/errors/handle');
@@ -15,7 +16,7 @@ jest.mock('utils/context', () => ({
 
 describe('SessionProvider with no authentication', () => {
   it('uses any Provider', async () => {
-    render(<SessionProvider>Children</SessionProvider>);
+    render(<SessionProvider>Children</SessionProvider>, { wrapper: null });
     await screen.findByText('Children');
   });
 

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

@@ -23,7 +23,6 @@ describe('hooks/useCourseSearchParams', () => {
     // Remove any keys added to the mockWindow location object, reset pathname to /search
     Object.keys(mockWindow.location).forEach((key) => delete (mockWindow.location as any)[key]);
     mockWindow.location.pathname = '/search';
-    jest.resetAllMocks();
   });
 
   it('initializes with the URL query string', async () => {

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

@@ -7,7 +7,7 @@ import { noop } from 'utils';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { PER_PAGE } from 'settings';
 import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
-import { BaseAppWrapper } from 'utils/test/wrappers/BaseAppWrapper';
+import { ReactQueryAppWrapper } from 'utils/test/wrappers/ReactQueryAppWrapper';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { QueryConfig, FetchDataFunction } from './utils/fetchEntity';
 import useUnionResource from '.';
@@ -98,7 +98,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: BaseAppWrapper },
+      { wrapper: ReactQueryAppWrapper },
     );
 
     expect(result.current.isLoading).toBe(true);
@@ -122,7 +122,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: BaseAppWrapper },
+      { wrapper: ReactQueryAppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -141,7 +141,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: BaseAppWrapper },
+      { wrapper: ReactQueryAppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -160,7 +160,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: BaseAppWrapper },
+      { wrapper: ReactQueryAppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -203,7 +203,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: BaseAppWrapper },
+      { wrapper: ReactQueryAppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -266,7 +266,7 @@ describe('useUnionResource', () => {
           queryAConfig,
           queryBConfig,
         }),
-      { wrapper: BaseAppWrapper },
+      { wrapper: ReactQueryAppWrapper },
     );
 
     expect(result.current.isLoading).toBe(true);
@@ -293,7 +293,7 @@ describe('useUnionResource', () => {
           queryAConfig: queries?.queryA || queryAConfig,
           queryBConfig: queries?.queryB || queryBConfig,
         }),
-      { wrapper: BaseAppWrapper },
+      { wrapper: ReactQueryAppWrapper },
     );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
@@ -344,7 +344,9 @@ describe('useUnionResource', () => {
         }),
       {
         wrapper: ({ children }) => (
-          <BaseAppWrapper queryOptions={{ client: queryClient }}>{children}</BaseAppWrapper>
+          <ReactQueryAppWrapper queryOptions={{ client: queryClient }}>
+            {children}
+          </ReactQueryAppWrapper>
         ),
       },
     );

package/js/utils/test/render.tsx

@@ -65,7 +65,11 @@ export const render: RenderFunction = (
       rerenderOptions?: Partial<Omit<AppWrapperProps, 'testingLibraryOptions'>>,
     ) => {
       return renderResult.rerender(
-        Wrapper === null ? element : <Wrapper {...rerenderOptions}>{rerenderElement}</Wrapper>,
+        Wrapper === null ? (
+          rerenderElement
+        ) : (
+          <Wrapper {...rerenderOptions}>{rerenderElement}</Wrapper>
+        ),
       );
     },
   };

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

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

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

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

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

@@ -1,7 +1,9 @@
-import { ComponentProps, PropsWithChildren } from 'react';
+import { ComponentProps } from 'react';
 import { IntlProvider, ReactIntlErrorCode } from 'react-intl';
 
-export interface IntlWrapperProps extends PropsWithChildren, ComponentProps<typeof IntlProvider> {}
+export interface IntlWrapperProps extends Omit<ComponentProps<typeof IntlProvider>, 'locale'> {
+  locale?: string;
+}
 
 export const IntlWrapper = ({ children, ...options }: IntlWrapperProps) => (
   <IntlProvider

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

@@ -9,7 +9,7 @@ export const PresentationalAppWrapper = ({
   routerOptions,
 }: PropsWithChildren<{ intlOptions?: IntlWrapperProps; routerOptions?: RouterWrapperProps }>) => {
   return (
-    <IntlWrapper {...(intlOptions || { locale: 'en' })}>
+    <IntlWrapper {...intlOptions}>
       <CunninghamProvider>
         <RouterWrapper {...routerOptions}>{children}</RouterWrapper>
       </CunninghamProvider>

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

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from 'react';
+import { IntlWrapper } from './IntlWrapper';
+import { ReactQueryWrapper } from './ReactQueryWrapper';
+import { AppWrapperProps } from './types';
+
+export const ReactQueryAppWrapper = ({
+  children,
+  intlOptions,
+  queryOptions,
+}: PropsWithChildren<AppWrapperProps>) => {
+  return (
+    <IntlWrapper {...intlOptions}>
+      <ReactQueryWrapper {...queryOptions}>{children}</ReactQueryWrapper>
+    </IntlWrapper>
+  );
+};

package/js/widgets/Dashboard/components/DashboardAvatar/index.spec.tsx

@@ -1,15 +1,16 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { JoanieFileFactory } from 'utils/test/factories/joanie';
+import { render } from 'utils/test/render';
 import { DashboardAvatar, DashboardAvatarVariantEnum } from '.';
 
 describe('<DashboardAvatar/>', () => {
   it('should work with empty title', () => {
-    render(<DashboardAvatar title="" />);
+    render(<DashboardAvatar title="" />, { wrapper: null });
     expect(screen.getByTestId('dashboard-avatar')).toHaveTextContent('');
   });
 
   it('should display the first letter of the title', () => {
-    render(<DashboardAvatar title="Bob" />);
+    render(<DashboardAvatar title="Bob" />, { wrapper: null });
     expect(screen.getByTestId('dashboard-avatar')).toHaveTextContent('B');
   });
 
@@ -18,14 +19,16 @@ describe('<DashboardAvatar/>', () => {
       src: 'http://my.awesome.image',
       srcset: '200w http://my.awesome.image/200',
     }).one();
-    render(<DashboardAvatar title="Bob" image={image} />);
+    render(<DashboardAvatar title="Bob" image={image} />, { wrapper: null });
     const img = screen.getByAltText('Bob');
     expect(img).toHaveAttribute('src', 'http://my.awesome.image');
     expect(img).toHaveAttribute('srcset', '200w http://my.awesome.image/200');
   });
 
   it('should contain the variant class for SQUARE', () => {
-    render(<DashboardAvatar title="Bob" variant={DashboardAvatarVariantEnum.SQUARE} />);
+    render(<DashboardAvatar title="Bob" variant={DashboardAvatarVariantEnum.SQUARE} />, {
+      wrapper: null,
+    });
     expect(screen.getByTestId('dashboard-avatar')).toHaveClass('dashboard__avatar--square');
   });
 });

package/js/widgets/Dashboard/components/DashboardBox/index.spec.tsx

@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { render } from 'utils/test/render';
 import { DashboardBox } from '.';
 
 describe('<DashboardBox/>', () => {
@@ -7,6 +8,7 @@ describe('<DashboardBox/>', () => {
       <DashboardBox header="Header" footer="Footer">
         Content
       </DashboardBox>,
+      { wrapper: null },
     );
     screen.getByText('Header');
     screen.getByText('Content');