diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx
index eb113cb5fd..57f0c01f39 100644
--- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx
+++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx
@@ -19,7 +19,7 @@ import React, { ComponentType, PropsWithChildren } from 'react';
 import Grid from '@material-ui/core/Grid';
 import LabelIcon from '@material-ui/icons/Label';
 
-import { TestApiProvider } from '@backstage/test-utils';
+import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils';
 
 import { searchApiRef, MockSearchApi } from '../../api';
 import { SearchContextProvider } from '../../context';
@@ -31,17 +31,18 @@ export default {
   title: 'Plugins/Search/SearchAutocomplete',
   component: SearchAutocomplete,
   decorators: [
-    (Story: ComponentType<PropsWithChildren<{}>>) => (
-      <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
-        <SearchContextProvider>
-          <Grid container direction="row">
-            <Grid item xs={12}>
-              <Story />
+    (Story: ComponentType<PropsWithChildren<{}>>) =>
+      wrapInTestApp(
+        <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
+          <SearchContextProvider>
+            <Grid container direction="row">
+              <Grid item xs={12}>
+                <Story />
+              </Grid>
             </Grid>
-          </Grid>
-        </SearchContextProvider>
-      </TestApiProvider>
-    ),
+          </SearchContextProvider>
+        </TestApiProvider>,
+      ),
   ],
 };
 
diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx
index 852a3a1881..7bbd75d3f3 100644
--- a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx
+++ b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx
@@ -18,7 +18,7 @@ import React, { ComponentType, PropsWithChildren } from 'react';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 
-import { TestApiProvider } from '@backstage/test-utils';
+import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils';
 
 import { searchApiRef, MockSearchApi } from '../../api';
 import { SearchContextProvider } from '../../context';
@@ -28,18 +28,22 @@ import { SearchBar } from './SearchBar';
 export default {
   title: 'Plugins/Search/SearchBar',
   component: SearchBar,
+  loaders: [
+    async () => ({ component: (await import('./SearchBar')).SearchBar }),
+  ],
   decorators: [
-    (Story: ComponentType<PropsWithChildren<{}>>) => (
-      <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
-        <SearchContextProvider>
-          <Grid container direction="row">
-            <Grid item xs={12}>
-              <Story />
+    (Story: ComponentType<PropsWithChildren<{}>>) =>
+      wrapInTestApp(
+        <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
+          <SearchContextProvider>
+            <Grid container direction="row">
+              <Grid item xs={12}>
+                <Story />
+              </Grid>
             </Grid>
-          </Grid>
-        </SearchContextProvider>
-      </TestApiProvider>
-    ),
+          </SearchContextProvider>
+        </TestApiProvider>,
+      ),
   ],
 };