@blaze-cms/react-page-builder 0.118.0 → 0.119.0-alpha.0

package/tests/unit/src/components/Card/__snapshots__/CardContainer.test.js.snap

@@ -3,16 +3,16 @@
 exports[`CardContainer component should render with carousel if option is enabled 1`] = `
 <DocumentFragment>
   <div
-    class="card-carousel relative gap-2"
+    class="cards-carousel"
   >
     <div
-      class="card-carousel__button-wrapper absolute left-0 h-full flex justify-center items-center z-10"
+      class="cards-carousel--left-button-wrapper"
     />
     <div
-      class="card-carousel__button-wrapper absolute right-0 h-full flex justify-center items-center z-10"
+      class="cards-carousel--right-button-wrapper"
     />
     <div
-      class="card-carousel__content card-carousel__content--items-per-row-1 flex flex-nowrap p-4 gap-4 overflow-x-scroll"
+      class="cards-carousel--content items-per-row-1"
     >
       <div
         class="card card--portrait"

package/tests/unit/src/components/Carousel/Carousel.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import { render, screen, waitFor } from '@testing-library/react';
 import { getFileById } from '../../../../../src/application/query';
 import Carousel from '../../../../../src/components/Carousel';

package/tests/unit/src/components/DataSummary/DataSummaryFactory.test.js

@@ -1,11 +1,12 @@
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import '@testing-library/jest-dom/extend-expect';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { DATA_SUMMARY_MOCK } from '../../../../helpers/mocks';
 
 import DataSummaryFactory from '../../../../../src/components/DataSummary/DataSummaryFactory';
 
-jest.mock('@apollo/react-hooks', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useQuery: jest.fn()
 }));
 

package/tests/unit/src/components/EmailConfirm/EmailConfirm.test.js

@@ -3,7 +3,8 @@ import { render, act } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import EmailConfirm from '../../../../../src/components/EmailConfirm';
 
-jest.mock('react-apollo', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useMutation: jest.fn(() => [variables => variables, { loading: false }])
 }));
 

package/tests/unit/src/components/Image/GlobalLightbox/GlobalLightbox.test.js

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom/extend-expect';
-import { MockedProvider } from '@apollo/react-testing';
-import { render, act, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { render, act, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
@@ -10,6 +10,7 @@ import LIGHTBOX_MOCKS from './mocks';
 
 const [MOCK_WITH_DATA, MOCK_WITH_ERROR] = LIGHTBOX_MOCKS;
 
+const testId = 'globalLightboxImage';
 const credits = 'credits test';
 
 const mockProps = {
@@ -65,21 +66,24 @@ describe('GlobalLightbox component', () => {
   });
 
   it('should match snapshot', async () => {
-    const { asFragment } = await setupTest();
+    const { asFragment, getByTestId } = await setupTest();
+    await waitFor(() => getByTestId(testId));
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('should not render caption if image does not have it', async () => {
     const { getByTestId } = await setupTest();
-    const image = await getByTestId('globalLightboxImage');
+    await waitFor(() => getByTestId(testId));
+    const image = await getByTestId(testId);
     expect(image).toHaveAttribute('alt', '');
   });
 
   it('should return error message if error', async () => {
     const props = getMockedLightboxProps({ images: [{ imageId: 'error' }] });
     const componentMock = await setup(props, MOCK_WITH_ERROR);
-    const { container } = await renderComponent(componentMock);
-    expect(container.innerHTML).toContain('Network error: this is an error');
+    const { container, getByText } = await renderComponent(componentMock);
+    await waitFor(() => getByText('this is an error'));
+    expect(container.innerHTML).toContain('this is an error');
   });
 
   it('should render ImageDetails if shouldDisplayCredits & shouldDisplayCaptions are true', async () => {

package/tests/unit/src/components/Image/ImageFactory.test.js

@@ -3,14 +3,14 @@ import '@testing-library/jest-dom/extend-expect';
 import { render, act, waitFor } from '@testing-library/react';
 import { MockedRoot } from '@blaze-cms/tools/test-helpers/test-functions';
 import ImageFactory from '../../../../../src/components/Image/ImageFactory';
-import { MOCK_BASIC, MOCK_NO_URL, MOCK_WITH_ERR } from './mocks';
+import { MOCK_BASIC, MOCK_NO_URL, MOCK_WITH_ERR, MOCK_RELATION } from './mocks';
 
 jest.mock('@blaze-react/utils/lib/customHooks', () => ({
   useInView: jest.fn(() => [true, null])
 }));
 
 const setup = async (props, mocks) => (
-  <MockedRoot mocks={mocks} addTypename={false}>
+  <MockedRoot mocks={mocks}>
     <ImageFactory {...props} />
   </MockedRoot>
 );
@@ -30,14 +30,14 @@ const renderComponent = async component => {
 const setupTest = async (props = {}, mocks = {}) => {
   const mockProps = {
     parent: {
+      itemId: 'parentId',
       getAction: 'getPublishedPage'
     },
     imageId: 'test-id',
     url: 'www.url-test-prop.com',
     style: {},
     enableLightbox: false,
-    imageRelation: ['publishedPage.imageId'],
-
+    imageRelation: ['publishedPage.otherImageIds'],
     ...props
   };
 
@@ -65,23 +65,19 @@ describe('ImageFactory component', () => {
   it('should render image', async () => {
     const { asFragment } = await setupTest({}, MOCK_BASIC);
 
-    await waitFor(() => {
-      expect(asFragment()).toBeDefined();
-
-      expect(asFragment()).toMatchSnapshot();
-    }, options);
+    await waitFor(() => expect(asFragment()).toBeDefined(), options);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it('should render image fetching data from relation', async () => {
-    // todo: extend to fully test relation
     const entity = 'page';
-    const { asFragment } = await setupTest(
+    const { asFragment, container } = await setupTest(
       { imageId: null, entity, fetchFromRelation: true },
-      MOCK_BASIC
+      MOCK_RELATION
     );
 
     await waitFor(() => {
-      expect(asFragment()).toBeDefined();
+      expect(container.childNodes.length).toBeGreaterThan(1);
     });
     expect(asFragment()).toMatchSnapshot();
   });
@@ -97,12 +93,8 @@ describe('ImageFactory component', () => {
   });
 
   it('should return error message if error', async () => {
-    const { container } = await setupTest({ imageId: 'test-altText' }, MOCK_WITH_ERR);
-
-    await waitFor(() => {
-      expect(container).toBeDefined();
-    });
+    const { container } = await setupTest({ imageId: 'error' }, MOCK_WITH_ERR);
 
-    expect(container.innerHTML).toContain('error');
+    await waitFor(() => expect(container.innerHTML).toContain('error'));
   });
 });

package/tests/unit/src/components/Image/__snapshots__/ImageFactory.test.js.snap

@@ -20,4 +20,37 @@ exports[`ImageFactory component should render image 1`] = `
 </DocumentFragment>
 `;
 
-exports[`ImageFactory component should render image fetching data from relation 1`] = `<DocumentFragment />`;
+exports[`ImageFactory component should render image fetching data from relation 1`] = `
+<DocumentFragment>
+  <div
+    class="image "
+  >
+    <a
+      class="image__wrapper"
+      href="http://www.url-test-prop.com"
+      rel="noopener nofollow"
+      target="_blank"
+    >
+      <img
+        alt=""
+        src="test-url"
+      />
+    </a>
+  </div>
+  <div
+    class="image "
+  >
+    <a
+      class="image__wrapper"
+      href="http://www.url-test-prop.com"
+      rel="noopener nofollow"
+      target="_blank"
+    >
+      <img
+        alt=""
+        src="test-url-2"
+      />
+    </a>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/Image/mocks.js

