diff --git a/dotcom-rendering/scripts/jest/setup.ts b/dotcom-rendering/scripts/jest/setup.ts
index 299a0b66617..247ca378647 100644
--- a/dotcom-rendering/scripts/jest/setup.ts
+++ b/dotcom-rendering/scripts/jest/setup.ts
@@ -113,12 +113,3 @@ global.TextDecoder = TextDecoder as unknown as typeof global.TextDecoder;
 
 // Mocks the version number used by CDK, we don't want our tests to fail every time we update our cdk dependency.
 jest.mock('@guardian/cdk/lib/constants/tracking-tag');
-
-// Mocks the useConfig hook in ConfigContext, so that we don't have to use the provider all the time
-jest.mock('../../src/components/ConfigContext.tsx', () => {
-	const mockConfig = { renderingTarget: 'Web' };
-	return {
-		...jest.requireActual('../../src/components/ConfigContext.tsx'),
-		useConfig: () => mockConfig,
-	};
-});
diff --git a/dotcom-rendering/src/components/ArticleMeta.test.tsx b/dotcom-rendering/src/components/ArticleMeta.test.tsx
index ddefa7c6874..92f3675c484 100644
--- a/dotcom-rendering/src/components/ArticleMeta.test.tsx
+++ b/dotcom-rendering/src/components/ArticleMeta.test.tsx
@@ -2,6 +2,7 @@ import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
 import { render } from '@testing-library/react';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import { ArticleMeta } from './ArticleMeta';
+import { ConfigProvider } from './ConfigContext';
 
 jest.mock('../lib/bridgetApi', () => jest.fn());
 
