test: add queryclientprovider to fix errors

openedx · May 2, 2024 · c0404ae · c0404ae
1 parent 22084d4
commit c0404ae
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 13 deletions.
diff --git a/src/CourseAuthoringPage.test.jsx b/src/CourseAuthoringPage.test.jsx
@@ -7,6 +7,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import initializeStore from './store';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import PagesAndResources from './pages-and-resources/PagesAndResources';
@@ -38,6 +39,8 @@ beforeEach(() => {
   axiosMock = new MockAdapter(getAuthenticatedHttpClient());
 });
 
+const queryClient = new QueryClient();
+
 describe('Editor Pages Load no header', () => {
   const mockStoreSuccess = async () => {
     const apiBaseUrl = getConfig().STUDIO_BASE_URL;
@@ -53,9 +56,11 @@ describe('Editor Pages Load no header', () => {
     const wrapper = render(
       <AppProvider store={store}>
         <IntlProvider locale="en">
-          <CourseAuthoringPage courseId={courseId}>
-            <PagesAndResources courseId={courseId} />
-          </CourseAuthoringPage>
+          <QueryClientProvider client={queryClient}>
+            <CourseAuthoringPage courseId={courseId}>
+              <PagesAndResources courseId={courseId} />
+            </CourseAuthoringPage>
+          </QueryClientProvider>
         </IntlProvider>
       </AppProvider>
       ,

diff --git a/src/CourseAuthoringRoutes.test.jsx b/src/CourseAuthoringRoutes.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp } from '@edx/frontend-platform';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import CourseAuthoringRoutes from './CourseAuthoringRoutes';
@@ -48,6 +49,8 @@ jest.mock('./custom-pages/CustomPages', () => (props) => {
   return customPagesMockText;
 });
 
+const queryClient = new QueryClient();
+
 describe('<CourseAuthoringRoutes>', () => {
   beforeEach(() => {
     initializeMockApp({
@@ -65,7 +68,9 @@ describe('<CourseAuthoringRoutes>', () => {
     render(
       <AppProvider store={store} wrapWithRouter={false}>
         <MemoryRouter initialEntries={['/pages-and-resources']}>
-          <CourseAuthoringRoutes />
+          <QueryClientProvider client={queryClient}>
+            <CourseAuthoringRoutes />
+          </QueryClientProvider>
         </MemoryRouter>
       </AppProvider>,
     );
@@ -82,7 +87,9 @@ describe('<CourseAuthoringRoutes>', () => {
     render(
       <AppProvider store={store} wrapWithRouter={false}>
         <MemoryRouter initialEntries={['/editor/video/block-id']}>
-          <CourseAuthoringRoutes />
+          <QueryClientProvider client={queryClient}>
+            <CourseAuthoringRoutes />
+          </QueryClientProvider>
         </MemoryRouter>
       </AppProvider>,
     );
@@ -100,7 +107,9 @@ describe('<CourseAuthoringRoutes>', () => {
     render(
       <AppProvider store={store} wrapWithRouter={false}>
         <MemoryRouter initialEntries={['/editor/course-videos/block-id']}>
-          <CourseAuthoringRoutes />
+          <QueryClientProvider client={queryClient}>
+            <CourseAuthoringRoutes />
+          </QueryClientProvider>
         </MemoryRouter>
       </AppProvider>,
     );

diff --git a/src/accessibility-page/AccessibilityPage.test.jsx b/src/accessibility-page/AccessibilityPage.test.jsx
@@ -5,6 +5,7 @@ import {
 import { AppProvider } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { initializeMockApp } from '@edx/frontend-platform';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import initializeStore from '../store';
 import AccessibilityPage from './index';
 
@@ -15,11 +16,15 @@ const initialState = {
 };
 let store;
 
+const queryClient = new QueryClient();
+
 const renderComponent = () => {
   render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <AccessibilityPage />
+        <QueryClientProvider client={queryClient}>
+          <AccessibilityPage />
+        </QueryClientProvider>
       </AppProvider>
     </IntlProvider>,
   );

diff --git a/src/course-rerun/CourseRerun.test.jsx b/src/course-rerun/CourseRerun.test.jsx
@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { initializeMockApp } from '@edx/frontend-platform';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 import {
@@ -33,12 +34,16 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
+const queryClient = new QueryClient();
+
 const RootWrapper = () => (
   <MemoryRouter>
     <AppProvider store={store} wrapWithRouter={false}>
-      <IntlProvider locale="en">
-        <CourseRerun intl={injectIntl} />
-      </IntlProvider>
+      <QueryClientProvider client={queryClient}>
+        <IntlProvider locale="en">
+          <CourseRerun intl={injectIntl} />
+        </IntlProvider>
+      </QueryClientProvider>
     </AppProvider>
   </MemoryRouter>
 );

diff --git a/src/studio-home/StudioHome.test.jsx b/src/studio-home/StudioHome.test.jsx
@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { AppProvider } from '@edx/frontend-platform/react';
 import {
   act, fireEvent, render, waitFor,
@@ -41,11 +42,15 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
+const queryClient = new QueryClient();
+
 const RootWrapper = () => (
   <AppProvider store={store}>
-    <IntlProvider locale="en" messages={{}}>
-      <StudioHome intl={injectIntl} />
-    </IntlProvider>
+    <QueryClientProvider client={queryClient}>
+      <IntlProvider locale="en" messages={{}}>
+        <StudioHome intl={injectIntl} />
+      </IntlProvider>
+    </QueryClientProvider>
   </AppProvider>
 );