@@ -1,10 +1,57 @@
-import { getFiles, getFileById } from '../../../../../src/application/query';
+import {
+  getFiles,
+  getFileById,
+  generateSingleItemQuery
+} from '../../../../../src/application/query';
+import { DATA_SUMMARY_MOCK } from '../../../../helpers/mocks';
 
 const MOCK_BASIC = [
+  {
+    request: {
+      query: getFileById,
+      variables: { id: 'test-id' }
+    },
+    result: {
+      data: {
+        getFile: {
+          id: 'test-id',
+          location: 'test-location',
+          mimetype: 'test-mimetype',
+          url: 'test-url',
+          data: null,
+          __typename: 'File'
+        }
+      }
+    }
+  }
+];
+
+const MOCK_RELATION = [
+  ...DATA_SUMMARY_MOCK,
+  {
+    request: {
+      query: generateSingleItemQuery('getPublishedPage', 'publishedPage { otherImageIds }'),
+      variables: {
+        id: 'parentId'
+      }
+    },
+    result: {
+      data: {
+        entityData: {
+          id: 'parentId',
+          publishedPage: {
+            otherImageIds: ['test-id', 'test-id-2'],
+            __typename: 'PublishedPage'
+          },
+          __typename: 'PublishedPage'
+        }
+      }
+    }
+  },
   {
     request: {
       query: getFiles,
-      variables: { where: { id: { _in: ['test-id'] } } }
+      variables: { where: { id: { _in: ['test-id', 'test-id-2'] } } }
     },
     result: {
       data: {
@@ -14,7 +61,16 @@ const MOCK_BASIC = [
             location: 'test-location',
             mimetype: 'test-mimetype',
             url: 'test-url',
-            data: null
+            data: null,
+            __typename: 'File'
+          },
+          {
+            id: 'test-id-2',
+            location: 'test-location',
+            mimetype: 'test-mimetype',
+            url: 'test-url-2',
+            data: null,
+            __typename: 'File'
           }
         ]
       }
@@ -25,22 +81,21 @@ const MOCK_BASIC = [
 const MOCK_NO_URL = [
   {
     request: {
-      query: getFiles,
-      variables: { where: { id: { _in: ['test-no-url'] } } }
+      query: getFileById,
+      variables: { id: 'test-no-url' }
     },
     result: {
       data: {
-        getFiles: [
-          {
-            id: 'test-no-url',
-            location: 'test-location',
-            mimetype: 'test-mimetype',
-            url: null,
-            data: {
-              caption: 'image caption'
-            }
-          }
-        ]
+        getFile: {
+          id: 'test-no-url',
+          location: 'test-location',
+          mimetype: 'test-mimetype',
+          url: null,
+          data: {
+            caption: 'image caption'
+          },
+          __typename: 'File'
+        }
       }
     }
   }
@@ -49,10 +104,8 @@ const MOCK_NO_URL = [
 const MOCK_WITH_ERR = [
   {
     request: {
-      query: getFiles,
-      variables: {
-        variables: { where: { id: { _in: ['error'] } } }
-      }
+      query: getFileById,
+      variables: { id: 'error' }
     },
     error: new Error('this is an error')
   }
@@ -74,7 +127,8 @@ const MOCKS = [
             location: 'test-location',
             mimetype: 'test-mimetype',
             url: 'test-url',
-            data: null
+            data: null,
+            __typename: 'File'
           }
         }
       }
@@ -95,7 +149,8 @@ const MOCKS = [
             url: 'test-url',
             data: {
               caption: 'image caption'
-            }
+            },
+            __typename: 'File'
           }
         }
       }
@@ -116,7 +171,8 @@ const MOCKS = [
             url: 'test-url',
             data: {
               altText: 'image alt text'
-            }
+            },
+            __typename: 'File'
           }
         }
       }