@@ -14,26 +15,28 @@ describe('ArticleMeta', () => {
 		};
 
 		const { container } = render(
-			<ArticleMeta
-				format={format}
-				pageId="1234"
-				webTitle="A title"
-				byline="Observer writers"
-				tags={[
-					{
-						id: 'lifeandstyle/series/observer-design',
-						type: 'Series',
-						title: 'Observer Design',
-					},
-				]}
-				primaryDateline="primary date line"
-				secondaryDateline="secondary date line"
-				isCommentable={false}
-				discussionApiUrl=""
-				shortUrlId=""
-				ajaxUrl=""
-				showShareCount={true}
-			/>,
+			<ConfigProvider value={{ renderingTarget: 'Web' }}>
+				<ArticleMeta
+					format={format}
+					pageId="1234"
+					webTitle="A title"
+					byline="Observer writers"
+					tags={[
+						{
+							id: 'lifeandstyle/series/observer-design',
+							type: 'Series',
+							title: 'Observer Design',
+						},
+					]}
+					primaryDateline="primary date line"
+					secondaryDateline="secondary date line"
+					isCommentable={false}
+					discussionApiUrl=""
+					shortUrlId=""
+					ajaxUrl=""
+					showShareCount={true}
+				/>
+			</ConfigProvider>,
 		);
 
 		expect(
@@ -54,26 +57,28 @@ describe('ArticleMeta', () => {
 		};
 
 		const { container } = render(
-			<ArticleMeta
-				format={format}
-				pageId="1234"
-				webTitle="A title"
-				byline="Observer writers"
-				tags={[
-					{
-						id: 'lifeandstyle/series/observer-design',
-						type: 'Series',
-						title: 'Observer Design',
-					},
-				]}
-				primaryDateline="primary date line"
-				secondaryDateline="secondary date line"
-				isCommentable={false}
-				discussionApiUrl=""
-				shortUrlId=""
-				ajaxUrl=""
-				showShareCount={true}
-			/>,
+			<ConfigProvider value={{ renderingTarget: 'Web' }}>
+				<ArticleMeta
+					format={format}
+					pageId="1234"
+					webTitle="A title"
+					byline="Observer writers"
+					tags={[
+						{
+							id: 'lifeandstyle/series/observer-design',
+							type: 'Series',
+							title: 'Observer Design',
+						},
+					]}
+					primaryDateline="primary date line"
+					secondaryDateline="secondary date line"
+					isCommentable={false}
+					discussionApiUrl=""
+					shortUrlId=""
+					ajaxUrl=""
+					showShareCount={true}
+				/>
+			</ConfigProvider>,
 		);
 
 		expect(
diff --git a/dotcom-rendering/src/components/BylineLink.test.tsx b/dotcom-rendering/src/components/BylineLink.test.tsx
index cb930043e9d..722ca4bb16d 100644
--- a/dotcom-rendering/src/components/BylineLink.test.tsx
+++ b/dotcom-rendering/src/components/BylineLink.test.tsx
@@ -7,6 +7,7 @@ import {
 	BylineLink,
 	SPECIAL_REGEX_CHARACTERS,
 } from './BylineLink';
+import { ConfigProvider } from './ConfigContext';
 
 jest.mock('../lib/bridgetApi', jest.fn());
 
@@ -103,15 +104,17 @@ describe('BylineLink', () => {
 		];
 
 		const { container } = render(
-			<BylineLink
-				byline={byline}
-				tags={tags}
-				format={{
-					display: ArticleDisplay.Standard,
-					design: ArticleDesign.Standard,
-					theme: Pillar.News,
-				}}
-			/>,
+			<ConfigProvider value={{ renderingTarget: 'Web' }}>
+				<BylineLink
+					byline={byline}
+					tags={tags}
+					format={{
+						display: ArticleDisplay.Standard,
+						design: ArticleDesign.Standard,
+						theme: Pillar.News,
+					}}
+				/>
+			</ConfigProvider>,
 		);
 
 		const links = container.querySelectorAll('a');
@@ -136,15 +139,17 @@ describe('BylineLink', () => {
 			},
 		];
 		const { container } = render(
-			<BylineLink
-				byline={byline}
-				tags={tags}
-				format={{
-					display: ArticleDisplay.Standard,
-					design: ArticleDesign.Standard,
-					theme: Pillar.News,
-				}}
-			/>,
+			<ConfigProvider value={{ renderingTarget: 'Web' }}>
+				<BylineLink
+					byline={byline}
+					tags={tags}
+					format={{
+						display: ArticleDisplay.Standard,
+						design: ArticleDesign.Standard,
+						theme: Pillar.News,
+					}}
+				/>
+			</ConfigProvider>,
 		);
 
 		const links = container.querySelectorAll('a');
@@ -171,15 +176,17 @@ describe('BylineLink', () => {
 		];
 
 		const { container } = render(
-			<BylineLink
-				byline={byline}
-				tags={tags}
-				format={{
-					display: ArticleDisplay.Standard,
-					design: ArticleDesign.Standard,
-					theme: Pillar.News,
-				}}
-			/>,
+			<ConfigProvider value={{ renderingTarget: 'Web' }}>
+				<BylineLink
+					byline={byline}
+					tags={tags}
+					format={{
+						display: ArticleDisplay.Standard,
+						design: ArticleDesign.Standard,
+						theme: Pillar.News,
+					}}
+				/>
+			</ConfigProvider>,
 		);
 
 		const links = container.querySelectorAll('a');
diff --git a/dotcom-rendering/src/components/ConfigContext.test.tsx b/dotcom-rendering/src/components/ConfigContext.test.tsx
index 85b40baca79..99ce67c5e26 100644
--- a/dotcom-rendering/src/components/ConfigContext.test.tsx
+++ b/dotcom-rendering/src/components/ConfigContext.test.tsx
@@ -1,8 +1,5 @@
 import { render } from '@testing-library/react';
-
-// This file is globally mocked in "/dotcom-rendering/scripts/jest/setup.ts"
-// so we need to explicitly override this in order to test its functionality
-const { useConfig, ConfigProvider } = jest.requireActual('./ConfigContext.tsx');
+import { ConfigProvider, useConfig } from './ConfigContext';
 
 const testId = 'testId';
 const TestComponent = () => {
@@ -22,7 +19,7 @@ describe('ConfigContext', () => {
 	});
 
 	describe('with ConfigProvider', () => {
-		it.each(['Web', 'Apps'])(
+		it.each(['Web', 'Apps'] as const)(
 			'provides correct context through useConfig hook with renderingTarget: "%s"',
 			(renderingTarget) => {
 				const config = { renderingTarget };
diff --git a/dotcom-rendering/src/components/Contributor.test.tsx b/dotcom-rendering/src/components/Contributor.test.tsx
index 31afd436522..d08910c73f2 100644
--- a/dotcom-rendering/src/components/Contributor.test.tsx
+++ b/dotcom-rendering/src/components/Contributor.test.tsx
@@ -1,6 +1,7 @@
 import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
 import { render } from '@testing-library/react';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
+import { ConfigProvider } from './ConfigContext';
 import { Contributor } from './Contributor';
 
 jest.mock('../lib/bridgetApi', () => jest.fn());
@@ -14,17 +15,19 @@ describe('Contributor', () => {
 		};
 
 		const { container } = render(
-			<Contributor
-				format={format}
-				byline="Observer writers"
-				tags={[
-					{
-						id: 'lifeandstyle/series/observer-design',
-						type: 'Series',
-						title: 'Observer Design',
-					},
-				]}
-			/>,
+			<ConfigProvider value={{ renderingTarget: 'Web' }}>
+				<Contributor
+					format={format}
+					byline="Observer writers"
+					tags={[
+						{
+							id: 'lifeandstyle/series/observer-design',
+							type: 'Series',
+							title: 'Observer Design',
+						},
+					]}
+				/>
+			</ConfigProvider>,
 		);
 
 		expect(
@@ -40,17 +43,19 @@ describe('Contributor', () => {
 		};
 
 		const { container } = render(
-			<Contributor
-				format={format}
-				byline="Observer writers"
-				tags={[
-					{
-						id: 'lifeandstyle/series/observer-design',
-						type: 'Series',
-						title: 'Observer Design',
-					},
-				]}
-			/>,
+			<ConfigProvider value={{ renderingTarget: 'Web' }}>
+				<Contributor
+					format={format}
+					byline="Observer writers"
+					tags={[
+						{
+							id: 'lifeandstyle/series/observer-design',
+							type: 'Series',
+							title: 'Observer Design',
+						},
+					]}
+				/>
+			</ConfigProvider>,
 		);
 
 		expect(
diff --git a/dotcom-rendering/src/components/MostViewedFooter.test.tsx b/dotcom-rendering/src/components/MostViewedFooter.test.tsx
index afe937cca6b..1c7ccacc6b9 100644
--- a/dotcom-rendering/src/components/MostViewedFooter.test.tsx
+++ b/dotcom-rendering/src/components/MostViewedFooter.test.tsx
@@ -1,6 +1,7 @@
 import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
 import { fireEvent, render } from '@testing-library/react';
 import { useApi as useApi_ } from '../lib/useApi';
+import { ConfigProvider } from './ConfigContext';
 import { responseWithTwoTabs } from './MostViewed.mocks';
 import { MostViewedFooterData } from './MostViewedFooterData.importable';
 
@@ -19,19 +20,21 @@ describe('MostViewedFooterData', () => {
 	});
 
 	it('should call the api and render the response as expected', async () => {
-		useApi.mockReturnValue({ data: responseWithTwoTabs });
+		useApi.mockReturnValue({ data: responseWithTwoTabs, loading: false });
 
 		const { getByText, getAllByText, getByTestId } = render(
-			<MostViewedFooterData
-				sectionId="Section Name"
-				format={{
-					theme: Pillar.News,
-					design: ArticleDesign.Standard,
-					display: ArticleDisplay.Standard,
-				}}
-				ajaxUrl="https://api.nextgen.guardianapps.co.uk"
-				edition="UK"
-			/>,
+			<ConfigProvider value={{ renderingTarget: 'Web' }}>
+				<MostViewedFooterData
+					sectionId="Section Name"
+					format={{
+						theme: Pillar.News,
+						design: ArticleDesign.Standard,
+						display: ArticleDisplay.Standard,
+					}}
+					ajaxUrl="https://api.nextgen.guardianapps.co.uk"
+					edition="UK"
+				/>
+			</ConfigProvider>,
 		);
 
 		// Calls api once only
@@ -56,19 +59,21 @@ describe('MostViewedFooterData', () => {
 	});
 
 	it('should change the items shown when the associated tab is clicked', async () => {
-		useApi.mockReturnValue({ data: responseWithTwoTabs });
+		useApi.mockReturnValue({ data: responseWithTwoTabs, loading: false });
 
 		const { getByTestId, getByText } = render(
-			<MostViewedFooterData
-				sectionId="Section Name"
-				format={{
-					display: ArticleDisplay.Standard,
-					design: ArticleDesign.Standard,
-					theme: Pillar.News,
-				}}
-				ajaxUrl="https://api.nextgen.guardianapps.co.uk"
-				edition="UK"
-			/>,
+			<ConfigProvider value={{ renderingTarget: 'Web' }}>
+				<MostViewedFooterData
+					sectionId="Section Name"
+					format={{
+						display: ArticleDisplay.Standard,
+						design: ArticleDesign.Standard,
+						theme: Pillar.News,
+					}}
+					ajaxUrl="https://api.nextgen.guardianapps.co.uk"
+					edition="UK"
+				/>
+			</ConfigProvider>,
 		);
 
 		const firstHeading = responseWithTwoTabs.tabs[0].heading;
@@ -113,19 +118,22 @@ describe('MostViewedFooterData', () => {
 					],
 				},
 			],
+			loading: false,
 		});
 
 		const { getByText } = render(
-			<MostViewedFooterData
-				sectionId="Section Name"
-				format={{
-					display: ArticleDisplay.Standard,
-					design: ArticleDesign.Standard,
-					theme: Pillar.News,
-				}}
-				ajaxUrl="https://api.nextgen.guardianapps.co.uk"
-				edition="UK"
-			/>,
+			<ConfigProvider value={{ renderingTarget: 'Web' }}>
+				<MostViewedFooterData
+					sectionId="Section Name"
+					format={{
+						display: ArticleDisplay.Standard,
+						design: ArticleDesign.Standard,
+						theme: Pillar.News,
+					}}
+					ajaxUrl="https://api.nextgen.guardianapps.co.uk"
+					edition="UK"
+				/>
+			</ConfigProvider>,
 		);
 
 		expect(getByText('Live')).toBeInTheDocument();
@@ -155,38 +163,43 @@ describe('MostViewedFooterData', () => {
 					],
 				},
 			],
+			loading: false,
 		});
 
 		const { queryByText } = render(
-			<MostViewedFooterData
-				sectionId="Section Name"
-				format={{
-					display: ArticleDisplay.Standard,
-					design: ArticleDesign.Standard,
-					theme: Pillar.News,
-				}}
-				ajaxUrl="https://api.nextgen.guardianapps.co.uk"
-				edition="UK"
-			/>,
+			<ConfigProvider value={{ renderingTarget: 'Web' }}>
+				<MostViewedFooterData
+					sectionId="Section Name"
+					format={{
+						display: ArticleDisplay.Standard,
+						design: ArticleDesign.Standard,
+						theme: Pillar.News,
+					}}
+					ajaxUrl="https://api.nextgen.guardianapps.co.uk"
+					edition="UK"
+				/>
+			</ConfigProvider>,
 		);
 
 		expect(queryByText('Live')).not.toBeInTheDocument();
 	});
 
 	it('should render the Ophan data link names as expected', async () => {
-		useApi.mockReturnValue({ data: responseWithTwoTabs });
+		useApi.mockReturnValue({ data: responseWithTwoTabs, loading: false });
 
 		const { asFragment } = render(
-			<MostViewedFooterData
-				sectionId="Section Name"
-				format={{
-					display: ArticleDisplay.Standard,
-					design: ArticleDesign.Standard,
-					theme: Pillar.News,
-				}}
-				ajaxUrl="https://api.nextgen.guardianapps.co.uk"
-				edition="UK"
-			/>,
+			<ConfigProvider value={{ renderingTarget: 'Web' }}>
+				<MostViewedFooterData
+					sectionId="Section Name"
+					format={{
+						display: ArticleDisplay.Standard,
+						design: ArticleDesign.Standard,
+						theme: Pillar.News,
+					}}
+					ajaxUrl="https://api.nextgen.guardianapps.co.uk"
+					edition="UK"
+				/>
+			</ConfigProvider>,
 		);
 
 		// Renders tab data link name