add mockFetch globally for all stories

guardian · Oct 15, 2024 · 4dedd9f · 4dedd9f
1 parent f4e6acd
commit 4dedd9f
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 5 deletions.
diff --git a/dotcom-rendering/.storybook/preview.ts b/dotcom-rendering/.storybook/preview.ts
@@ -9,6 +9,7 @@ import { resets } from '@guardian/source/foundations';
 
 import { Lazy } from '../src/components/Lazy';
 import { Picture } from '../src/components/Picture';
+import { mockFetch } from '../src/lib/mockRESTCalls';
 import { setABTests } from '../src/lib/useAB';
 import { ConfigContextDecorator } from './decorators/configContextDecorator';
 import { Preview } from '@storybook/react';
@@ -21,6 +22,8 @@ import {
 Lazy.disabled = isChromatic();
 Picture.disableLazyLoading = isChromatic();
 
+global.fetch = mockFetch;
+
 // Fix the date to prevent false negatives
 MockDate.set('Sat Jan 1 2022 12:00:00 GMT+0000 (Greenwich Mean Time)');
 

diff --git a/dotcom-rendering/src/components/ManyNewsletterSignUp.stories.tsx b/dotcom-rendering/src/components/ManyNewsletterSignUp.stories.tsx
@@ -1,9 +1,7 @@
-import { mockFetch } from '../lib/mockRESTCalls';
 import { GroupedNewslettersList } from './GroupedNewsletterList';
 import { ManyNewsletterSignUp } from './ManyNewsletterSignUp.importable';
 
 export const Default = () => {
-	global.fetch = mockFetch;
 	return (
 		<>
 			<GroupedNewslettersList

diff --git a/dotcom-rendering/src/layouts/DecideLayout.stories.tsx b/dotcom-rendering/src/layouts/DecideLayout.stories.tsx
@@ -18,7 +18,6 @@ import { embedIframe } from '../client/embedIframe';
 import { decideFormat } from '../lib/decideFormat';
 import type { ArticleFormat } from '../lib/format';
 import { getCurrentPillar } from '../lib/layoutHelpers';
-import { mockFetch } from '../lib/mockRESTCalls';
 import { extractNAV } from '../model/extract-nav';
 import type { ArticleDeprecated } from '../types/article';
 import { DecideLayout, type Props as DecideLayoutProps } from './DecideLayout';
@@ -38,7 +37,6 @@ export type HydratedLayoutDecoratorArgs = {
 const HydratedLayout: Decorator<
 	DecideLayoutProps & HydratedLayoutDecoratorArgs
 > = (Story, context) => {
-	global.fetch = mockFetch;
 	const { article } = context.args;
 	const format: ArticleFormat = decideFormat(article.format);
 	const colourScheme =

diff --git a/dotcom-rendering/src/lib/mockRESTCalls.ts b/dotcom-rendering/src/lib/mockRESTCalls.ts
@@ -19,7 +19,7 @@ const createMockResponse = (status: number, body?: any): Promise<Response> => {
 	return Promise.resolve(new Response(JSON.stringify(body), { status }));
 };
 
-export const mockFetch = (
+export const mockFetch: typeof global.fetch = (
 	input: RequestInfo | URL,
 	requestInit?: RequestInit,
 ): Promise<Response> => {