@@ -148,4 +204,4 @@ const MOCKS = [
   ]
 ];
 
-export { MOCKS, MOCK_BASIC, MOCK_WITH_ERR, MOCK_NO_URL };
+export { MOCKS, MOCK_BASIC, MOCK_WITH_ERR, MOCK_NO_URL, MOCK_RELATION };

package/tests/unit/src/components/List/ListRender.test.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import ListRender from '../../../../../src/components/List/ListRender';
 
-jest.mock('@apollo/react-hooks', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useQuery: jest.fn(({ data, loading, error, fetchMore }) => ({ data, loading, error, fetchMore }))
 }));
 

package/tests/unit/src/components/Login/Login.test.js

@@ -9,7 +9,8 @@ jest.mock('@blaze-cms/core-auth-ui', () => ({
     .mockImplementationOnce(() => ({ isLoggedIn: true }))
 }));
 
-jest.mock('react-apollo', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useMutation: jest.fn(() => [variables => variables, { client: { resetStore: null } }])
 }));
 

package/tests/unit/src/components/PasswordReset/PasswordReset.test.js

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import { RESET_USER_PASSWORD_MUTATION } from '@blaze-cms/core-auth-ui';
 import { fireEvent, render, queryByAttribute, waitFor } from '@testing-library/react';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import PasswordReset from '../../../../../src/components/PasswordReset';
 
 jest.mock('next/router', () => ({
@@ -31,7 +31,7 @@ const mocks = [
 
 const setup = () => {
   const resetComponent = render(
-    <MockedProvider mocks={mocks} addTypename={false}>
+    <MockedProvider mocks={mocks}>
       <PasswordReset>
         <div>child</div>
       </PasswordReset>

package/tests/unit/src/components/PasswordResetRequest/PasswordResetRequest.test.js

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import { REQUEST_USER_PASSWORD_RESET_MUTATION } from '@blaze-cms/core-auth-ui';
 import { fireEvent, render, waitFor } from '@testing-library/react';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import PasswordResetRequest from '../../../../../src/components/PasswordResetRequest';
 
 jest.mock('next/router', () => ({
@@ -28,7 +28,7 @@ const mocks = [
 
 const setup = () => {
   const resetRequestComponent = render(
-    <MockedProvider mocks={mocks} addTypename={false}>
+    <MockedProvider mocks={mocks}>
       <PasswordResetRequest modifier="pass-request-reset">
         <div className="child_1">one child</div>
       </PasswordResetRequest>

package/tests/unit/src/components/SearchFilter/SearchFilterContainer.test.js

@@ -4,7 +4,8 @@ import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import { MOCKED_PROPS_SEARCH_FILTER } from '../../../../helpers/mocks';
 import SearchFilterContainer from '../../../../../src/components/SearchFilter';
 
-jest.mock('@apollo/react-hooks', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useQuery: jest.fn(() => ({ data: {}, loading: false, error: null }))
 }));
 

package/tests/unit/src/components/Video/providers/JWPlayer/JWPlayerProvider.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import { render, act } from '@testing-library/react';
 import JWPlayerProvider from '../../../../../../../src/components/Video/providers/JWPlayer/JWPlayerProvider';
 import IMAGE_MOCKS, { getMockedJWPlayerProps } from './mocks';

package/tests/unit/src/components/__snapshots__/CarouselWrapper.test.js.snap

@@ -3,16 +3,16 @@
 exports[`CarouselWrapper component should add banner modifier if passed 1`] = `
 <DocumentFragment>
   <div
-    class="card-carousel relative gap-2 has-a-banner"
+    class="cards-carousel has-a-banner"
   >
     <div
-      class="card-carousel__button-wrapper absolute left-0 h-full flex justify-center items-center z-10"
+      class="cards-carousel--left-button-wrapper"
     />
     <div
-      class="card-carousel__button-wrapper absolute right-0 h-full flex justify-center items-center z-10"
+      class="cards-carousel--right-button-wrapper"
     />
     <div
-      class="card-carousel__content card-carousel__content--items-per-row-0 flex flex-nowrap p-4 gap-4 overflow-x-scroll"
+      class="cards-carousel--content items-per-row-0"
     >
       <div>
         <div>
@@ -39,16 +39,16 @@ exports[`CarouselWrapper component should add banner modifier if passed 1`] = `
 exports[`CarouselWrapper component should add modifier bassed on itemsPerRow 1`] = `
 <DocumentFragment>
   <div
-    class="card-carousel relative gap-2"
+    class="cards-carousel"
   >
     <div
-      class="card-carousel__button-wrapper absolute left-0 h-full flex justify-center items-center z-10"
+      class="cards-carousel--left-button-wrapper"
     />
     <div
-      class="card-carousel__button-wrapper absolute right-0 h-full flex justify-center items-center z-10"
+      class="cards-carousel--right-button-wrapper"
     />
     <div
-      class="card-carousel__content card-carousel__content--items-per-row-3 flex flex-nowrap p-4 gap-4 overflow-x-scroll"
+      class="cards-carousel--content items-per-row-3"
     >
       <div>
         <div>
@@ -75,16 +75,16 @@ exports[`CarouselWrapper component should add modifier bassed on itemsPerRow 1`]
 exports[`CarouselWrapper component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="card-carousel relative gap-2"
+    class="cards-carousel"
   >
     <div
-      class="card-carousel__button-wrapper absolute left-0 h-full flex justify-center items-center z-10"
+      class="cards-carousel--left-button-wrapper"
     />
     <div
-      class="card-carousel__button-wrapper absolute right-0 h-full flex justify-center items-center z-10"
+      class="cards-carousel--right-button-wrapper"
     />
     <div
-      class="card-carousel__content card-carousel__content--items-per-row-0 flex flex-nowrap p-4 gap-4 overflow-x-scroll"
+      class="cards-carousel--content items-per-row-0"
     >
       <div>
         <div>

package/tests/unit/src/helpers/build-props-query.test.js

@@ -55,7 +55,7 @@ describe('get card render props', () => {
     };
     const query = buildPropsQuery(_data, [], cardProps);
     expect(query).toEqual(
-      'id,name,url,sponsored,featured,category{name,listingPageId,listingPageEntity, publishedListingPage{url}},image{url,data}'
+      'id,name,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}},image{id,url,data}'
     );
   });
 
@@ -86,18 +86,18 @@ describe('get card render props', () => {
       displayThumbnail: false
     });
     expect(query).toEqual(
-      'id,name,alternativePreHeader{name},alternativeHeadline,url,sponsored,featured,category{name,listingPageId,listingPageEntity, publishedListingPage{url}}'
+      'id,name,alternativePreHeader{name},alternativeHeadline,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}}'
     );
   });
 
   it('should not include category if the schema does not have a category', () => {
     const query = buildPropsQuery(data, [], cardProps);
-    expect(query).toEqual('id,name,url,sponsored,featured,image{url,data}');
+    expect(query).toEqual('id,name,url,sponsored,featured,image{id,url,data}');
   });
 
   it('should return complex props when base includes published', () => {
     const query = buildPropsQuery(data, ['published.date'], cardProps);
-    expect(query).toEqual('id,name,url,sponsored,featured,image{url,data},published{date,url}');
+    expect(query).toEqual('id,name,url,sponsored,featured,image{id,url,data},published{date,url}');
   });
 
   it('should return result as if isCard was false when isCard is not passed', () => {
@@ -107,7 +107,7 @@ describe('get card render props', () => {
 
   it('should return result as if isCard was false when extraProps were not passed', () => {
     const query = buildPropsQuery(data, undefined, cardProps);
-    expect(query).toEqual('id,name,url,sponsored,featured,image{url,data}');
+    expect(query).toEqual('id,name,url,sponsored,featured,image{id,url,data}');
   });
 
   it('should return a string with respective props query when isCard is passed as true', () => {
@@ -123,7 +123,7 @@ describe('get card render props', () => {
     };
     const query = buildPropsQuery(_data, [], cardProps);
     expect(query).toEqual(
-      'id,name,category{name,listingPageId,listingPageEntity, publishedListingPage{url}}'
+      'id,name,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}}'
     );
   });
 

package/tests/unit/src/hooks/use-get-entity-schema-as-obj.test.js

@@ -1,9 +1,9 @@
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { useGetEntitySchemasAsObj } from '../../../../src/hooks';
 
 import { getMultipleSchema } from '../../../../src/application/query';
 
-jest.mock('@apollo/react-hooks', () => ({
+jest.mock('@apollo/client', () => ({
   useQuery: jest.fn(() => ({ data: {}, loading: false, error: null }))
 }));
 

package/tests/unit/src/hooks/use-get-image-id-from-relation.test.js

@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react-hooks';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import React from 'react';
 import useGetImageIdFromRelation from '../../../../src/hooks/use-get-image-id-from-relation';
 import * as query from '../../../../src/application/query';

package/tests/unit/src/hooks/use-get-images.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import { renderHook, act } from '@testing-library/react-hooks';
 import { useGetImages } from '../../../../src/hooks';
 import { getFiles, getFileById } from '../../../../src/application/query';
@@ -10,8 +10,6 @@ const id2 = 'test-id-2';
 const resultData = [
   {
     id: id1,
-    location: 'test-location-1',
-    mimetype: 'test-mimetype-1',
     url: 'test-url-1',
     data: {
       caption: 'test-caption-1'
@@ -19,8 +17,6 @@ const resultData = [
   },
   {
     id: id2,
-    location: 'test-location-2',
-    mimetype: 'test-mimetype-2',
     url: 'test-url-2',
     data: null
   }
@@ -67,9 +63,7 @@ const STRING_MOCK = [
 
 describe('UseGetImages hook', () => {
   const arrayWrapper = ({ children }) => (
-    <MockedProvider mocks={ARRAY_MOCK} addTypename={false}>
-      {children}
-    </MockedProvider>
+    <MockedProvider mocks={ARRAY_MOCK}>{children}</MockedProvider>
   );
 
   it('should be a function', () => {
@@ -78,9 +72,7 @@ describe('UseGetImages hook', () => {
 
   it('should return expected value (id is an array)', async () => {
     const wrapper = ({ children }) => (
-      <MockedProvider mocks={ARRAY_MOCK} addTypename={false}>
-        {children}
-      </MockedProvider>
+      <MockedProvider mocks={ARRAY_MOCK}>{children}</MockedProvider>
     );
     const ids = [id1, id2];
     const hasMultipleIds = true;
@@ -147,9 +139,7 @@ describe('UseGetImages hook', () => {
 
   it('should return expected value (id is a string)', async () => {
     const wrapper = ({ children }) => (
-      <MockedProvider mocks={STRING_MOCK} addTypename={false}>
-        {children}
-      </MockedProvider>
+      <MockedProvider mocks={STRING_MOCK}>{children}</MockedProvider>
     );
 
     const { result, waitForNextUpdate } = renderHook(() => useGetImages(id1), {