fix(vr-tests): v8 VR tests are now wrapped with a ThemeProvider by de…

…fault (#32962)

apps/vr-tests/.storybook/preview.js

@@ -1,6 +1,7 @@
 // @ts-check
 
 import { setRTL } from '@fluentui/react/lib/Utilities';
+import { ThemeProviderDecorator } from '../src/utilities';
 
 /** @type {import('@storybook/react').Decorator[]} */
 export const decorators = [
@@ -9,6 +10,7 @@ export const decorators = [
 
     return storyFn(context);
   },
+  ThemeProviderDecorator,
 ];
 
 /** @type {import('@storybook/react').Parameters} */

apps/vr-tests/src/utilities/ThemeProviderDecorator.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { Decorator } from '@storybook/react';
+import { ThemeProvider } from '@fluentui/react';
+
+/**
+ * A decorator that wraps the story in a v8 `ThemeProvider` component.
+ * @returns The decorator function.
+ */
+export const ThemeProviderDecorator: Decorator = (story, context) => (
+  <ThemeProvider> {story(context)} </ThemeProvider>
+);

apps/vr-tests/src/utilities/index.ts

@@ -8,3 +8,4 @@ export * from './StoryVariantDecorator';
 export * from './StoryWrightDecorator';
 export * from './TestWrapperDecorator';
 export * from './DevOnlyStoryHeader';
+export * from './ThemeProviderDecorator';