diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx
index 72c7deb06b..1340bb7dc3 100644
--- a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx
+++ b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx
@@ -16,7 +16,13 @@
 
 import { Grid, makeStyles, Paper } from '@material-ui/core';
 import React, { ComponentType } from 'react';
-import { SearchContextProviderForStorybook } from '@backstage/plugin-search-react';
+import {
+  searchApiRef,
+  MockSearchApi,
+  SearchContextProvider,
+} from '@backstage/plugin-search-react';
+import { ApiProvider } from '@backstage/core-app-api';
+import { TestApiRegistry } from '@backstage/test-utils';
 import { SearchBar } from './SearchBar';
 
 export default {
@@ -24,13 +30,17 @@ export default {
   component: SearchBar,
   decorators: [
     (Story: ComponentType<{}>) => (
-      <SearchContextProviderForStorybook>
-        <Grid container direction="row">
-          <Grid item xs={12}>
-            <Story />
+      <ApiProvider
+        apis={TestApiRegistry.from([searchApiRef, new MockSearchApi()])}
+      >
+        <SearchContextProvider>
+          <Grid container direction="row">
+            <Grid item xs={12}>
+              <Story />
+            </Grid>
           </Grid>
-        </Grid>
-      </SearchContextProviderForStorybook>
+        </SearchContextProvider>
+      </ApiProvider>
     ),
   ],
 };
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
index 3c49b76699..c7111a52f2 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
@@ -16,7 +16,13 @@
 
 import { Grid, Paper } from '@material-ui/core';
 import React, { ComponentType } from 'react';
-import { SearchContextProviderForStorybook } from '@backstage/plugin-search-react';
+import {
+  searchApiRef,
+  MockSearchApi,
+  SearchContextProvider,
+} from '@backstage/plugin-search-react';
+import { ApiProvider } from '@backstage/core-app-api';
+import { TestApiRegistry } from '@backstage/test-utils';
 import { SearchFilter } from './SearchFilter';
 
 export default {
@@ -24,13 +30,17 @@ export default {
   component: SearchFilter,
   decorators: [
     (Story: ComponentType<{}>) => (
-      <SearchContextProviderForStorybook>
-        <Grid container direction="row">
-          <Grid item xs={4}>
-            <Story />
+      <ApiProvider
+        apis={TestApiRegistry.from([searchApiRef, new MockSearchApi()])}
+      >
+        <SearchContextProvider>
+          <Grid container direction="row">
+            <Grid item xs={4}>
+              <Story />
+            </Grid>
           </Grid>
-        </Grid>
-      </SearchContextProviderForStorybook>
+        </SearchContextProvider>
+      </ApiProvider>
     ),
   ],
 };
diff --git a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx
index e2e3db694b..2e70b2d6d3 100644
--- a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx
+++ b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx
@@ -29,7 +29,13 @@ import React, { ComponentType } from 'react';
 import { rootRouteRef } from '../../plugin';
 import { DefaultResultListItem } from '../DefaultResultListItem';
 import { SearchBar } from '../SearchBar';
-import { SearchApiProviderForStorybook } from '@backstage/plugin-search-react';
+import {
+  searchApiRef,
+  MockSearchApi,
+  SearchContextProvider,
+} from '@backstage/plugin-search-react';
+import { ApiProvider } from '@backstage/core-app-api';
+import { TestApiRegistry } from '@backstage/test-utils';
 import { SearchModal } from './SearchModal';
 import { SearchResult } from '../SearchResult';
 import { SearchResultPager } from '../SearchResultPager';
@@ -71,9 +77,16 @@ export default {
   decorators: [
     (Story: ComponentType<{}>) =>
       wrapInTestApp(
-        <SearchApiProviderForStorybook mockedResults={mockResults}>
-          <Story />
-        </SearchApiProviderForStorybook>,
+        <ApiProvider
+          apis={TestApiRegistry.from([
+            searchApiRef,
+            new MockSearchApi(mockResults),
+          ])}
+        >
+          <SearchContextProvider>
+            <Story />
+          </SearchContextProvider>
+        </ApiProvider>,
         { mountedRoutes: { '/search': rootRouteRef } },
       ),
   ],
diff --git a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx
index 4a3d950164..0bf894b860 100644
--- a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx
+++ b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx
@@ -20,8 +20,14 @@ import React, { ComponentType } from 'react';
 import { MemoryRouter } from 'react-router';
 import { DefaultResultListItem } from '../DefaultResultListItem';
 
-import { SearchContextProviderForStorybook } from '@backstage/plugin-search-react';
+import {
+  searchApiRef,
+  MockSearchApi,
+  SearchContextProvider,
+} from '@backstage/plugin-search-react';
 import { SearchResult } from './SearchResult';
+import { TestApiRegistry } from '@backstage/test-utils';
+import { ApiProvider } from '@backstage/core-app-api';
 
 const mockResults = {
   results: [
@@ -58,9 +64,16 @@ export default {
   decorators: [
     (Story: ComponentType<{}>) => (
       <MemoryRouter>
-        <SearchContextProviderForStorybook mockedResults={mockResults}>
-          <Story />
-        </SearchContextProviderForStorybook>
+        <ApiProvider
+          apis={TestApiRegistry.from([
+            searchApiRef,
+            new MockSearchApi(mockResults),
+          ])}
+        >
+          <SearchContextProvider>
+            <Story />
+          </SearchContextProvider>
+        </ApiProvider>
       </MemoryRouter>
     ),
   ],
diff --git a/plugins/search/src/components/SearchType/SearchType.stories.tsx b/plugins/search/src/components/SearchType/SearchType.stories.tsx
index b56f4c089c..e98655b684 100644
--- a/plugins/search/src/components/SearchType/SearchType.stories.tsx
+++ b/plugins/search/src/components/SearchType/SearchType.stories.tsx
@@ -19,21 +19,31 @@ import CatalogIcon from '@material-ui/icons/MenuBook';
 import DocsIcon from '@material-ui/icons/Description';
 import UsersGroupsIcon from '@material-ui/icons/Person';
 import React, { ComponentType } from 'react';
-import { SearchContextProviderForStorybook } from '@backstage/plugin-search-react';
 import { SearchType } from './SearchType';
+import { ApiProvider } from '@backstage/core-app-api';
+import { TestApiRegistry } from '@backstage/test-utils';
+import {
+  searchApiRef,
+  MockSearchApi,
+  SearchContextProvider,
+} from '@backstage/plugin-search-react';
 
 export default {
   title: 'Plugins/Search/SearchType',
   component: SearchType,
   decorators: [
     (Story: ComponentType<{}>) => (
-      <SearchContextProviderForStorybook>
-        <Grid container direction="row">
-          <Grid item xs={4}>
-            <Story />
+      <ApiProvider
+        apis={TestApiRegistry.from([searchApiRef, new MockSearchApi()])}
+      >
+        <SearchContextProvider>
+          <Grid container direction="row">
+            <Grid item xs={4}>
+              <Story />
+            </Grid>
           </Grid>
-        </Grid>
-      </SearchContextProviderForStorybook>
+        </SearchContextProvider>
+      </ApiProvider>
     ),
   ],
 };